<div
    *ngIf="data" class="full-width"
    [class.adf-data-table-card]="display === 'gallery'"
    [class.adf-data-table]="display === 'list'">
    <div *ngIf="isHeaderVisible()" class="adf-datatable-header">
        <div class="adf-datatable-row" *ngIf="display === 'list'">
            <!-- Actions (left) -->
            <div *ngIf="actions && actionsPosition === 'left'" class="actions-column adf-datatable-table-cell-header">
                <span class="sr-only">Actions</span>
            </div>
            <!-- Columns -->
            <div *ngIf="multiselect" class="adf-datatable-table-cell-header">
                <mat-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></mat-checkbox>
            </div>
            <div class="adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-table-cell-header"
                 *ngFor="let col of data.getColumns()"
                 [class.sortable]="col.sortable"
                 [attr.data-automation-id]="'auto_id_' + col.key"
                 [class.adf-data-table__header--sorted-asc]="isColumnSorted(col, 'asc')"
                 [class.adf-data-table__header--sorted-desc]="isColumnSorted(col, 'desc')"
                 (click)="onColumnHeaderClick(col)"
                 (keyup.enter)="onColumnHeaderClick(col)"
                 role="button"
                 tabindex="0"
                 title="{{ col.title | translate }}">
                <span *ngIf="col.srTitle" class="sr-only">{{ col.srTitle | translate }}</span>
                <span *ngIf="col.title">{{ col.title | translate}}</span>
            </div>
            <!-- Actions (right) -->
            <div *ngIf="actions && actionsPosition === 'right'" class="actions-column adf-datatable-table-cell-header">
                <span class="sr-only">Actions</span>
            </div>
        </div>
        <mat-form-field *ngIf="display === 'gallery'">
            <mat-select [value]="getSortingKey()">
                <mat-option *ngFor="let col of getSortableColumns()"
                            [value]="col.key"
                            (click)="onColumnHeaderClick(col)"
                            (keyup.enter)="onColumnHeaderClick(col)">
                    {{ col.title | translate}}
                </mat-option>
            </mat-select>
        </mat-form-field>

    </div>

    <div class="adf-datatable-body">
        <ng-container *ngIf="!loading && !noPermission">
            <div *ngFor="let row of data.getRows(); let idx = index"
                 class="adf-datatable-row"
                 role="button"
                 [class.is-selected]="row.isSelected"
                 [adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
                 [ngStyle]="rowStyle"
                 [ngClass]="getRowStyle(row)"
                 (keyup)="onRowKeyUp(row, $event)">

                <!-- Actions (left) -->
                <div *ngIf="actions && actionsPosition === 'left'" class="adf-datatable-table-cell">
                    <button mat-icon-button [matMenuTriggerFor]="menu"
                            [attr.id]="'action_menu_left_' + idx"
                            [attr.data-automation-id]="'action_menu_' + idx">
                        <mat-icon>more_vert</mat-icon>
                    </button>
                    <mat-menu #menu="matMenu">
                        <button mat-menu-item *ngFor="let action of getRowActions(row)"
                                [attr.data-automation-id]="action.title"
                                [disabled]="action.disabled"
                                (click)="onExecuteRowAction(row, action)">
                            <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
                            <span>{{ action.title | translate }}</span>
                        </button>
                    </mat-menu>
                </div>

                <div *ngIf="multiselect" class="adf-datatable-table-cell adf-datatable-table-checkbox">
                    <mat-checkbox
                        [checked]="row.isSelected"
                        (change)="onCheckboxChange(row, $event)">
                    </mat-checkbox>
                </div>
                <div *ngFor="let col of data.getColumns()"
                     class="adf-data-table-cell adf-datatable-table-cell adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
                     [attr.title]="col.title | translate"
                     [attr.filename]="getFilename(row)"
                     tabindex="0"
                     (click)="onRowClick(row, $event)"
                     [context-menu]="getContextMenuActions(row, col)"
                     [context-menu-enabled]="contextMenu">
                    <div *ngIf="!col.template" class="cell-container">
                        <ng-container [ngSwitch]="col.type">
                            <div *ngSwitchCase="'image'" class="cell-value">
                                <mat-icon *ngIf="isIconValue(row, col)">{{ asIconValue(row, col) }}</mat-icon>
                                <mat-icon class="adf-datatable-selected"
                                          *ngIf="!isIconValue(row, col) && row.isSelected" svgIcon="selected">
                                </mat-icon>

                                <img *ngIf="!isIconValue(row, col) && !row.isSelected"
                                     alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
                                     src="{{ data.getValue(row, col) }}"
                                     (error)="onImageLoadingError($event)">
                            </div>
                            <div *ngSwitchCase="'icon'" class="cell-value">
                                <span class="sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span>
                                <mat-icon>{{ data.getValue(row, col) }}</mat-icon>
                            </div>
                            <div *ngSwitchCase="'date'" class="cell-value"
                                 [attr.data-automation-id]="'date_' + data.getValue(row, col)">
                                <adf-date-cell
                                    [data]="data"
                                    [column]="col"
                                    [row]="row"
                                    [tooltip]="getCellTooltip(row, col)">
                                </adf-date-cell>
                            </div>
                            <div *ngSwitchCase="'location'" class="cell-value"
                                 [attr.data-automation-id]="'location' + data.getValue(row, col)">
                                <adf-location-cell
                                    [data]="data"
                                    [column]="col"
                                    [row]="row"
                                    [tooltip]="getCellTooltip(row, col)">
                                </adf-location-cell>
                            </div>
                            <div *ngSwitchCase="'fileSize'" class="cell-value"
                                 [attr.data-automation-id]="'fileSize_' + data.getValue(row, col)">
                                <adf-filesize-cell
                                    [data]="data"
                                    [column]="col"
                                    [row]="row"
                                    [tooltip]="getCellTooltip(row, col)">
                                </adf-filesize-cell>
                            </div>
                            <div *ngSwitchCase="'text'" class="cell-value"
                                 [attr.data-automation-id]="'text_' + data.getValue(row, col)">
                                <adf-datatable-cell
                                    [data]="data"
                                    [column]="col"
                                    [row]="row"
                                    [tooltip]="getCellTooltip(row, col)">
                                </adf-datatable-cell>
                            </div>
                            <span *ngSwitchDefault class="cell-value">
                    <!-- empty cell for unknown column type -->
                    </span>
                        </ng-container>
                    </div>
                    <div *ngIf="col.template" class="cell-container">
                        <ng-container
                            [ngTemplateOutlet]="col.template"
                            [ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
                        </ng-container>
                    </div>
                </div>

                <!-- Actions (right) -->
                <div *ngIf="actions && actionsPosition === 'right'"
                     class="adf-datatable-table-cell alfresco-datatable__actions-cell">
                    <button mat-icon-button [matMenuTriggerFor]="menu"
                            [attr.id]="'action_menu_right_' + idx"
                            [attr.data-automation-id]="'action_menu_' + idx">
                        <mat-icon>more_vert</mat-icon>
                    </button>
                    <mat-menu #menu="matMenu">
                        <button mat-menu-item *ngFor="let action of getRowActions(row)"
                                [attr.data-automation-id]="action.title"
                                [disabled]="action.disabled"
                                (click)="onExecuteRowAction(row, action)">
                            <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
                            <span>{{ action.title | translate }}</span>
                        </button>
                    </mat-menu>
                </div>

            </div>
            <div *ngIf="isEmpty()"
                 [class.adf-datatable-row]="display === 'list'"
                 [class.adf-data-table-card-empty]="display === 'gallery'">
                <div class="adf-no-content-container adf-datatable-table-cell">
                    <ng-template *ngIf="noContentTemplate"
                                 ngFor [ngForOf]="[data]"
                                 [ngForTemplate]="noContentTemplate">
                    </ng-template>
                    <ng-content select="adf-empty-list"></ng-content>
                </div>
            </div>
        </ng-container>
        <div *ngIf="!loading && noPermission"
             [class.adf-datatable-row]="display === 'list'"
             [class.adf-data-table-card-permissions]="display === 'gallery'"
             class="adf-no-permission__row">
            <div class="adf-no-permission__cell adf-no-content-container adf-datatable-table-cell">
                <ng-template *ngIf="noPermissionTemplate"
                             ngFor [ngForOf]="[data]"
                             [ngForTemplate]="noPermissionTemplate">
                </ng-template>
            </div>
        </div>
        <div *ngIf="loading"
             [class.adf-datatable-row]="display === 'list'"
             [class.adf-data-table-card-loading]="display === 'gallery'">
            <div class="adf-datatable-table-cell" >
                <ng-template *ngIf="loadingTemplate"
                             ngFor [ngForOf]="[data]"
                             [ngForTemplate]="loadingTemplate">
                </ng-template>
            </div>
        </div>
    </div>
</div>
