<ion-item *ngIf="mode !== modeBasic" class="core-timer" role="timer"
    [ngClass]="{'ion-text-center': align == 'center', 'ion-text-end': align == 'right'}">
    <ion-icon name="fas-clock" slot="start" aria-hidden="true"></ion-icon>
    <ion-label>
        <ng-container *ngTemplateOutlet="timerTemplate"></ng-container>
    </ion-label>
</ion-item>

<div *ngIf="mode === modeBasic" class="core-timer ion-padding" role="timer"
    [ngClass]="{'ion-text-center': align == 'center', 'ion-text-end': align == 'right'}">
    <ng-container *ngTemplateOutlet="timerTemplate"></ng-container>
</div>

<ng-template #timerTemplate>
    <span *ngIf="timerText" class="core-timer-text">{{ timerText }}</span>
    <span *ngIf="timeLeft && timeLeft > 0" class="core-timer-time-left">{{ timeLeft | coreSecondsToHMS }}</span>
    <span class="core-timesup" *ngIf="timeLeft !== undefined && timeLeft <= 0">
        <ng-container *ngIf="timeUpText">{{ timeUpText }}</ng-container>
        <ng-container *ngIf="!timeUpText">{{ 'core.timesup' | translate }}</ng-container>
    </span>
</ng-template>
