<popup-page>
  <popup-header slot="header" [pageTitle]="headerText" showBackButton>
    <ng-container slot="end">
      @if (cipher?.isArchived && (archiveFlagEnabled$ | async)) {
        <span bitBadge variant="secondary" [appA11yTitle]="'archived' | i18n">
          {{ "archived" | i18n }}
        </span>
      }
      <app-pop-out />
    </ng-container>
  </popup-header>

  @if (cipher) {
    <app-cipher-view [cipher]="cipher"></app-cipher-view>
  }

  <popup-footer slot="footer" *ngIf="showFooter$ | async">
    @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 ((archiveFlagEnabled$ | async) && 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="danger"
          bitIconButton="bwi-trash"
          [label]="(cipher.isDeleted ? 'deleteForever' : 'delete') | i18n"
        ></button>
      }
    </ng-container>
  </popup-footer>
</popup-page>
