<pngx-widget-frame
  *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"
  [title]="savedView.name"
  [badge]="count"
  [loading]="loading"
  [draggable]="savedView"
  >

  @if (documents.length) {
    <a class="btn-link text-decoration-none" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>
  }

  <div content class="wrapper fade" [class.show]="show">
  @if (displayMode === DisplayMode.TABLE) {
    <table class="table table-hover mb-0 mt-n2 align-middle">
      <thead>
        <tr>
          @for (field of displayFields; track field; let i = $index) {
            @if (displayFields.includes(field)) {
              <th
                scope="col"
                [ngClass]="{
                  'd-none d-md-table-cell': i > 1,
                  'w-25': field === DisplayField.CREATED || field === DisplayField.ADDED
                }">
                {{ getColumnTitle(field) }}
              </th>
            }
          }
        </tr>
      </thead>
      <tbody>
        @for (doc of documents; track doc.id; let i = $index) {
          <tr>
            @for (field of displayFields; track field; let j = $index) {
              <td class="py-2 py-md-3 position-relative" [ngClass]="{ 'd-none d-md-table-cell': j > 1 }">
                @if (loading && show) {
                  <div class="placeholder-glow text-start">
                    <span class="placeholder bg-secondary w-50" [ngStyle]="{ opacity: 1 - (i * 1/documents.length) }"></span>
                  </div>
                } @else {
                  @switch (field) {
                    @case (DisplayField.ADDED) {
                      <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3" title="Open document" i18n-title>{{doc.added | customDate}}</a>
                    }
                    @case (DisplayField.CREATED) {
                      <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3" title="Open document" i18n-title>{{doc.created | customDate}}</a>
                    }
                    @case (DisplayField.TITLE) {
                      <a routerLink="/documents/{{doc.id}}" title="Open document" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
                    }
                    @case (DisplayField.CORRESPONDENT) {
                      @if (doc.correspondent) {
                        <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickCorrespondent(doc.correspondent, $event)" title="Filter by correspondent" i18n-title>{{doc.correspondent | correspondentName | async}}</a>
                      }
                    }
                    @case (DisplayField.TAGS) {
                      @for (tagID of doc.tags; track tagID) {
                        <pngx-tag [tagID]="tagID" class="ms-1 fs-6" (click)="clickTag(tagID, $event)" [clickable]="true" linkTitle="Filter by tag" i18n-title></pngx-tag>
                      }
                    }
                    @case (DisplayField.DOCUMENT_TYPE) {
                      @if (doc.document_type) {
                        <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickDocType(doc.document_type, $event)" title="Filter by document type" i18n-title>{{doc.document_type | documentTypeName | async}}</a>
                      }
                    }
                    @case (DisplayField.STORAGE_PATH) {
                      @if (doc.storage_path) {
                        <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickStoragePath(doc.storage_path, $event)" title="Filter by storage path" i18n-title>{{doc.storage_path | storagePathName | async}}</a>
                      }
                    }
                    @case (DisplayField.OWNER) {
                      @if (doc.owner) {
                        <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickOwner(doc.owner, $event)" title="Filter by owner" i18n-title>{{doc.owner | username | async}}</a>
                      }
                    }
                    @case (DisplayField.ASN) {
                      {{doc.archive_serial_number}}
                    }
                    @case (DisplayField.PAGE_COUNT) {
                      {{ doc.page_count }}
                    }
                    @case (DisplayField.SHARED) {
                      @if (doc.is_shared_by_requester) { <ng-container i18n>Yes</ng-container> } @else { <ng-container i18n>No</ng-container> }
                    }
                    @case (DisplayField.NOTES) {
                      @if (doc.notes.length) {
                        <a routerLink="/documents/{{doc.id}}/notes" class="btn btn-sm p-0">
                          <span class="badge rounded-pill bg-light border text-primary">
                            <i-bs width="1.2em" height="1.2em" class="ms-1 me-1" name="chat-left-text"></i-bs>
                          {{doc.notes.length}}</span>
                        </a>
                      }
                    }
                  }
                  @if (field.startsWith(DisplayField.CUSTOM_FIELD)) {
                    <pngx-custom-field-display [document]="doc" [fieldDisplayKey]="field"></pngx-custom-field-display>
                  }
                  @if (j === displayFields.length - 1) {
                    <div class="btn-group position-absolute top-50 end-0 translate-middle-y" (mouseleave)="popupPreview.close()">
                      <pngx-preview-popup [document]="doc" linkClasses="btn px-4 btn-dark border-dark-subtle" #popupPreview>
                        <i-bs width="0.8em" height="0.8em" name="eye"></i-bs>
                      </pngx-preview-popup>
                      <a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()">
                        <i-bs width="0.8em" height="0.8em" name="download"></i-bs>
                      </a>
                    </div>
                  }
                }
              </td>
            }
          </tr>
        }
      </tbody>
    </table>
  } @else if (displayMode === DisplayMode.SMALL_CARDS) {
    <div class="row row-cols-paperless-cards my-n2">
      @for (d of documents; track d.id; let i = $index) {
        <pngx-document-card-small
          class="p-0"
          [ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
          (dblClickDocument)="openDocumentDetail(d)"
          [document]="!loading && show ? d : null"
          [displayFields]="displayFields"
          (clickTag)="clickTag($event)"
          (clickCorrespondent)="clickCorrespondent($event)"
          (clickStoragePath)="clickStoragePath($event)"
          (clickDocumentType)="clickDocumentType($event)">
        </pngx-document-card-small>
      }
    </div>
  } @else if (displayMode === DisplayMode.LARGE_CARDS) {
    <div class="row my-n2">
      @for (d of documents; track d.id; let i = $index) {
        <pngx-document-card-large
          (dblClickDocument)="openDocumentDetail(d)"
          [document]="!loading && show ? d : null"
          [ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
          [displayFields]="displayFields"
          (clickTag)="clickTag($event)"
          (clickCorrespondent)="clickCorrespondent($event)"
          (clickStoragePath)="clickStoragePath($event)"
          (clickDocumentType)="clickDocumentType($event)"
          (clickMoreLike)="clickMoreLike(d.id)">
        </pngx-document-card-large>
      }
    </div>
  } @else {
    <p i18n class="text-center text-muted mb-0 fst-italic">No documents</p>
  }

  </div>
</pngx-widget-frame>
