<section class="content">
    <div class="content-block">
        <div class="block-header">
            <div class="breadcrumb-main">
                <div class="row align-items-center">
                    <div class="col">
                        <span class="page-title">{{ "ARCHIVED_DOCUMENTS" | translate }}
                            <app-page-help-text code="ARCHIVED_DOCUMENTS"></app-page-help-text>
                        </span>
                    </div>
                    <div class="col-auto">
                        <ul class="breadcrumb-list">
                            <li class="breadcrumb-item bcrumb-1">
                                <button *hasClaim="'ARCHIVE_DOCUMENT_SET_RETENTION_PERIOD'"
                                    class="btn btn-primary btn-sm me-2" (click)="onArchiveDocument()">
                                    <i-feather name="settings" class="small-icon me-1"></i-feather>
                                    <span>{{ "SETTINGS" | translate }}</span>
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                <div class="card">
                    <div class="body">
                        <div class="row margin-2">
                            <div class="col-md-3">
                                <input class="form-control"
                                    placeholder="{{'SEARCH_DOCUMENT_BY_NAME_OR_DESCRIPTION' | translate}}" type="text"
                                    #input>
                            </div>
                            <div class="col-md-3">
                                <input class="form-control" placeholder="{{'SEARCH_DOCUMENT_BY_META_TAGS' | translate}}"
                                    #metatag>
                            </div>
                            <div class="col-md-3">
                                <ng-select placeholder="{{'SELECT_CATEGORY' | translate}}"
                                    (change)="onCategoryChange($event)">
                                    <ng-option *ngFor="let category of categoryStore.categories()"
                                        [value]="category.id">
                                        <div class="country-item"
                                            [ngStyle]="this.direction === 'rtl'? {'margin-right.px': category.deafLevel* 20} : {'margin-left.px': category.deafLevel* 20}">
                                            <div *ngIf="!category.parentId">
                                                <b> {{category.name}}</b>
                                            </div>
                                            <div *ngIf="category.parentId">
                                                {{category.name}}
                                            </div>
                                        </div>
                                    </ng-option>
                                </ng-select>
                            </div>
                            <div class="col-md-3">
                                <ng-select (change)="onStorageChange($event)" placeholder="{{'STORAGE' | translate}}">
                                    <ng-option [value]="">-- {{'NONE' | translate}} --</ng-option>
                                    <ng-option [value]="'local'">{{'LOCAL' | translate}}</ng-option>
                                    <ng-option [value]="'s3'">{{'S3' | translate}}</ng-option>
                                </ng-select>
                            </div>
                            <div class="col-md-3">
                                <ng-select (change)="onDocumentStatusChange($event)"
                                    placeholder="{{'SELECT_STATUS' | translate}}">
                                    <ng-option *ngFor="let documentStatus of documentStatusStore.statusList()"
                                        [value]="documentStatus.id">
                                        <span [ngStyle]="{'color': documentStatus?.colorCode}"> {{
                                            documentStatus.name }} </span>
                                    </ng-option>
                                </ng-select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="table-responsive">
                                    <div class="grid-height-small">
                                        <table mat-table [dataSource]="dataSource" class="w-100" matSort
                                            matSortActive="deletedAt" matSortDirection="desc" matSortDisableClear>
                                            <ng-container matColumnDef="action">
                                                <th mat-header-cell *matHeaderCellDef>{{'ACTION' | translate}} </th>
                                                <td mat-cell *matCellDef="let document">
                                                    <button mat-icon-button [matMenuTriggerFor]="menu"
                                                        aria-label="Action"
                                                        *hasClaim="['ARCHIVE_DOCUMENT_RESTORE_DOCUMENT','ARCHIVE_DOCUMENT_DELETE_DOCUMENTS']">
                                                        <mat-icon>more_vert</mat-icon>
                                                    </button>
                                                    <mat-menu #menu="matMenu">
                                                        <button *hasClaim="'ARCHIVE_DOCUMENT_RESTORE_DOCUMENT'"
                                                            class="btn btn-light btn-sm" mat-menu-item type="button"
                                                            (click)="restoreDocument(document.id)">
                                                            <mat-icon>history</mat-icon>
                                                            {{'RESTORE' | translate}}
                                                        </button>
                                                        <button *hasClaim="'ARCHIVE_DOCUMENT_DELETE_DOCUMENTS'"
                                                            mat-menu-item class="btn btn-light btn-sm"
                                                            (click)="deleteDocument(document.id)">
                                                            <mat-icon>delete</mat-icon>
                                                            {{'PERMANENTLY_DELETE' | translate}}
                                                        </button>
                                                    </mat-menu>
                                                </td>
                                            </ng-container>
                                            <ng-container matColumnDef="name">
                                                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'NAME' |
                                                    translate}} </th>
                                                <td mat-cell *matCellDef="let document">
                                                    <a class="doc-link"
                                                        (click)="onDocumentView(document)">{{document.name}}</a>
                                                </td>
                                            </ng-container>
                                            <ng-container matColumnDef="categoryName">
                                                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                                    {{'DOCUMENT_CATEGORY' | translate}}
                                                </th>
                                                <td mat-cell *matCellDef="let document"> {{document.categoryName}} </td>
                                            </ng-container>
                                            <ng-container matColumnDef="location">
                                                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'STORAGE' |
                                                    translate}}</th>
                                                <td mat-cell *matCellDef="let document">
                                                    {{document?.location?.toUpperCase() | translate}}
                                                </td>
                                            </ng-container>
                                            <ng-container matColumnDef="statusName">
                                                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                                    {{'STATUS' | translate}}
                                                </th>
                                                <td mat-cell *matCellDef="let document">
                                                    <span [ngStyle]="{'color': document?.colorCode}">
                                                        {{document?.statusName | translate}}
                                                    </span>
                                                </td>
                                            </ng-container>
                                            <ng-container matColumnDef="deletedAt">
                                                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                                    {{'ARCHIVED_DATE' | translate}}
                                                </th>
                                                <td mat-cell *matCellDef="let document">
                                                    {{document?.deletedAt | utcToLocalTime:'shortDate' }}
                                                </td>
                                            </ng-container>
                                            <ng-container matColumnDef="deletedBy">
                                                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                                    {{'ARCHIVED_BY' | translate}}
                                                </th>
                                                <td mat-cell *matCellDef="let document">
                                                    {{document.deletedByName}}
                                                </td>
                                            </ng-container>
                                            <ng-container matColumnDef="footer">
                                                <td mat-footer-cell colspan="7" *matFooterCellDef>
                                                    <mat-paginator [length]="documentResource.totalCount"
                                                        [pageSize]="documentResource.pageSize"
                                                        [pageSizeOptions]="[10, 20, 30]">
                                                    </mat-paginator>
                                                </td>
                                            </ng-container>
                                            <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
                                            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                                            <tr mat-footer-row *matFooterRowDef="footerToDisplayed;sticky: true"></tr>
                                            <tr *matNoDataRow>
                                                <td colspan="7">
                                                    <div class="m-2">
                                                        <b> {{'NO_DATA_FOUND' | translate}}</b>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>