<popup-page>
  <popup-header slot="header" [pageTitle]="headerText" showBackButton>
    <ng-container slot="end">
      @if (cipher?.isArchived) {
        <button type="button" bit-chip-action [label]="'archived' | i18n"></button>
      }
      <app-pop-out />
    </ng-container>
  </popup-header>

  @if (cipher) {
    <app-cipher-view [cipher]="cipher">
      @if (showAutofillButton()) {
        <button
          type="button"
          class="tw-mt-4"
          slot="button"
          bitButton
          buttonType="primary"
          block
          (click)="doAutofill()"
        >
          {{ "autofillVerb" | i18n }}
        </button>
      }
    </app-cipher-view>
  }

  @if (showFooter$ | async) {
    <popup-footer slot="footer">
      @if (!cipher.isDeleted) {
        <button buttonType="primary" type="button" bitButton (click)="editCipher()">
          {{ "edit" | i18n }}
        </button>
      }
      @if (cipher.isDeleted && cipher.permissions.restore) {
        <button buttonType="primary" type="button" bitButton [bitAction]="restore">
          {{ "restore" | i18n }}
        </button>
      }
      <ng-container slot="end">
        @if (cipher.isArchived && !cipher.isDeleted) {
          <button
            type="button"
            [bitAction]="unarchive"
            bitIconButton="bwi-unarchive"
            [label]="'unarchive' | i18n"
          ></button>
        }
        @if ((userCanArchive$ | async) && cipher.canBeArchived) {
          <button
            type="button"
            [bitAction]="archive"
            bitIconButton="bwi-archive"
            [label]="'archiveVerb' | i18n"
          ></button>
        }
        @if (canDeleteCipher$ | async) {
          <button
            [bitAction]="delete"
            type="button"
            buttonType="dangerGhost"
            bitIconButton="bwi-trash"
            [label]="(cipher.isDeleted ? 'deleteForever' : 'delete') | i18n"
          ></button>
        }
      </ng-container>
    </popup-footer>
  }
</popup-page>
