<pngx-page-header [title]="title()" [id]="documentId()">
  @if (archiveContentRenderType === ContentRenderType.PDF && !useNativePdfViewer) {
    @if (previewNumPages()) {
      <div class="input-group input-group-sm ms-2 d-none d-md-flex">
        <div class="input-group-text" i18n>Page</div>
          <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages()" [ngModel]="previewCurrentPage()" (ngModelChange)="previewCurrentPage.set($event)" />
        <div class="input-group-text" i18n>of {{previewNumPages()}}</div>
      </div>
    }
    <div class="input-group input-group-sm me-md-5 d-none d-md-flex">
      <button class="btn btn-outline-secondary" (click)="decreaseZoom()" i18n>-</button>
      <select class="form-select" (change)="setZoom($event.target.value)" [ngModel]="currentZoom">
        @for (setting of zoomSettings; track setting) {
          <option [value]="setting">
            {{ getZoomSettingTitle(setting) }}
          </option>
        }
      </select>
      <button class="btn btn-outline-secondary" (click)="increaseZoom()" i18n>+</button>
    </div>
  }

  <button type="button" class="btn btn-sm btn-outline-danger me-md-4" (click)="delete()" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }" aria-label="Delete" i18n-aria-label>
    <i-bs width="1.2em" height="1.2em" name="trash"></i-bs><span class="d-none d-lg-inline ps-1" i18n>Delete</span>
  </button>

  <pngx-document-version-dropdown
    [documentId]="documentId()"
    [versions]="document()?.versions ?? []"
    [selectedVersionId]="selectedVersionId()"
    [userIsOwner]="userIsOwner"
    [userCanEdit]="userCanEdit"
    (versionSelected)="onVersionSelected($event)"
    (versionsUpdated)="onVersionsUpdated($event)"
  />

  <div class="btn-group">
    <button (click)="download()" class="btn btn-sm btn-outline-primary" [disabled]="downloading()" aria-label="Download" i18n-aria-label>
      @if (downloading()) {
        <div class="spinner-border spinner-border-sm" role="status"></div>
      } @else {
        <i-bs width="1.2em" height="1.2em" name="download"></i-bs>
      }
      <span class="d-none d-lg-inline ps-1" i18n>Download</span>
    </button>

    <div class="btn-group" ngbDropdown role="group">
      <button class="btn btn-sm btn-outline-primary dropdown-toggle" [disabled]="downloading()" ngbDropdownToggle aria-label="Download options" i18n-aria-label></button>
      <div class="dropdown-menu shadow" ngbDropdownMenu>
        @if (metadata()?.has_archive_version) {
          <button ngbDropdownItem (click)="download(true)" [disabled]="downloading()" i18n>Download original</button>
          <div class="dropdown-divider"></div>
        }
        <form class="px-3 py-1">
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="downloadUseFormatting" [(ngModel)]="useFormattedFilename" [ngModelOptions]="{standalone: true}" />
            <label class="form-check-label" for="downloadUseFormatting" i18n>Use formatted filename</label>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="ms-auto" ngbDropdown>
    <button class="btn btn-sm btn-outline-primary" id="actionsDropdown" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
      <i-bs name="three-dots"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Actions</ng-container></div>
    </button>
    <div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
      <button ngbDropdownItem (click)="reprocess()" [disabled]="!userCanEdit || !userIsOwner">
        <i-bs width="1em" height="1em" name="arrow-counterclockwise" class="me-1"></i-bs><span i18n>Reprocess</span>
      </button>

      <button ngbDropdownItem (click)="printDocument()" [hidden]="useNativePdfViewer || isMobile">
        <i-bs width="1em" height="1em" name="printer" class="me-1"></i-bs><span i18n>Print</span>
      </button>

      <button ngbDropdownItem (click)="moreLike()">
        <i-bs width="1em" height="1em" name="diagram-3" class="me-1"></i-bs><span i18n>More like this</span>
      </button>

      <button ngbDropdownItem (click)="editPdf()" [disabled]="!userIsOwner || !userCanEdit || originalContentRenderType !== ContentRenderType.PDF">
        <i-bs name="pencil" class="me-1"></i-bs><ng-container i18n>PDF Editor</ng-container>
      </button>

      @if (userIsOwner && (requiresPassword || password)) {
        <button ngbDropdownItem (click)="removePassword()" [disabled]="!password">
          <i-bs name="unlock" class="me-1"></i-bs><ng-container i18n>Remove Password</ng-container>
        </button>
      }
    </div>
  </div>

  <div class="ms-auto" ngbDropdown>
    <button class="btn btn-sm btn-outline-primary" id="sendDropdown" ngbDropdownToggle aria-label="Send" i18n-aria-label>
      <i-bs name="send"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Send</ng-container></div>
    </button>
    <div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
      <button ngbDropdownItem (click)="openShareLinks()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }">
        <i-bs name="link" class="me-1"></i-bs><span i18n>Share Links</span>
      </button>
      @if (emailEnabled) {
        <button ngbDropdownItem (click)="openEmailDocument()">
          <i-bs name="envelope" class="me-1"></i-bs><span i18n>Email</span>
        </button>
      }
    </div>
  </div>

</pngx-page-header>

<div class="row">
  <div class="col-md-6 col-xl-5 mb-4">

    <form [formGroup]='documentForm' (ngSubmit)="save()">

      <div class="btn-toolbar justify-content-end mb-1 pb-3 gap-2 row-gap-2 border-bottom">
        <div class="btn-group me-auto">
          <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Close" (click)="close()">
            <i-bs width="1.2em" height="1.2em" name="x"></i-bs>
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Previous" (click)="previousDoc()" [disabled]="!hasPrevious()">
            <i-bs width="1.2em" height="1.2em" name="arrow-left"></i-bs>
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary"  i18n-title title="Next" (click)="nextDoc()" [disabled]="!hasNext()">
            <i-bs width="1.2em" height="1.2em" name="arrow-right"></i-bs>
          </button>
        </div>

        <ng-container *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
          <div class="d-flex gap-2">
            <div class="btn-group">
              <pngx-suggestions-dropdown *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }"
                [disabled]="!userCanEdit || suggestionsLoading()"
                [loading]="suggestionsLoading()"
                [suggestions]="suggestions()"
                [aiEnabled]="aiEnabled"
                [appliedTags]="documentForm.value.tags"
                [appliedCorrespondent]="documentForm.value.correspondent"
                [appliedDocumentType]="documentForm.value.document_type"
                [appliedStoragePath]="documentForm.value.storage_path"
                (getSuggestions)="getSuggestions()"
                (addTag)="createTag($event)"
                (addDocumentType)="createDocumentType($event)"
                (addCorrespondent)="createCorrespondent($event)">
              </pngx-suggestions-dropdown>
            </div>

            <div class="btn-group">
              <pngx-custom-fields-dropdown
                *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }"
                [documentId]="documentId()"
                [disabled]="!userCanEdit"
                [existingFields]="document()?.custom_fields"
                (created)="refreshCustomFields()"
                (added)="addField($event)">
              </pngx-custom-fields-dropdown>
            </div>
          </div>

          <div class="ps-3">
            <ng-container *ngTemplateOutlet="saveButtons"></ng-container>
          </div>
        </ng-container>
      </div>

      <ul ngbNav #nav="ngbNav" class="nav-underline flex-nowrap flex-md-wrap overflow-auto" (navChange)="onNavChange($event)" [activeId]="activeNavID()" (activeIdChange)="activeNavID.set($event)">
        <li [ngbNavItem]="DocumentDetailNavIDs.Details">
          <a ngbNavLink i18n>Details</a>
          <ng-template ngbNavContent>
            <div>
              <pngx-input-text #inputTitle i18n-title title="Title" formControlName="title" [horizontal]="true" [suggestion]="suggestions()?.title" (keyup)="titleKeyUp($event)" [error]="error()?.title"></pngx-input-text>
              @if (!isFieldHidden(DocumentDetailFieldID.ArchiveSerialNumber)) {
                <pngx-input-number i18n-title title="Archive serial number" [error]="error()?.archive_serial_number" [horizontal]="true" formControlName='archive_serial_number'></pngx-input-number>
              }
              <pngx-input-date i18n-title title="Date created" formControlName="created" [suggestions]="suggestions()?.dates" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event)"
              [error]="error()?.created"></pngx-input-date>
              @if (!isFieldHidden(DocumentDetailFieldID.Correspondent)) {
                <pngx-input-select [items]="correspondents()" i18n-title title="Correspondent" formControlName="correspondent" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.Correspondent)"
                (createNew)="createCorrespondent($event)" [hideAddButton]="createDisabled(DataType.Correspondent)" [suggestions]="suggestions()?.correspondents" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }"></pngx-input-select>
              }
              @if (!isFieldHidden(DocumentDetailFieldID.DocumentType)) {
                <pngx-input-select [items]="documentTypes()" i18n-title title="Document type" formControlName="document_type" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.DocumentType)"
                (createNew)="createDocumentType($event)" [hideAddButton]="createDisabled(DataType.DocumentType)" [suggestions]="suggestions()?.document_types" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }"></pngx-input-select>
              }
              @if (!isFieldHidden(DocumentDetailFieldID.StoragePath)) {
                <pngx-input-select [items]="storagePaths()" i18n-title title="Storage path" formControlName="storage_path" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.StoragePath)"
                (createNew)="createStoragePath($event)" [hideAddButton]="createDisabled(DataType.StoragePath)" [suggestions]="suggestions()?.storage_paths" i18n-placeholder placeholder="Default" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }"></pngx-input-select>
              }
              @if (!isFieldHidden(DocumentDetailFieldID.Tags)) {
                <pngx-input-tags #tagsInput formControlName="tags" [suggestions]="suggestions()?.tags" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.Tag)" [hideAddButton]="createDisabled(DataType.Tag)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"></pngx-input-tags>
              }
              @for (fieldInstance of document()?.custom_fields; track fieldInstance.field; let i = $index) {
                <div [formGroup]="customFieldFormFields.controls[i]">
                  @switch (getCustomFieldFromInstance(fieldInstance)?.data_type) {
                    @case (CustomFieldDataType.String) {
                      <pngx-input-text formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userCanEdit"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [error]="getCustomFieldError(i)"></pngx-input-text>
                    }
                    @case (CustomFieldDataType.Date) {
                      <pngx-input-date formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userCanEdit"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [error]="getCustomFieldError(i)"></pngx-input-date>
                    }
                    @case (CustomFieldDataType.Integer) {
                      <pngx-input-number formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userCanEdit"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [showAdd]="false"
                      [error]="getCustomFieldError(i)"></pngx-input-number>
                    }
                    @case (CustomFieldDataType.Float) {
                      <pngx-input-number formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userCanEdit"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [showAdd]="false"
                      [step]=".1"
                      [error]="getCustomFieldError(i)"></pngx-input-number>
                    }
                    @case (CustomFieldDataType.Monetary) {
                      <pngx-input-monetary formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [defaultCurrency]="getCustomFieldFromInstance(fieldInstance)?.extra_data?.default_currency"
                      [removable]="userCanEdit"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [error]="getCustomFieldError(i)"></pngx-input-monetary>
                    }
                    @case (CustomFieldDataType.Boolean) {
                      <pngx-input-check formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userCanEdit"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"></pngx-input-check>
                    }
                    @case (CustomFieldDataType.Url) {
                      <pngx-input-url formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userCanEdit"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [error]="getCustomFieldError(i)"></pngx-input-url>
                    }
                    @case (CustomFieldDataType.DocumentLink) {
                      <pngx-input-document-link formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [parentDocumentID]="documentId()"
                      [removable]="userCanEdit"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [error]="getCustomFieldError(i)"></pngx-input-document-link>
                    }
                    @case (CustomFieldDataType.Select) {
                      <pngx-input-select formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [items]="getCustomFieldFromInstance(fieldInstance)?.extra_data.select_options"
                      bindLabel="label"
                      [allowNull]="true"
                      [horizontal]="true"
                      [removable]="userCanEdit"
                      (removed)="removeField(fieldInstance)"
                      [error]="getCustomFieldError(i)"></pngx-input-select>
                    }
                    @case (CustomFieldDataType.LongText) {
                      <pngx-input-textarea formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userCanEdit"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [error]="getCustomFieldError(i)"></pngx-input-textarea>
                    }
                  }
                </div>
              }
            </div>

            <div class="d-flex justify-content-end border-top pt-3">
              <ng-container *ngTemplateOutlet="saveButtons"></ng-container>
            </div>
          </ng-template>
        </li>

        <li [ngbNavItem]="DocumentDetailNavIDs.Content">
          <a ngbNavLink i18n>Content</a>
          <ng-template ngbNavContent>
            <div>
              <textarea class="form-control" id="content" rows="20" formControlName='content' [class.rtl]="isRTL"></textarea>
            </div>
          </ng-template>
        </li>

        <li [ngbNavItem]="DocumentDetailNavIDs.Metadata">
          <a ngbNavLink i18n>Metadata</a>
          <ng-template ngbNavContent>

            @if (document()) {
              <table class="table table-borderless">
                <tbody>
                  <tr>
                    <td i18n>Date modified</td>
                    <td>{{document().modified | customDate}}</td>
                  </tr>
                  <tr>
                    <td i18n>Date added</td>
                    <td>{{document().added | customDate}}</td>
                  </tr>
                  <tr>
                    <td i18n>Media filename</td>
                    <td>{{metadata()?.media_filename}}</td>
                  </tr>
                  <tr>
                    <td i18n>Original filename</td>
                    <td>{{metadata()?.original_filename}}</td>
                  </tr>
                  <tr>
                    <td i18n>Original SHA256 checksum</td>
                    <td>{{metadata()?.original_checksum}}</td>
                  </tr>
                  <tr>
                    <td i18n>Original file size</td>
                    <td>{{metadata()?.original_size | fileSize}}</td>
                  </tr>
                  <tr>
                    <td i18n>Original mime type</td>
                    <td>{{metadata()?.original_mime_type}}</td>
                  </tr>
                  @if (metadata()?.has_archive_version) {
                    <tr>
                      <td i18n>Archive SHA256 checksum</td>
                      <td>{{metadata()?.archive_checksum}}</td>
                    </tr>
                  }
                  @if (metadata()?.has_archive_version) {
                    <tr>
                      <td i18n>Archive file size</td>
                      <td>{{metadata()?.archive_size | fileSize}}</td>
                    </tr>
                  }
                </tbody>
              </table>
            }

            @if (metadata()?.original_metadata?.length > 0) {
              <pngx-metadata-collapse i18n-title title="Original document metadata" [metadata]="metadata()?.original_metadata"></pngx-metadata-collapse>
            }
            @if (metadata()?.archive_metadata?.length > 0) {
              <pngx-metadata-collapse i18n-title title="Archived document metadata" [metadata]="metadata()?.archive_metadata"></pngx-metadata-collapse>
            }

          </ng-template>
        </li>

        <li [ngbNavItem]="DocumentDetailNavIDs.Preview" class="d-md-none">
          <a ngbNavLink i18n>Preview</a>
          @if (!pdfPreview.offsetParent) {
            <ng-template ngbNavContent>
              <div class="position-relative">
                <ng-container *ngTemplateOutlet="previewContent"></ng-container>
              </div>
            </ng-template>
          }
        </li>

        @if (notesEnabled) {
          <li [ngbNavItem]="DocumentDetailNavIDs.Notes">
            <a class="text-nowrap" ngbNavLink i18n>Notes @if (document()?.notes.length) {
              <span class="badge text-bg-secondary ms-1">{{document().notes.length}}</span>
            }</a>
            <ng-template ngbNavContent>
              <pngx-document-notes [documentId]="documentId()" [notes]="document()?.notes" [addDisabled]="!userCanEdit" (updated)="notesUpdated($event)"></pngx-document-notes>
            </ng-template>
          </li>
        }

        @if (historyEnabled) {
          <li [ngbNavItem]="DocumentDetailNavIDs.History">
            <a ngbNavLink i18n>History</a>
            <ng-template ngbNavContent>
              <div class="mb-3">
                <pngx-document-history [documentId]="documentId()"></pngx-document-history>
              </div>
            </ng-template>
          </li>
        }

        @if (showPermissions) {
          <li [ngbNavItem]="DocumentDetailNavIDs.Permissions">
            <a ngbNavLink i18n>Permissions</a>
            <ng-template ngbNavContent>
              <div class="mb-3">
                <pngx-permissions-form [users]="users()" formControlName="permissions_form"></pngx-permissions-form>
              </div>
            </ng-template>
          </li>
        }

        @if (document()?.duplicate_documents?.length) {
          <li [ngbNavItem]="DocumentDetailNavIDs.Duplicates">
            <a class="text-nowrap" ngbNavLink i18n>
              Duplicates
              <span class="badge text-bg-secondary ms-1">{{ document().duplicate_documents.length }}</span>
            </a>
            <ng-template ngbNavContent>
              <div class="d-flex flex-column gap-2">
                <div class="fst-italic" i18n>Duplicate documents detected:</div>
                <div class="list-group">
                  @for (duplicate of document()?.duplicate_documents; track duplicate.id) {
                    <a
                      class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                      [routerLink]="['/documents', duplicate.id, 'details']"
                      [class.disabled]="duplicate.deleted_at"
                    >
                      <span class="d-flex align-items-center gap-2">
                        <span>{{ duplicate.title || ('#' + duplicate.id) }}</span>
                        @if (duplicate.deleted_at) {
                          <span class="badge text-bg-secondary" i18n>In trash</span>
                        }
                      </span>
                      <span class="text-secondary">#{{ duplicate.id }}</span>
                    </a>
                  }
                </div>
              </div>
            </ng-template>
          </li>
        }
      </ul>

      <div [ngbNavOutlet]="nav" class="mt-3"></div>

    </form>
  </div>

  <div class="col-md-6 col-xl-7 mb-3 d-none d-md-block position-relative" #pdfPreview>
    <ng-container *ngTemplateOutlet="previewContent"></ng-container>
  </div>

</div>

<ng-template #saveButtons>
  <div class="btn-group">
    <ng-container *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
      <button type="submit" class="order-3 btn btn-sm btn-primary" i18n [disabled]="!userCanEdit || networkActive() || (isDirty$ | async) !== true">Save</button>
      @if (hasNext()) {
        <button type="button" class="order-1 btn btn-sm btn-outline-primary" (click)="saveEditNext()" i18n [disabled]="!userCanEdit || networkActive() || (isDirty$ | async) !== true">Save &amp; next</button>
      } @else {
        <button type="button" class="order-2 btn btn-sm btn-outline-primary" (click)="save(true)" i18n [disabled]="!userCanEdit || networkActive() || (isDirty$ | async) !== true">Save &amp; close</button>
      }
      <button type="button" class="order-0 btn btn-sm btn-outline-secondary" (click)="discard()" i18n [disabled]="!userCanEdit || networkActive() || (isDirty$ | async) !== true">Discard</button>
    </ng-container>
  </div>
</ng-template>

<ng-template #previewContent>
  <div class="thumb-preview position-absolute pe-none text-center" [class.fade]="previewLoaded()">
    @if (showThumbnailOverlay) {
      <img [src]="thumbUrl()" class="mx-auto" [attr.width]="previewZoomScale() === 'page-fit' ? 'auto' : '100%'" [attr.height]="previewZoomScale() === 'page-fit' ? '100%' : 'auto'" alt="Document loading..." i18n-alt />
    }
    <div class="position-absolute top-0 start-0 m-2 p-2 d-flex align-items-center justify-content-center">
      <div>
        <div class="spinner-border spinner-border-sm me-2" role="status"></div>
        <ng-container i18n>Loading...</ng-container>
      </div>
    </div>
  </div>
  @if (document()) {
    @switch (archiveContentRenderType) {
      @case (ContentRenderType.PDF) {
        @if (!useNativePdfViewer) {
          <div class="preview-sticky pdf-viewer-container">
            <pngx-pdf-viewer
              [src]="pdfSource()"
              [sourceRevision]="previewRevision()"
              [password]="pdfPassword()"
              [renderMode]="PdfRenderMode.All"
              [page]="previewCurrentPage()" (pageChange)="previewCurrentPage.set($event)"
              [zoomScale]="previewZoomScale()"
              [zoom]="previewZoomSetting()"
              (loadError)="onError($event)"
              (afterLoadComplete)="pdfPreviewLoaded($event)">
            </pngx-pdf-viewer>
          </div>
        } @else {
          <object [data]="previewUrl() | safeUrl" class="preview-sticky" width="100%"></object>
        }
      }
      @case (ContentRenderType.Text) {
        <div class="preview-sticky bg-light p-3 overflow-auto whitespace-preserve" width="100%">{{previewText()}}</div>
      }
      @case (ContentRenderType.Image) {
        <div class="preview-sticky">
          <img [src]="previewUrl()" width="100%" height="100%" alt="{{title()}}" />
        </div>
      }
      @case (ContentRenderType.TIFF) {
        @if (!tiffError()) {
          <div class="preview-sticky">
            <img [src]="tiffURL()" width="100%" height="100%" alt="{{title()}}" />
          </div>
        } @else {
          <div class="preview-sticky bg-light p-3 overflow-auto whitespace-preserve" width="100%">{{tiffError()}}</div>
        }
      }
      @case (ContentRenderType.Other) {
        <object [data]="previewUrl() | safeUrl" class="preview-sticky" width="100%"></object>
      }
    }
    @if (requiresPassword) {
      <div class="password-prompt">
        <form>
          <input autocomplete="" autofocus="true" class="form-control" i18n-placeholder placeholder="Enter Password" type="password" (keyup)="onPasswordKeyUp($event)" />
        </form>
      </div>
    }
  }
</ng-template>
