<iqser-page-header
    (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
    [pageLabel]="'audit' | translate"
    [showCloseButton]="currentUser.isUser && permissionsService.has$(roles.dossiers.read) | async"
></iqser-page-header>

<iqser-table
    [emptyColumnWidth]="'2fr'"
    [headerTemplate]="headerTemplate"
    [itemSize]="80"
    [noDataIcon]="'iqser:document'"
    [noDataText]="'audit-screen.no-data.title' | translate"
    [tableColumnConfigs]="tableColumnConfigs"
    [totalSize]="logs?.totalHits || 0"
></iqser-table>

<ng-template #headerTemplate>
    <div class="table-header-actions">
        <redaction-pagination
            (pageChanged)="pageChanged($event)"
            [settings]="{ currentPage: logs?.page || 0, totalPages: totalPages }"
            class="mr-0"
        ></redaction-pagination>

        <div class="separator">·</div>

        <form [formGroup]="form" [attr.help-mode-key]="'audit_filter_audit_entries'">
            <div class="iqser-input-group w-150 mr-20">
                <mat-form-field>
                    <mat-select (selectionChange)="filterChange()" formControlName="category" id="select-category">
                        <mat-option
                            *ngFor="let category of categories"
                            [id]="'select-category-' + category.toLocaleLowerCase()"
                            [value]="category"
                        >
                            {{ (translations[category] | translate) || category }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <div class="iqser-input-group w-150">
                <mat-form-field>
                    <mat-select (selectionChange)="filterChange()" formControlName="userId" id="select-users">
                        <mat-select-trigger>
                            <iqser-initials-avatar
                                *ngIf="form.get('userId').value !== ALL_USERS"
                                [user]="form.get('userId').value"
                                [withName]="true"
                            ></iqser-initials-avatar>

                            <div *ngIf="form.get('userId').value === ALL_USERS" [translate]="ALL_USERS"></div>
                        </mat-select-trigger>

                        <mat-option *ngFor="let userId of userIds" [id]="'select-user-' + userId" [value]="userId">
                            <iqser-initials-avatar *ngIf="userId !== ALL_USERS" [user]="userId" [withName]="true"></iqser-initials-avatar>

                            <div *ngIf="userId === ALL_USERS" [translate]="ALL_USERS"></div>
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <div class="separator">·</div>

            <div class="iqser-input-group datepicker-wrapper mr-20">
                <input
                    (dateChange)="filterChange()"
                    [matDatepicker]="fromPicker"
                    formControlName="from"
                    id="start-date-input"
                    placeholder="dd/mm/yy"
                />
                <mat-datepicker-toggle [for]="fromPicker" matSuffix>
                    <mat-icon matDatepickerToggleIcon svgIcon="iqser:calendar"></mat-icon>
                </mat-datepicker-toggle>
                <mat-datepicker #fromPicker></mat-datepicker>
            </div>

            <div class="mr-20" translate="audit-screen.to"></div>

            <div class="iqser-input-group datepicker-wrapper">
                <input
                    (dateChange)="filterChange()"
                    [matDatepicker]="toPicker"
                    formControlName="to"
                    id="end-date-input"
                    placeholder="dd/mm/yy"
                />
                <mat-datepicker-toggle [for]="toPicker" matSuffix>
                    <mat-icon matDatepickerToggleIcon svgIcon="iqser:calendar"></mat-icon>
                </mat-datepicker-toggle>
                <mat-datepicker #toPicker></mat-datepicker>
            </div>
        </form>
    </div>
</ng-template>

<ng-template #tableItemTemplate let-entity="entity">
    <div *ngIf="cast(entity) as log">
        <div class="cell">
            {{ log.message }}
        </div>

        <div class="cell">
            <span class="small-label">{{ log.recordDate | date: 'd MMM yyyy, hh:mm a' }}</span>
        </div>

        <div class="user-column cell">
            <iqser-initials-avatar [user]="log.userId" [withName]="true"></iqser-initials-avatar>
        </div>

        <div class="cell">{{ (translations[log.category] | translate) || log.category | humanize }}</div>

        <div class="cell">
            <div class="action-buttons">
                <iqser-circle-button
                    (action)="openAuditDetails(log)"
                    [attr.help-mode-key]="'audit_detailed_audit_info'"
                    *ngIf="log.hasDetails"
                    [tooltip]="'audit-screen.action.info' | translate"
                    icon="red:info"
                ></iqser-circle-button>
            </div>
        </div>
    </div>
</ng-template>
