<os-head-bar [nav]="false" [goBack]="true" [editMode]="isSortMode" (cancelEditEvent)="onCancelSorting()" (saveEvent)="onSaveSorting()">
    <!-- Title -->
    <div class="title-slot">
        <h2>
            <span *ngIf="!isCurrentListOfSpeakers && !isSortMode" translate>List of speakers</span>
            <span *ngIf="isCurrentListOfSpeakers && !isSortMode" translate>Current list of speakers</span>
            <span *ngIf="isSortMode" translate>Sort list of speakers</span>
        </h2>
    </div>
    <div class="menu-slot" *osPerms="['agenda.can_manage_list_of_speakers', 'core.can_manage_projector']">
        <button type="button" mat-icon-button matTooltip="{{ 'Re-add last speaker' | translate }}" (click)="readdLastSpeaker()" [disabled]="!finishedSpeakers || !finishedSpeakers.length"><mat-icon>undo</mat-icon></button>
        <button type="button" mat-icon-button [matMenuTriggerFor]="speakerMenu"><mat-icon>more_vert</mat-icon></button>
    </div>
</os-head-bar>

<mat-card class="os-card speaker-card" *ngIf="viewListOfSpeakers">
    <!-- Title -->
    <h1 class="los-title">
        {{ viewListOfSpeakers.getTitle() }}
        <mat-icon *ngIf="viewListOfSpeakers.closed">
            lock
        </mat-icon>
    </h1>

    <!-- List of finished speakers -->
    <mat-expansion-panel *ngIf="finishedSpeakers && finishedSpeakers.length > 0" class="finished-list">
        <mat-expansion-panel-header>
            <mat-panel-title translate> Last speakers </mat-panel-title>
        </mat-expansion-panel-header>
        <mat-list>
            <mat-list-item *ngFor="let speaker of finishedSpeakers; let number = index">
                <div class="finished-speaker-grid">
                    <div class="number">{{ number + 1 }}.</div>
                    <div class="name">{{ speaker.getTitle() }}</div>
                    <div class="time">
                        {{ durationString(speaker) }} ({{ 'Start time' | translate }}: {{ startTimeToString(speaker) }})
                    </div>
                    <div class="controls">
                        <button
                            mat-icon-button
                            matTooltip="{{ 'Remove' | translate }}"
                            *osPerms="'agenda.can_manage_list_of_speakers'"
                            (click)="onDeleteButton(speaker)"
                        >
                            <mat-icon>close</mat-icon>
                        </button>
                    </div>
                </div>
            </mat-list-item>
        </mat-list>
    </mat-expansion-panel>

    <!-- horizontal separation line -->
    <mat-divider *ngIf="finishedSpeakers && finishedSpeakers.length"></mat-divider>
    <div *ngIf="finishedSpeakers && finishedSpeakers.length" class="spacer-bottom-40"></div>

    <!-- Current Speaker -->
    <div class="current-speaker" *ngIf="activeSpeaker">
        <span class="prefix">
            <mat-icon>mic</mat-icon>
        </span>

        <span class="name">{{ activeSpeaker.getListTitle() }}</span>

        <span class="suffix">
            <!-- Stop speaker button -->
            <button
                mat-icon-button
                matTooltip="{{ 'End speech' | translate }}"
                *osPerms="'agenda.can_manage_list_of_speakers'"
                (click)="onStopButton()"
            >
                <mat-icon>stop</mat-icon>
            </button>
        </span>
    </div>

    <!-- Waiting speakers -->
    <div class="waiting-list" *ngIf="speakers && speakers.length > 0">
        <os-sorting-list
            [input]="speakers"
            [live]="!isSortMode"
            [count]="true"
            [enable]="opCanManage() && isSortMode"
        >
            <!-- implicit speaker references into the component using ng-template slot -->
            <ng-template let-speaker>
                <span *osPerms="'agenda.can_manage_list_of_speakers'">
                    <span *ngIf="hasSpokenCount(speaker)" class="red-warning-text speaker-warning">
                        {{ hasSpokenCount(speaker) + 1 }}. <span translate>contribution</span>
                    </span>
                    <span *ngIf="speaker.gender">({{ speaker.gender | translate }})</span>
                </span>

                <!-- Start, start and delete buttons -->
                <span *osPerms="'agenda.can_manage_list_of_speakers'">
                    <!-- start button -->
                    <button
                        mat-icon-button
                        matTooltip="{{ 'Begin speech' | translate }}"
                        (click)="onStartButton(speaker)"
                    >
                        <mat-icon>play_arrow</mat-icon>
                    </button>

                    <!-- star button -->
                    <button
                        mat-icon-button
                        matTooltip="{{ 'Mark speaker' | translate }}"
                        (click)="onMarkButton(speaker)"
                    >
                        <mat-icon>{{ speaker.marked ? 'star' : 'star_border' }}</mat-icon>
                    </button>

                    <!-- delete button -->
                    <button mat-icon-button matTooltip="{{ 'Remove' | translate }}" (click)="onDeleteButton(speaker)">
                        <mat-icon>close</mat-icon>
                    </button>
                </span>
            </ng-template>
        </os-sorting-list>
    </div>

    <!-- Search for speakers -->
    <div *osPerms="'agenda.can_manage_list_of_speakers'">
        <form *ngIf="filteredUsers && filteredUsers.value.length > 0" [formGroup]="addSpeakerForm">
            <os-search-value-selector
                class="search-users"
                ngDefaultControl
                [formControl]="addSpeakerForm.get('user_id')"
                listname="{{ 'Select or search new speaker ...' | translate }}"
                [inputListValues]="filteredUsers"
            ></os-search-value-selector>
        </form>
    </div>

    <!-- Add me and remove me if OP has correct permission -->
    <div *osPerms="'agenda.can_be_speaker'" class="add-self-buttons">
        <div *ngIf="speakers && !closedList">
            <button
                mat-stroked-button
                [disabled]="viewListOfSpeakers.closed"
                (click)="addNewSpeaker()"
                *ngIf="!isOpInList() && canAddSelf"
            >
                <mat-icon>add</mat-icon>
                <span translate>Add me</span>
            </button>
            <button mat-stroked-button (click)="onDeleteButton()" *ngIf="isOpInList()">
                <mat-icon>remove</mat-icon>
                <span translate>Remove me</span>
            </button>
        </div>
    </div>
</mat-card>

<mat-menu #speakerMenu="matMenu">
    <button mat-menu-item (click)="isSortMode = true">
        <mat-icon>sort</mat-icon>
        <span translate>Sort</span>
    </button>

    <os-projector-button
        *ngIf="viewListOfSpeakers && projectors && projectors.length > 1"
        [object]="getClosSlide()"
        [menuItem]="true"
        text="Current list of speakers (as slide)"
    ></os-projector-button>

    <os-projector-button
        *ngIf="viewListOfSpeakers"
        [object]="viewListOfSpeakers"
        [menuItem]="true"
        text="List of speakers"
    ></os-projector-button>

    <os-projector-button
        *ngIf="viewListOfSpeakers"
        [object]="viewListOfSpeakers.contentObject"
        [menuItem]="true"
        [text]="getContentObjectProjectorButtonText()"
    ></os-projector-button>

    <button mat-menu-item *ngIf="isListOfSpeakersClosed" (click)="openSpeakerList()">
        <mat-icon>lock_open</mat-icon>
        <span translate>Open list of speakers</span>
    </button>

    <button mat-menu-item *ngIf="!isListOfSpeakersClosed" (click)="closeSpeakerList()">
        <mat-icon>lock</mat-icon>
        <span translate>Close list of speakers</span>
    </button>

    <mat-divider *ngIf="!isListOfSpeakersEmpty"></mat-divider>

    <button mat-menu-item (click)="clearSpeakerList()" *ngIf="!isListOfSpeakersEmpty" class="red-warning-text">
        <mat-icon>delete</mat-icon>
        <span translate>Remove all speakers</span>
    </button>
</mat-menu>
