<mat-card *ngIf="countdown">
    <div class="grid-wrapper">
        <div class="projector-button">
            <os-projector-button [object]="countdown" [projector]="projector"></os-projector-button>
        </div>

        <div class="title">{{ countdown.getTitle() | translate }}</div>

        <div class="action-buttons">
            <button
                type="button"
                class="small-mat-icon-button"
                mat-icon-button
                (click)="onBringDialog()"
                matTooltip="{{ 'Open projection dialog' | translate }}"
            >
                <mat-icon>
                    open_in_new
                </mat-icon>
            </button>
            <button type="button" class="small-mat-icon-button" mat-icon-button (click)="onEdit()">
                <mat-icon>
                    edit
                </mat-icon>
            </button>
            <button type="button" class="small-mat-icon-button" mat-icon-button (click)="onDelete()">
                <mat-icon>
                    close
                </mat-icon>
            </button>
        </div>

        <div class="timer">
            <os-countdown-time
                class="larger-countdown"
                [countdown]="countdown"
                [warningTime]="warningTime"
            ></os-countdown-time>

            <div>
                <button
                    type="button"
                    class="small-mat-icon-button"
                    mat-icon-button
                    [disabled]="!canStop()"
                    (click)="stop($event)"
                >
                    <mat-icon>stop</mat-icon>
                </button>
                <button
                    type="button"
                    class="small-mat-icon-button"
                    mat-icon-button
                    (click)="start($event)"
                    *ngIf="!countdown.running"
                >
                    <mat-icon>play_arrow</mat-icon>
                </button>
                <button
                    type="button"
                    class="small-mat-icon-button"
                    mat-icon-button
                    (click)="pause($event)"
                    *ngIf="countdown.running"
                >
                    <mat-icon>pause</mat-icon>
                </button>
            </div>
        </div>
    </div>
</mat-card>
