<app-widget-frame [title]="savedView.name" [loading]="loading">

  <a class="btn-link" header-buttons [routerLink]="[]" (click)="showAll()" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" i18n>Show all</a>


  <table content class="table table-sm table-hover table-borderless mb-0">
    <thead>
      <tr>
        <th scope="col" i18n>Created</th>
        <th scope="col" i18n>Title</th>
      </tr>
    </thead>
    <tbody *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
      <tr *ngFor="let doc of documents" (mouseleave)="mouseLeaveCard()">
        <td><a routerLink="/documents/{{doc.id}}" class="d-block text-dark text-decoration-none">{{doc.created_date | customDate}}</a></td>
        <td class="position-relative">
          <a routerLink="/documents/{{doc.id}}" title="Edit" i18n-title class="d-block text-dark text-decoration-none">{{doc.title | documentTitle}}<app-tag [tag]="t" *ngFor="let t of doc.tags$ | async" class="ms-1" (click)="clickTag(t, $event)"></app-tag></a>
          <div class="btn-group position-absolute top-50 end-0 translate-middle-y">
            <a [href]="getPreviewUrl(doc)" title="View Preview" i18n-title target="_blank" class="btn btn-sm px-4 py-0 btn-dark border-dark-subtle"
            [ngbPopover]="previewContent" [popoverTitle]="doc.title | documentTitle"
            autoClose="true" popoverClass="shadow popover-preview" container="body" (mouseenter)="mouseEnterPreview(doc)" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
              <svg class="buttonicon-xs" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#eye"/>
              </svg>
            </a>
            <ng-template #previewContent>
              <object [data]="getPreviewUrl(doc) | safeUrl" class="preview" width="100%"></object>
            </ng-template>
            <a [href]="getDownloadUrl(doc)" class="btn btn-sm px-4 py-0 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()">
              <svg class="buttonicon-xs" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#download"/>
              </svg>
            </a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

</app-widget-frame>