<os-head-bar [hasMainButton]="canAddUser" (mainEvent)="onPlusButton()" [multiSelectMode]="isMultiSelect">
    <!-- Title -->
    <div class="title-slot"><h2 translate>Participants</h2></div>

    <!-- Menu -->
    <div class="menu-slot">
        <button type="button" mat-icon-button [matMenuTriggerFor]="userMenu"><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"
    [showListOfSpeakers]="false"
    [multiSelect]="isMultiSelect"
    [hiddenInMobile]="['group', 'presence']"
    listStorageKey="user"
    [(selectedRows)]="selectedRows"
    (dataSourceChange)="onDataSourceChange($event)"
>
    <!-- Name column -->
    <div *pblNgridCellDef="'short_name'; value as name; row as user; rowContext as rowContext" class="cell-slot fill">
        <a class="detail-link" [routerLink]="user.id" *ngIf="!isMultiSelect"></a>
        <div class="nameCell">
            <span>{{ name }}</span>
        </div>
        <div class="icon-group">
            <mat-icon matTooltip="{{ 'Is committee' | translate }}" *ngIf="user.is_committee">account_balance</mat-icon>
            <mat-icon
                matTooltip="{{ 'Inactive' | translate }}"
                *ngIf="!user.is_active && this.operator.hasPerms('users.see_extra')"
                >block</mat-icon
            >
        </div>
    </div>

    <!-- group column -->
    <div
        *pblNgridCellDef="'group'; row as user"
        class="cell-slot fill"
        [ngClass]="isMultiSelect ? '' : 'clickable'"
        (click)="openEditInfo(user, $event)"
    >
        <div class="groupsCell">
            <div *ngIf="user.groups && user.groups.length">
                <os-icon-container icon="people">
                    <span *ngFor="let group of user.groups; let last = last">
                        {{ group.getTitle() | translate }}<span *ngIf="!last">,</span>
                    </span>
                </os-icon-container>
            </div>
            <div *ngIf="user.structure_level" class="spacer-top-5">
                <os-icon-container icon="flag">{{ user.structure_level }}</os-icon-container>
            </div>
            <div *ngIf="user.number" class="spacer-top-5">
                <os-icon-container icon="perm_identity">{{ user.number }}</os-icon-container>
            </div>
        </div>
    </div>

    <!-- Info column -->
    <div *pblNgridCellDef="'infos'; row as user" class="cell-slot fill">
        <div class="infoCell">
            <!-- Email-sent indicator -->
            <mat-icon
                inline
                *ngIf="user.isLastEmailSend"
                matTooltip="{{ 'Email sent' | translate }} ({{ getEmailSentTime(user) }})"
            >
                mail
            </mat-icon>

            <!-- Has comment indicator -->
            <mat-icon inline *ngIf="!!user.comment" matTooltip="{{ user.comment }}">
                comment
            </mat-icon>

            <os-icon-container *ngIf="user.isSamlUser" icon="device_hub"
                ><span translate>Is SAML user</span></os-icon-container
            >
        </div>
    </div>

    <!-- Presence column -->
    <div *pblNgridCellDef="'presence'; row as user" class="cell-slot fill">
        <mat-checkbox
            class="checkbox-ripple-padding"
            (change)="setPresent(user)"
            [checked]="user.is_present"
            [disabled]="isMultiSelect || !this.operator.hasPerms('users.can_manage')"
        >
            <span translate>Present</span>
        </mat-checkbox>
    </div>

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

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

        <!-- Presence -->
        <button mat-menu-item (click)="setPresent(user)">
            <mat-icon color="accent"> {{ user.is_present ? 'check_box' : 'check_box_outline_blank' }} </mat-icon>
            <span translate>Present</span>
        </button>
    </ng-template>
</mat-menu>

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

        <button mat-menu-item *osPerms="'users.can_manage'" routerLink="groups">
            <mat-icon>people</mat-icon>
            <span translate>Groups</span>
        </button>

        <div *ngIf="presenceViewConfigured">
            <button mat-menu-item *osPerms="'users.can_manage'" routerLink="presence">
                <mat-icon>transfer_within_a_station</mat-icon>
                <span translate>Presence</span>
            </button>
        </div>

        <button mat-menu-item (click)="pdfExportUserList()">
            <mat-icon>picture_as_pdf</mat-icon>
            <span translate>List of participants (PDF)</span>
        </button>

        <button mat-menu-item *osPerms="'users.can_manage'" (click)="onDownloadAccessPdf()">
            <mat-icon>picture_as_pdf</mat-icon>
            <span translate>Access data (PDF)</span>
        </button>

        <button mat-menu-item *osPerms="'users.can_manage'" (click)="csvExportUserList()">
            <mat-icon>archive</mat-icon>
            <span translate>Export as CSV</span>
        </button>

        <button mat-menu-item *osPerms="'users.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/participants">
            <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>

        <div *osPerms="'users.can_manage'">
            <mat-divider></mat-divider>
            <button mat-menu-item [disabled]="!selectedRows.length" (click)="setGroupSelected()">
                <mat-icon>people</mat-icon>
                <span translate>Add/remove groups ...</span>
            </button>

            <div *ngIf="presenceViewConfigured">
                <button
                    mat-menu-item
                    *osPerms="'users.can_manage'"
                    [disabled]="!selectedRows.length"
                    routerLink="presence"
                >
                    <mat-icon>transfer_within_a_station</mat-icon>
                    <span translate>Presence</span>
                </button>
            </div>

            <div *osPerms="'users.can_manage'">
                <mat-divider></mat-divider>

                <button mat-menu-item [disabled]="!selectedRows.length" (click)="setStateSelected('is_active')">
                    <mat-icon>block</mat-icon>
                    <span translate>Enable/disable account ...</span>
                </button>

                <button mat-menu-item [disabled]="!selectedRows.length" (click)="setStateSelected('is_present')">
                    <mat-icon>check_box</mat-icon>
                    <span translate>Set presence ...</span>
                </button>

                <button mat-menu-item [disabled]="!selectedRows.length" (click)="setStateSelected('is_committee')">
                    <mat-icon>account_balance</mat-icon>
                    <span translate>Set committee ...</span>
                </button>

                <mat-divider></mat-divider>

                <button mat-menu-item [disabled]="!selectedRows.length" (click)="sendInvitationEmailSelected()">
                    <mat-icon>mail</mat-icon>
                    <span translate>Send invitation email</span>
                </button>

                <button mat-menu-item [disabled]="!selectedRows.length" (click)="resetPasswordsToDefaultSelected()">
                    <mat-icon>vpn_key</mat-icon>
                    <span translate>Reset passwords to the default ones</span>
                </button>
                <button
                    mat-menu-item
                    [disabled]="!selectedRows.length"
                    (click)="generateNewPasswordsPasswordsSelected()"
                >
                    <mat-icon>vpn_key</mat-icon>
                    <span translate>Generate new passwords</span>
                </button>
                <mat-divider></mat-divider>
                <button
                    mat-menu-item
                    class="red-warning-text"
                    [disabled]="!selectedRows.length"
                    (click)="deleteSelected()"
                >
                    <mat-icon>delete</mat-icon>
                    <span translate>Delete</span>
                </button>
            </div>
        </div>
    </div>
</mat-menu>

<ng-template #userInfoDialog>
    <h1 mat-dialog-title>
        <span>{{ 'Edit details for' | translate }} {{ infoDialog.name }}</span>
    </h1>
    <div class="os-form-card-mobile" mat-dialog-content>
        <mat-form-field>
            <mat-select placeholder="{{ 'Groups' | translate }}" [(ngModel)]="infoDialog.groups_id" multiple>
                <mat-option *ngFor="let group of groups" [value]="group.id">
                    {{ group.getTitle() | translate }}
                </mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <mat-select placeholder="{{ 'Gender' | translate }}" [(ngModel)]="infoDialog.gender">
                <mat-option>-</mat-option>
                <mat-option *ngFor="let gender of genderList" [value]="gender">{{ gender | translate }}</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <input
                type="text"
                matInput
                placeholder="{{ 'Structure level' | translate }}"
                [(ngModel)]="infoDialog.structure_level"
            />
        </mat-form-field>
        <mat-form-field>
            <input
                type="text"
                matInput
                placeholder="{{ 'Participant number' | translate }}"
                [(ngModel)]="infoDialog.number"
            />
        </mat-form-field>
    </div>
    <div mat-dialog-actions>
        <button
            type="submit"
            mat-button
            color="primary"
            [mat-dialog-close]="{
                groups_id: infoDialog.groups_id,
                gender: infoDialog.gender,
                number: infoDialog.number,
                structure_level: infoDialog.structure_level
            }"
        >
            <span translate>Save</span>
        </button>
        <button type="button" mat-button [mat-dialog-close]="null">
            <span translate>Cancel</span>
        </button>
    </div>
</ng-template>
