<aca-page-layout>
  <aca-page-layout-header>
    <adf-breadcrumb root="APP.BROWSE.TRASHCAN.TITLE"> </adf-breadcrumb>

    <adf-toolbar class="adf-toolbar--inline">
      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
        <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
      </ng-container>
    </adf-toolbar>
  </aca-page-layout-header>

  <aca-page-layout-content>
    <div class="main-content">
      <adf-document-list
        #documentList
        acaDocumentList
        acaContextActions
        [display]="documentDisplayMode$ | async"
        currentFolderId="-trashcan-"
        selectionMode="multiple"
        [navigate]="false"
        sortingMode="client"
        [imageResolver]="imageResolver"
        [sorting]="['archivedAt', 'desc']"
      >
        <adf-custom-empty-content-template>
          <adf-empty-content icon="delete" [title]="'APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE'">
            <p class="adf-empty-content__text">
              {{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}
            </p>
            <p class="adf-empty-content__text">
              {{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}
            </p>
          </adf-empty-content>
        </adf-custom-empty-content-template>

        <data-columns>
          <ng-container *ngFor="let column of columns; trackBy: trackById">
            <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
              <data-column
                [key]="column.key"
                [title]="column.title"
                [type]="column.type"
                [format]="column.format"
                [class]="column.class"
                [sortable]="column.sortable"
              >
                <ng-template let-context>
                  <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
                </ng-template>
              </data-column>
            </ng-container>

            <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
              <data-column
                [key]="column.key"
                [title]="column.title"
                [type]="column.type"
                [format]="column.format"
                [class]="column.class"
                [sortable]="column.sortable"
              >
              </data-column>
            </ng-container>
          </ng-container>

          <data-column
            *ngIf="!isSmallScreen && (user$ | async)?.isAdmin"
            class="adf-ellipsis-cell"
            key="archivedByUser.displayName"
            title="APP.DOCUMENT_LIST.COLUMNS.DELETED_BY"
          >
          </data-column>
        </data-columns>
      </adf-document-list>

      <adf-pagination acaPagination [target]="documentList"> </adf-pagination>
    </div>
  </aca-page-layout-content>
</aca-page-layout>
