<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">{{ "EXPIRED_DOCUMENTS" | translate }}
              <app-page-help-text code="EXPIRED_DOCUMENTS"></app-page-help-text>
            </span>
          </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="grid-height-medium">
                <div class="table-responsive">
                  <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="[
                            'EXPIRED_DOCUMENTS_ACTIVATE_DOCUMENT',
                            'EXPIRED_DOCUMENTS_ARCHIVE_DOCUMENT'
                          ]">
                          <mat-icon>more_vert</mat-icon>
                        </button>
                        <mat-menu #menu="matMenu">
                          <button *hasClaim="'EXPIRED_DOCUMENTS_ACTIVATE_DOCUMENT'" class="btn btn-light btn-sm"
                            mat-menu-item type="button" (click)="activeDocument(document.id)">
                            <mat-icon>history</mat-icon>
                            {{ "ACTIVATE_DOCUMENT" | translate }}
                          </button>
                          <button *hasClaim="'EXPIRED_DOCUMENTS_ARCHIVE_DOCUMENT'" mat-menu-item
                            class="btn btn-light btn-sm" (click)="archiveDocument(document)">
                            <mat-icon>delete</mat-icon>
                            {{ "ARCHIVE" | 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="expiredDate">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header>
                        {{ "EXPIRED_DATE" | translate }}
                      </th>
                      <td mat-cell *matCellDef="let document">
                        {{
                        document?.expiredDate | utcToLocalTime : "shortDate"
                        }}
                      </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>
</section>