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

    <!-- Menu -->
    <div class="menu-slot" *osPerms="'mediafiles.can_manage'">
        <button type="button" mat-icon-button (click)="createNewFolder(newFolderDialog)" *ngIf="!isMultiSelect">
            <mat-icon>create_new_folder</mat-icon>
        </button>
        <button type="button" mat-icon-button [matMenuTriggerFor]="mediafilesMenu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>

    <!-- Multiselect info -->
    <div *ngIf="isMultiSelect" 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>

<!-- Folder navigation bar -->
<div>
    <div class="custom-table-header">
        <!-- Scrollable folder bar -->
        <span class="folder-nav-bar h-scroller">
            <button class="folder" mat-button (click)="changeDirectory(null)" [disabled]="isMultiSelect">
                <mat-icon class="file-icon">home</mat-icon>
            </button>
            <span class="folder-section" *ngFor="let directory of directoryChain; let last = last">
                <span class="arrow">
                    <mat-icon>chevron_right</mat-icon>
                </span>
                <button
                    class="folder"
                    mat-button
                    (click)="changeDirectory(directory.id)"
                    [disabled]="isMultiSelect"
                    *ngIf="!last"
                >
                    <span class="folder-text">
                        {{ directory.filename }}
                    </span>
                </button>
                <button
                    class="folder"
                    mat-button
                    [matMenuTriggerFor]="singleMediafileMenu"
                    [matMenuTriggerData]="{ mediafile: directory }"
                    [disabled]="isMultiSelect"
                    *ngIf="last && showFileMenu(directory)"
                >
                    <os-icon-container icon="arrow_drop_down" swap="true" size="large" [noWrap]="true">
                        {{ directory.filename }}
                    </os-icon-container>
                </button>
                <span class="folder fake-folder folder-text" *ngIf="last && !showFileMenu(directory)">
                    {{ directory.filename }}
                </span>
            </span>
        </span>

        <!-- Visibility as button -->
        <span class="visibility" *ngIf="canEdit && directory && directory.has_inherited_access_groups">
            <button class="visible-for" mat-button (click)="onEditFile(directory)">
                <os-icon-container
                    icon="group"
                    matTooltip="{{ 'Allowed access groups for this directory' | translate }}"
                >
                    <span *ngFor="let group of directory.inherited_access_groups | slice: 0:3; let last = last">
                        <span>{{ group.getTitle() | translate }}</span>
                        <span *ngIf="!last">, </span>
                        <span *ngIf="last && directory.inherited_access_groups.length > 3">...</span>
                    </span>
                </os-icon-container>
            </button>
        </span>
    </div>
</div>

<!-- the actual file manager -->
<pbl-ngrid
    class="virtual-scroll-with-head-bar ngrid-hide-head file-manager-table"
    showHeader="false"
    vScrollAuto
    [dataSource]="dataSource"
    matCheckboxSelection="selection"
    [columns]="columnSet"
    [hideColumns]="hiddenColumns"
    (rowClick)="onSelectRow($event)"
>
    <!-- Icon column -->
    <div *pblNgridCellDef="'icon'; row as mediafile" class="fill clickable">
        <a class="detail-link" target="_blank" [routerLink]="mediafile.url" *ngIf="!mediafile.is_directory && !isMultiSelect">
        </a>
        <a class="detail-link" (click)="changeDirectory(mediafile.id)" *ngIf="mediafile.is_directory && !isMultiSelect">
        </a>
        <mat-icon class="file-icon">{{ mediafile.getIcon() }}</mat-icon>
    </div>

    <!-- Title column -->
    <div *pblNgridCellDef="'title'; row as mediafile" class="fill clickable">
        <a class="detail-link" target="_blank" [routerLink]="mediafile.url" *ngIf="!mediafile.is_directory && !isMultiSelect">
        </a>
        <a class="detail-link" (click)="changeDirectory(mediafile.id)" *ngIf="mediafile.is_directory && !isMultiSelect">
        </a>
        <div class="innerTable">
            <div class="file-title ellipsis-overflow">
                {{ mediafile.filename }}
            </div>
            <div class="info-text" *ngIf="!mediafile.is_directory">
                <span> {{ getDateFromTimestamp(mediafile.timestamp) }} · {{ mediafile.filesize }} </span>
            </div>
        </div>
    </div>

    <!-- Info column -->
    <div *pblNgridCellDef="'info'; row as mediafile" class="fill clickable" (click)="onEditFile(mediafile)">
        <os-icon-container *ngIf="mediafile.access_groups.length" icon="group">
            <span *ngFor="let group of mediafile.access_groups | slice: 0:3; let last = last">
                <span>{{ group.getTitle() | translate }}</span>
                <span *ngIf="!last">, </span>
                <span *ngIf="last && mediafile.access_groups.length > 3">...</span>
            </span>
        </os-icon-container>
    </div>

    <!-- Indicator column -->
    <div *pblNgridCellDef="'indicator'; row as mediafile" class="fill">
        <div
            *ngIf="getFileSettings(mediafile).length > 0"
            [matMenuTriggerFor]="singleMediafileMenu"
            [matMenuTriggerData]="{ mediafile: mediafile }"
            [matTooltip]="formatIndicatorTooltip(mediafile)"
        >
            <mat-icon class="file-icon" *ngIf="mediafile.isFont()">text_fields</mat-icon>
            <mat-icon class="file-icon" *ngIf="mediafile.isImage()">insert_photo</mat-icon>
        </div>
    </div>

    <!-- Menu column -->
    <div *pblNgridCellDef="'menu'; row as mediafile" class="fill">
        <button
            mat-icon-button
            [matMenuTriggerFor]="singleMediafileMenu"
            [matMenuTriggerData]="{ mediafile: mediafile }"
            [disabled]="isMultiSelect"
            *ngIf="showFileMenu(mediafile)"
        >
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>

    <!-- No Results -->
    <div *pblNgridNoDataRef class="pbl-ngrid-no-data">
        <span translate>No data</span>
    </div>
</pbl-ngrid>

<!-- Template for the managing buttons -->
<ng-template #manageButton let-mediafile="mediafile" let-action="action">
    <button mat-menu-item (click)="onManageButton($event, mediafile, action)">
        <mat-icon color="accent">
            {{ isUsedAs(mediafile, action) ? 'check_box' : 'check_box_outline_blank' }}
        </mat-icon>
        <span>{{ getNameOfAction(action) }}</span>
    </button>
</ng-template>

<!-- Menu for single files in the list -->
<mat-menu #singleMediafileMenu="matMenu">
    <ng-template matMenuContent let-mediafile="mediafile">
        <div *osPerms="'core.can_manage_logos_and_fonts'">
            <!-- Exclusive for images -->
            <div *ngIf="mediafile.isImage()">
                <div *ngFor="let action of logoActions">
                    <ng-container
                        *ngTemplateOutlet="manageButton; context: { mediafile: mediafile, action: action }"
                    ></ng-container>
                </div>
            </div>

            <!-- Exclusive for fonts -->
            <div *ngIf="mediafile.isFont()">
                <div *ngFor="let action of fontActions">
                    <ng-container
                        *ngTemplateOutlet="manageButton; context: { mediafile: mediafile, action: action }"
                    ></ng-container>
                </div>
            </div>
            <mat-divider *ngIf="mediafile.isFont() || mediafile.isImage()"></mat-divider>
        </div>

        <!-- Edit and delete for all images -->
        <os-projector-button
            *ngIf="mediafile.isProjectable()"
            [object]="mediafile"
            [menuItem]="true"
        ></os-projector-button>
        <os-speaker-button [object]="mediafile" [menuItem]="true"></os-speaker-button>
        <div *ngIf="canEdit">
            <button mat-menu-item (click)="onEditFile(mediafile)">
                <mat-icon>edit</mat-icon>
                <span translate>Edit</span>
            </button>
            <button mat-menu-item (click)="move(moveDialog, [mediafile])">
                <mat-icon>near_me</mat-icon>
                <span translate>Move</span>
            </button>
            <button mat-menu-item class="red-warning-text" (click)="onDelete(mediafile)">
                <mat-icon>delete</mat-icon>
                <span translate>Delete</span>
            </button>
        </div>
    </ng-template>
</mat-menu>

<!-- Menu for Mediafiles -->
<mat-menu #mediafilesMenu="matMenu">
    <div *ngIf="!isMultiSelect">
        <button mat-menu-item *osPerms="'mediafiles.can_manage'" (click)="toggleMultiSelect()">
            <mat-icon>library_add</mat-icon>
            <span translate>Multiselect</span>
        </button>
    </div>
    <div *ngIf="isMultiSelect">
        <button mat-menu-item [disabled]="!selectedRows.length" (click)="move(moveDialog, selectedRows)">
            <mat-icon>near_me</mat-icon>
            <span translate>Move</span>
        </button>
        <mat-divider></mat-divider>
        <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
            mat-menu-item
            *osPerms="'mediafiles.can_manage'"
            [disabled]="!selectedRows.length"
            (click)="deleteSelected()"
        >
            <mat-icon color="warn">delete</mat-icon>
            <span translate>Delete</span>
        </button>
    </div>
</mat-menu>

<!-- File edit dialog -->
<ng-template #fileEditDialog>
    <h1 mat-dialog-title>{{ 'Edit details for' | translate }}</h1>
    <div class="os-form-card-mobile" mat-dialog-content>
        <form class="edit-file-form" [formGroup]="fileEditForm">
            <mat-form-field>
                <input
                    type="text"
                    matInput
                    osAutofocus
                    required
                    formControlName="title"
                    placeholder="{{ 'New file name' | translate }}"
                />
                <mat-error *ngIf="fileEditForm.invalid" translate>Required</mat-error>
            </mat-form-field>

            <os-search-value-selector
                ngDefaultControl
                [formControl]="fileEditForm.get('access_groups_id')"
                [multiple]="true"
                listname="{{ 'Access groups' | translate }}"
                [inputListValues]="groupsBehaviorSubject"
            ></os-search-value-selector>
        </form>
    </div>
    <div mat-dialog-actions>
        <button
            type="submit"
            mat-button
            [disabled]="!fileEditForm.valid"
            color="primary"
            (click)="onSaveEditedFile(fileEditForm.value)"
        >
            <span translate>Save</span>
        </button>
        <button type="button" mat-button [mat-dialog-close]="null">
            <span translate>Cancel</span>
        </button>
    </div>
</ng-template>

<!-- New folder dialog -->
<ng-template #newFolderDialog>
    <h1 mat-dialog-title>{{ 'New directory' | translate }}</h1>
    <div class="os-form-card-mobile" mat-dialog-content>
        <form class="edit-file-form" [formGroup]="newDirectoryForm">
            <p translate>Please enter a name for the new directory:</p>
            <mat-form-field>
                <input matInput osAutofocus formControlName="title" required />
            </mat-form-field>

            <os-search-value-selector
                ngDefaultControl
                [formControl]="newDirectoryForm.get('access_groups_id')"
                [multiple]="true"
                listname="{{ 'Access groups' | translate }}"
                [inputListValues]="groupsBehaviorSubject"
            ></os-search-value-selector>
        </form>
    </div>
    <div mat-dialog-actions>
        <button type="submit" mat-button [disabled]="!newDirectoryForm.valid" color="primary" [mat-dialog-close]="true">
            <span translate>Save</span>
        </button>
        <button type="button" mat-button [mat-dialog-close]="null">
            <span translate>Cancel</span>
        </button>
    </div>
</ng-template>

<!-- Move dialog -->
<ng-template #moveDialog>
    <h1 mat-dialog-title>
        <span translate>Move into directory</span>
    </h1>
    <div class="os-form-card-mobile" mat-dialog-content>
        <p translate>Please select the directory:</p>
        <os-search-value-selector
            ngDefaultControl
            [formControl]="moveForm.get('directory_id')"
            [includeNone]="true"
            [noneTitle]="'Base folder'"
            listname="{{ 'Parent directory' | translate }}"
            [inputListValues]="filteredDirectoryBehaviorSubject"
        ></os-search-value-selector>
    </div>
    <div mat-dialog-actions>
        <button type="submit" mat-button color="primary" [mat-dialog-close]="true">
            <span translate>Move</span>
        </button>
        <button type="button" mat-button [mat-dialog-close]="null">
            <span translate>Cancel</span>
        </button>
    </div>
</ng-template>
