<os-head-bar [hasMainButton]="canManage" (mainEvent)="onPlusButton()" [multiSelectMode]="isMultiSelect">
    <!-- Title -->
    <div class="title-slot"><h2 translate>Agenda</h2></div>
    <!-- Menu -->
    <div class="menu-slot">
        <button type="button" mat-icon-button [matMenuTriggerFor]="agendaMenu"><mat-icon>more_vert</mat-icon></button>
    </div>

    <!-- Multiselect info -->
    <div class="central-info-slot">
        <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
        <span>{{ selectedRows.length }}&nbsp;</span><span translate>selected</span>
    </div>
</os-head-bar>

<os-list-view-table
    [repo]="repo"
    [vScrollFixed]="64"
    [filterService]="filterService"
    [columns]="tableColumnDefinition"
    [multiSelect]="isMultiSelect"
    [restricted]="restrictedColumns"
    [hiddenInMobile]="['info']"
    [alwaysShowMenu]="true"
    [filterProps]="filterProps"
    listStorageKey="agenda"
    [(selectedRows)]="selectedRows"
    (dataSourceChange)="onDataSourceChange($event)"
>
    <!-- Title column -->
    <div *pblNgridCellDef="'title'; row as item; rowContext as rowContext" class="cell-slot fill">
        <a class="detail-link" [routerLink]="getDetailUrl(item)" *ngIf="!isMultiSelect"></a>
        <div [ngStyle]="{ 'margin-left': item.level * 25 + 'px' }" class="innerTable">
            <os-icon-container [noWrap]="true" [icon]="item.closed ? 'check' : null" size="large">
                <div class="ellipsis-overflow">
                    {{ item.getListTitle() }}
                </div>
                <div *ngIf="showSubtitle" class="subtitle ellipsis-overflow">
                    {{ item.getSubtitle() }}
                </div>
            </os-icon-container>
        </div>
    </div>

    <!-- Info Column -->
    <div *pblNgridCellDef="'info'; row as item" class="cell-slot fill clickable" (click)="openEditInfo(item)">
        <div class="info-col-items">
            <div *osPerms="'agenda.can_manage'; and: item.verboseType">
                <os-icon-container icon="visibility">{{ item.verboseType | translate }}</os-icon-container>
            </div>
            <div *ngIf="item.duration" class="spacer-top-5">
                <os-icon-container icon="access_time">
                    {{ durationService.durationToString(item.duration, 'h') }}
                </os-icon-container>
            </div>
        </div>
        <div *ngIf="item.comment" class="align-right">
            <os-icon-container [matTooltip]="item.comment" icon="comment"></os-icon-container>
        </div>
    </div>

    <!-- Menu -->
    <div *pblNgridCellDef="'menu'; row as item" class="cell-slot fill">
        <button
            mat-icon-button
            [disabled]="isMultiSelect"
            [matMenuTriggerFor]="singleItemMenu"
            (click)="$event.stopPropagation()"
            [matMenuTriggerData]="{ item: item }"
        >
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>
</os-list-view-table>

<mat-menu #agendaMenu="matMenu">
    <div *ngIf="!isMultiSelect">
        <div *osPerms="'agenda.can_manage'">
            <!-- Enable multi select -->
            <button mat-menu-item (click)="toggleMultiSelect()">
                <mat-icon>library_add</mat-icon>
                <span translate>Multiselect</span>
            </button>

            <!-- automatic numbering -->
            <button mat-menu-item *ngIf="isNumberingAllowed" (click)="onAutoNumbering()">
                <mat-icon>format_list_numbered</mat-icon>
                <span translate>Numbering</span>
            </button>
            <button mat-menu-item routerLink="sort-agenda">
                <mat-icon>sort</mat-icon>
                <span translate>Sort</span>
            </button>
        </div>

        <!-- Project agenda -->
        <os-projector-button [object]="itemListSlide" [menuItem]="true"></os-projector-button>

        <!-- Current list of speakers -->
        <button mat-menu-item *osPerms="'agenda.can_see_list_of_speakers'" routerLink="speakers">
            <mat-icon>mic</mat-icon>
            <span translate>Current list of speakers</span>
        </button>
        <!-- CSV export -->
        <button mat-menu-item *osPerms="'agenda.can_manage'" (click)="csvExportItemList()">
            <mat-icon>archive</mat-icon>
            <span translate>Export as CSV</span>
        </button>
        <!-- PDF export -->
        <button mat-menu-item (click)="onDownloadPdf()">
            <mat-icon>picture_as_pdf</mat-icon>
            <span translate>Export as PDF</span>
        </button>
        <!-- Import -->
        <button mat-menu-item *osPerms="'agenda.can_manage'" routerLink="import">
            <mat-icon>cloud_upload</mat-icon>
            <span translate>Import</span>
        </button>
        <mat-divider></mat-divider>
        <!-- Settings -->
        <button mat-menu-item *osPerms="'core.can_manage_config'" routerLink="/settings/agenda">
            <mat-icon>settings</mat-icon>
            <span translate>Settings</span>
        </button>
    </div>

    <div *ngIf="isMultiSelect">
        <!-- Select all -->
        <button mat-menu-item (click)="selectAll()">
            <mat-icon>done_all</mat-icon>
            <span translate>Select all</span>
        </button>

        <!-- Deselect all -->
        <button mat-menu-item [disabled]="!selectedRows.length" (click)="deselectAll()">
            <mat-icon>clear</mat-icon>
            <span translate>Deselect all</span>
        </button>
        <mat-divider></mat-divider>
        <div *osPerms="'agenda.can_manage'">
            <!-- Close selected -->
            <button mat-menu-item [disabled]="!selectedRows.length" (click)="setClosedSelected(true)">
                <mat-icon>done</mat-icon>
                <span translate>Close</span>
            </button>

            <!-- Open selected -->
            <button mat-menu-item [disabled]="!selectedRows.length" (click)="setClosedSelected(false)">
                <mat-icon>redo</mat-icon>
                <span translate>Open</span>
            </button>

            <mat-divider></mat-divider>

            <!-- Set multiple to public -->
            <button mat-menu-item [disabled]="!selectedRows.length" (click)="setAgendaType(1)">
                <mat-icon>public</mat-icon>
                <span translate>Set public</span>
            </button>

            <!-- Set multiple to internal -->
            <button mat-menu-item [disabled]="!selectedRows.length" (click)="setAgendaType(2)">
                <mat-icon>visibility</mat-icon>
                <span translate>Set internal</span>
            </button>

            <!-- Set multiple to hidden -->
            <button mat-menu-item [disabled]="!selectedRows.length" (click)="setAgendaType(3)">
                <mat-icon>visibility_off</mat-icon>
                <span translate>Set hidden</span>
            </button>
            <mat-divider></mat-divider>

            <!-- Delete selected -->
            <button mat-menu-item [disabled]="!selectedRows.length" (click)="removeSelected()">
                <mat-icon>remove</mat-icon>
                <span translate>Remove from agenda</span>
            </button>
        </div>
    </div>
</mat-menu>

<mat-menu #singleItemMenu="matMenu">
    <ng-template matMenuContent let-item="item">
        <!-- Mobile entries -->
        <div *ngIf="vp.isMobile">
            <os-projector-button [object]="item.contentObject" [menuItem]="true"></os-projector-button>
            <os-speaker-button [object]="item.contentObjectData" [menuItem]="true"></os-speaker-button>
        </div>

        <!-- Agenda entries -->
        <div *osPerms="'agenda.can_manage'">
            <!-- Done check -->
            <button mat-menu-item (click)="onDoneSingleButton(item)">
                <mat-icon color="accent"> {{ item.closed ? 'check_box' : 'check_box_outline_blank' }} </mat-icon>
                <span translate>Done</span>
            </button>

            <!-- Edit button -->
            <button mat-menu-item (click)="openEditInfo(item, $event)">
                <mat-icon>edit</mat-icon>
                <span translate>Edit details</span>
            </button>

            <!-- Delete Button -->
            <button
                mat-menu-item
                (click)="removeFromAgenda(item)"
                *ngIf="item.contentObjectData.collection !== 'topics/topic'"
            >
                <mat-icon>remove</mat-icon>
                <span translate>Remove from agenda</span>
            </button>

            <button
                mat-menu-item
                class="red-warning-text"
                (click)="deleteTopic(item)"
                *ngIf="item.contentObjectData.collection === 'topics/topic'"
            >
                <mat-icon>delete</mat-icon>
                <span translate>Delete</span>
            </button>
        </div>
    </ng-template>
</mat-menu>
