<os-head-bar
    [nav]="false"
    [hasMainButton]="canManage()"
    mainButtonIcon="edit"
    [goBack]="true"
    (mainEvent)="editProjector()"
>
    <!-- Title -->
    <div class="title-slot">
        <h2>{{ projector?.name | translate }}</h2>
    </div>

    <!-- Menu -->
    <div class="menu-slot">
        <button
            *osPerms="'core.can_manage_projector'"
            type="button"
            mat-icon-button
            [matMenuTriggerFor]="projectorExtraMenu"
        >
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>

    <mat-menu #projectorExtraMenu="matMenu">
        <!-- Button for set reference projector -->
        <button mat-menu-item (click)="onSetAsClosRef()" *ngIf="projector" [disabled]="projector.isReferenceProjector">
            <mat-icon *ngIf="projector.isReferenceProjector">star</mat-icon>
            <mat-icon *ngIf="!projector.isReferenceProjector">star_border</mat-icon>
            <span>{{ 'Set as reference projector' | translate }}</span>
        </button>

        <!-- delete -->
        <button mat-menu-item class="red-warning-text" (click)="onDeleteProjectorButton()">
            <mat-icon>delete</mat-icon>
            <span translate>Delete</span>
        </button>
    </mat-menu>
</os-head-bar>

<os-grid-layout *ngIf="projector">
    <os-tile [preferredSize]="projectorTileSizeLeft">
        <div *ngIf="projector" class="projector-detail-wrapper column-left">
            <a [routerLink]="['/projector', projector.id]">
                <div id="projector">
                    <os-projector [projector]="projector"></os-projector>
                </div>
            </a>
            <!-- Controls under the projector preview -->
            <div *osPerms="'core.can_manage_projector'" class="control-group projector-controls">
                <!-- scale down -->
                <button
                    type="button"
                    mat-icon-button
                    (click)="scale(scrollScaleDirection.Down)"
                    matTooltip="{{ 'Zoom out' | translate }}"
                >
                    <mat-icon>zoom_out</mat-icon>
                </button>
                <!-- scale up -->
                <button
                    type="button"
                    mat-icon-button
                    (click)="scale(scrollScaleDirection.Up)"
                    matTooltip="{{ 'Zoom in' | translate }}"
                >
                    <mat-icon>zoom_in</mat-icon>
                </button>
                <!-- reset button -->
                <button
                    type="button"
                    mat-icon-button
                    (click)="scale(scrollScaleDirection.Reset)"
                    matTooltip="{{ 'Reset' | translate }}"
                >
                    <mat-icon>refresh</mat-icon>
                </button>
                <!-- scaling indicator -->
                <div class="button-size" [ngClass]="projector.scale != 0 ? 'warn' : ''">{{ projector.scale }}</div>

                <!-- scroll viewport up (fast), decrease scroll counter -->
                <button
                    [disabled]="projector.scroll <= 4"
                    type="button"
                    class="spacer-left-50"
                    mat-icon-button
                    (click)="scroll(scrollScaleDirection.Down, 5)"
                    matTooltip="{{ 'Scroll up (big step)' | translate }}"
                >
                    <mat-icon>arrow_upward</mat-icon>
                </button>
                <!-- scroll viewport up (slow), decrease scroll counter -->
                <button
                    [disabled]="projector.scroll <= 0"
                    type="button"
                    mat-icon-button
                    (click)="scroll(scrollScaleDirection.Down)"
                    matTooltip="{{ 'Scroll up' | translate }}"
                >
                    <mat-icon>arrow_drop_up</mat-icon>
                </button>
                <!-- scroll viewport down (slow), increase scroll counter -->
                <button
                    type="button"
                    mat-icon-button
                    (click)="scroll(scrollScaleDirection.Up)"
                    matTooltip="{{ 'Scroll down' | translate }}"
                >
                    <mat-icon>arrow_drop_down</mat-icon>
                </button>
                <!-- scroll viewport down (fast), increase scroll counter -->
                <button
                    type="button"
                    mat-icon-button
                    (click)="scroll(scrollScaleDirection.Up, 5)"
                    matTooltip="{{ 'Scroll down (big step)' | translate }}"
                >
                    <mat-icon>arrow_downward</mat-icon>
                </button>
                <!-- reset button -->
                <button
                    type="button"
                    mat-icon-button
                    (click)="scroll(scrollScaleDirection.Reset)"
                    matTooltip="{{ 'Reset' | translate }}"
                >
                    <mat-icon>refresh</mat-icon>
                </button>
                <!-- scroll indicator -->
                <div class="button-size" [ngClass]="projector.scroll != 0 ? 'warn' : ''">
                    {{ projector.scroll }}
                </div>
            </div>
        </div>
    </os-tile>
    <os-tile [preferredSize]="projectorTileSizeRight">
        <div *osPerms="'core.can_manage_projector'">
            <div class="control-group slide-controls">
                <button
                    type="button"
                    mat-button
                    (click)="projectPreviousSlide()"
                    [disabled]="projector?.elements_history.length === 0"
                >
                    <mat-icon>arrow_back</mat-icon>
                    <span translate>Previous</span>
                </button>
                <button
                    type="button"
                    mat-button
                    (click)="projectNextSlide()"
                    [disabled]="projector?.elements_preview.length === 0"
                >
                    <span translate>Next</span>
                    <mat-icon>arrow_forward</mat-icon>
                </button>
                <hr />
            </div>

            <div>
                <div *ngIf="projector.non_stable_elements.length">
                    <mat-list>
                        <mat-list-item
                            *ngFor="let element of projector.non_stable_elements"
                            class="current-element backgroundColorAccent"
                        >
                            <div class="emelent-grid">
                                <button type="button" mat-icon-button (click)="unprojectCurrent(element)">
                                    <mat-icon>videocam</mat-icon>
                                </button>

                                <span class="ellipsis-overflow current-element-text">
                                    {{ getSlideTitle(element) }}
                                </span>

                                <button type="button" mat-icon-button (click)="unprojectCurrent(element)">
                                    <mat-icon>close</mat-icon>
                                </button>
                            </div>
                        </mat-list-item>
                    </mat-list>
                </div>

                <!-- Expandable elements -->
                <mat-accordion multi="true">
                    <!-- Queue -->
                    <mat-expansion-panel *ngIf="projector.elements_preview.length" [expanded]="true" class="queue">
                        <mat-expansion-panel-header>
                            <span translate>Queue</span>
                        </mat-expansion-panel-header>
                        <div
                            cdkDropList
                            class="drop-list"
                            [cdkDropListDisabled]="!editQueue"
                            (cdkDropListDropped)="onSortingChange($event)"
                        >
                            <div
                                class="drop-list-entry queue-element backgroundColorLight"
                                *ngFor="let element of projector.elements_preview; let i = index"
                                cdkDrag
                            >
                                <div class="drag-handle" cdkDragHandle *ngIf="editQueue">
                                    <mat-icon>drag_indicator</mat-icon>
                                </div>
                                <div class="drag-handle no-drag" *ngIf="!editQueue">
                                    <button type="button" mat-icon-button (click)="projectNow(i)">
                                        <mat-icon>videocam</mat-icon>
                                    </button>
                                </div>
                                <div class="name">
                                    <span>{{ getSlideTitle(element) }}</span>
                                </div>
                                <div class="button-right" *ngIf="editQueue">
                                    <div>
                                        <button type="button" mat-icon-button (click)="removePreviewElement(i)">
                                            <mat-icon>delete</mat-icon>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <mat-action-row>
                            <button *ngIf="!editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
                                <mat-icon>edit</mat-icon>
                            </button>
                            <button *ngIf="editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
                                <mat-icon>close</mat-icon>
                            </button>
                        </mat-action-row>
                    </mat-expansion-panel>

                    <!-- countdowns -->
                    <mat-expansion-panel>
                        <mat-expansion-panel-header>
                            <span translate>Countdowns</span>
                        </mat-expansion-panel-header>
                        <mat-list>
                            <mat-list-item *ngFor="let countdown of countdowns" class="larger-mat-list-item">
                                <os-countdown-controls
                                    class="dynamic-list-entry"
                                    [countdown]="countdown"
                                    [projector]="projector.projector"
                                    (editEvent)="openCountdownDialog($event)"
                                ></os-countdown-controls>
                            </mat-list-item>
                        </mat-list>
                        <mat-action-row>
                            <button type="button" mat-button (click)="openCountdownDialog()">
                                <mat-icon>add</mat-icon>
                                <span translate>Add countdown</span>
                            </button>
                        </mat-action-row>
                    </mat-expansion-panel>

                    <!-- messages -->
                    <mat-expansion-panel>
                        <mat-expansion-panel-header>
                            <span translate>Messages</span>
                        </mat-expansion-panel-header>
                        <mat-list>
                            <mat-list-item *ngFor="let message of messages" class="larger-mat-list-item">
                                <os-message-controls
                                    class="dynamic-list-entry"
                                    [message]="message"
                                    [projector]="projector.projector"
                                    (editEvent)="openMessagesDialog($event)"
                                >
                                </os-message-controls>
                            </mat-list-item>
                        </mat-list>
                        <mat-action-row>
                            <button type="button" mat-button (click)="openMessagesDialog()">
                                <mat-icon>add</mat-icon>
                                <span translate>Add message</span>
                            </button>
                        </mat-action-row>
                    </mat-expansion-panel>

                    <!-- Current list of speakers -->
                    <mat-expansion-panel>
                        <mat-expansion-panel-header>
                            <span translate>Current list of speakers</span>
                        </mat-expansion-panel-header>

                        <!-- Slide-->
                        <mat-list *ngIf="projectorCount > 1">
                            <mat-list-item>
                                <button
                                    type="button"
                                    mat-mini-fab
                                    (click)="toggleClos(false)"
                                    [ngClass]="isClosProjected(false) ? 'projector-active' : 'projector-inactive'"
                                >
                                    <mat-icon>videocam</mat-icon>
                                </button>
                                <span class="spacer-left-10" translate>Slide</span>
                            </mat-list-item>
                        </mat-list>

                        <!-- Overlay -->
                        <mat-list>
                            <mat-list-item>
                                <button
                                    type="button"
                                    mat-mini-fab
                                    (click)="toggleClos(true)"
                                    [ngClass]="isClosProjected(true) ? 'projector-active' : 'projector-inactive'"
                                >
                                    <mat-icon>videocam</mat-icon>
                                </button>
                                <span class="spacer-left-10" translate>Overlay</span>
                            </mat-list-item>
                        </mat-list>

                        <!-- Chyron -->
                        <mat-list>
                            <mat-list-item>
                                <button
                                    type="button"
                                    mat-mini-fab
                                    (click)="toggleChyron()"
                                    [ngClass]="isChyronProjected() ? 'projector-active' : 'projector-inactive'"
                                >
                                    <mat-icon>videocam</mat-icon>
                                </button>
                                <span class="spacer-left-10" translate>Chyron</span>
                            </mat-list-item>
                        </mat-list>
                    </mat-expansion-panel>

                    <mat-expansion-panel *ngIf="projector.elements_history.length">
                        <mat-expansion-panel-header>
                            <span translate>Previous slides</span>
                        </mat-expansion-panel-header>
                        <ol>
                            <li *ngFor="let elements of projector.elements_history">
                                {{ getSlideTitle(elements[0]) }}
                            </li>
                        </ol>
                    </mat-expansion-panel>

                    <os-presentation-control [projector]="projector"> </os-presentation-control>
                </mat-accordion>
            </div>
        </div>
    </os-tile>
</os-grid-layout>
