<os-head-bar
    [hasMainButton]="operator.hasPerms('assignments.can_manage')"
    (mainEvent)="onPlusButton()"
    [multiSelectMode]="isMultiSelect"
>
    <!-- Title -->
    <div class="title-slot"><h2 translate>Elections</h2></div>
    <!-- Menu -->
    <div class="menu-slot">
        <button type="button" mat-icon-button [matMenuTriggerFor]="assignmentMenu">
            <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"
    [filterService]="filterService"
    [sortService]="sortService"
    [columns]="tableColumnDefinition"
    [filterProps]="filterProps"
    [multiSelect]="isMultiSelect"
    [hiddenInMobile]="getColumnsHiddenInMobile()"
    listStorageKey="assignments"
    [(selectedRows)]="selectedRows"
    (dataSourceChange)="onDataSourceChange($event)"
>
    <!-- Title -->
    <div *pblNgridCellDef="'title'; row as assignment; rowContext as rowContext" class="cell-slot fill">
        <a class="detail-link" [routerLink]="assignment.id" *ngIf="!isMultiSelect"></a>
        <div class="innerTable">
            <div class="title-line ellipsis-overflow">
                {{ assignment.getListTitle() }}
            </div>
            <mat-chip-list class="ellipsis-overflow" *ngIf="vp.isMobile">
                <mat-chip color="primary" selected>
                    {{ assignment.phaseString | translate }}
                </mat-chip>
            </mat-chip-list>
        </div>
    </div>

    <!-- Phase -->
    <div *pblNgridCellDef="'phase'; row as assignment" class="cell-slot fill mat-chip-wrapper">
        <mat-chip-list>
            <mat-chip color="primary" selected>
                {{ assignment.phaseString | translate }}
            </mat-chip>
        </mat-chip-list>
    </div>

    <!-- Candidates -->
    <div *pblNgridCellDef="'candidates'; row as assignment" class="cell-slot fill">
        <mat-chip-list>
            <mat-chip color="accent" selected matTooltip="{{ 'Number of candidates' | translate }}">
                {{ assignment.candidateAmount }}
            </mat-chip>
        </mat-chip-list>
    </div>

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

<!-- Menu for mobile entries -->
<mat-menu #singleItemMenu="matMenu">
    <ng-template matMenuContent let-assignment="assignment">
        <os-projector-button [object]="assignment" [menuItem]="true"></os-projector-button>
        <os-speaker-button [object]="assignment" [menuItem]="true"></os-speaker-button>
    </ng-template>
</mat-menu>

<mat-menu #assignmentMenu="matMenu">
    <div *ngIf="!isMultiSelect">
        <button mat-menu-item *osPerms="'assignment.can_manage'" (click)="toggleMultiSelect()">
            <mat-icon>library_add</mat-icon>
            <span translate>Multiselect</span>
        </button>
        <button mat-menu-item (click)="downloadAssignmentButton()">
            <mat-icon>archive</mat-icon>
            <span translate>Export ...</span>
        </button>
        <mat-divider></mat-divider>
        <!-- Settings -->
        <button mat-menu-item *osPerms="'core.can_manage_config'" routerLink="/settings/elections">
            <mat-icon>settings</mat-icon>
            <span translate>Settings</span>
        </button>
    </div>

    <div *ngIf="isMultiSelect">
        <button mat-menu-item (click)="selectAll()">
            <mat-icon>done_all</mat-icon>
            <span translate>Select all</span>
        </button>
        <button mat-menu-item [disabled]="!selectedRows.length" (click)="deselectAll()">
            <mat-icon>clear</mat-icon>
            <span translate>Deselect all</span>
        </button>
        <mat-divider></mat-divider>
        <button
            *osPerms="'assignment.can_manage'"
            mat-menu-item
            [disabled]="!selectedRows.length"
            (click)="downloadAssignmentButton(selectedRows)"
        >
            <mat-icon>archive</mat-icon>
            <span>{{ 'Export selected elections' | translate }}</span>
        </button>
        <mat-divider></mat-divider>
        <button
            mat-menu-item
            class="red-warning-text"
            *osPerms="'assignment.can_manage'"
            [disabled]="!selectedRows.length"
            (click)="deleteSelected()"
        >
            <mat-icon>delete</mat-icon>
            <span translate>Delete</span>
        </button>
    </div>
</mat-menu>
