@let state = document();
@if (active()) {
  <xp-file-viewer
    class="block h-full min-h-0"
    [surface]="surface()"
    [file]="state.activeFile()"
    [filePath]="state.activeFilePath()"
    [content]="state.draftContent()"
    [loading]="state.fileLoading() || state.draftLoading()"
    [saving]="state.saving()"
    [readable]="state.fileReadable()"
    [editable]="state.isActiveFileEditable()"
    [markdown]="state.isMarkdownFile()"
    [docx]="state.isDocxFile()"
    [pptx]="state.isPptxFile()"
    [documentBuffer]="state.documentBuffer()"
    [spreadsheet]="state.isSpreadsheetFile()"
    [dirty]="state.dirty()"
    [downloadable]="state.canDownloadActiveFile()"
    [referenceable]="state.referenceable()"
    [previewUrl]="state.activePreviewUrl()"
    [sideMenuToggleVisible]="sideMenuToggleVisible()"
    [backVisible]="backVisible()"
    [sideMenuVisible]="sideMenuVisible()"
    [mode]="state.panelMode()"
    [readOnlyHint]="
      'XP.Files.ReadOnlyFileHint'
        | translate
          : {
              Default:
                'This file is shown in read-only mode. Only markdown, code, and selected text formats can be edited.'
            }
    "
    [unsupportedPreviewTitle]="
      'XP.Files.BinaryPreviewUnsupported'
        | translate
          : {
              Default: 'This file cannot be previewed here.'
            }
    "
    [unsupportedPreviewHint]="
      'XP.Files.BinaryPreviewHint'
        | translate
          : {
              Default:
                'This file is not a text-based format. Download it to inspect the original contents in another app.'
            }
    "
    (modeChange)="state.switchPanelMode($event)"
    (contentChange)="state.changeContent($event)"
    (documentDirtyChange)="state.changeBinary($event)"
    (documentSave)="state.saveActiveFile($event)"
    (documentError)="state.handleDocumentError($event)"
    (spreadsheetDirtyChange)="state.changeBinary($event)"
    (pptxDirtyChange)="state.changeBinary($event)"
    (pptxError)="state.handleDocumentError($event)"
    (discard)="state.discardActiveFileChanges()"
    (save)="state.saveActiveFile()"
    (refresh)="state.refreshActiveFile()"
    (download)="state.downloadActiveFile()"
    (referenceFile)="state.referenceActiveFile()"
    (referenceElement)="state.referenceFileElement($event)"
    (referenceSelection)="state.referenceSelectedRange($event)"
    (sideMenuToggle)="sideMenuToggle.emit()"
    (back)="back.emit()"
  />
}

<ng-template #unsavedChangesDialog>
  @let state = document();
  <div xpDialogLayout="standard" xpDialogPurpose="workflow" class="w-[480px] max-w-full max-h-[85dvh]">
    <header xpDialogHeader>
      <h2 xpDialogHeading>
        {{ 'XP.Files.UnsavedChangesTitle' | translate: { Default: 'Unsaved changes' } }}
      </h2>
      <p xpDialogDescription>
        {{
          'XP.Files.UnsavedChangesInfo'
            | translate
              : {
                  Default:
                    'You have unsaved edits in the current file. Save them before switching, or discard the pending changes.'
                }
        }}
      </p>
      <button
        type="button"
        z-button
        zType="ghost"
        zSize="icon"
        xpDialogCloseButton
        [zDisabled]="state.saving()"
        [attr.aria-label]="'XP.ACTIONS.Close' | translate: { Default: 'Close' }"
        (click)="state.resolveDirtyDialog('cancel')"
      >
        <z-icon zType="x" />
      </button>
    </header>
    <footer xpDialogFooter>
      <button
        z-button
        zType="outline"
        type="button"
        [zDisabled]="state.saving()"
        (click)="state.resolveDirtyDialog('cancel')"
      >
        {{ 'COMPONENTS.COMMON.CANCEL' | translate: { Default: 'Cancel' } }}
      </button>
      <button
        z-button
        zType="outline"
        type="button"
        [zDisabled]="state.saving()"
        (click)="state.resolveDirtyDialog('discard')"
      >
        {{ 'XP.Files.Discard' | translate: { Default: 'Discard' } }}
      </button>
      <button
        z-button
        zType="default"
        [zLoading]="state.saving()"
        type="button"
        [zDisabled]="state.saving()"
        (click)="state.resolveDirtyDialog('save')"
      >
        {{ 'XP.ACTIONS.Save' | translate: { Default: 'Save' } }}
      </button>
    </footer>
  </div>
</ng-template>