@let previouslyCouldArchive = !(userCanArchive$ | async) && config?.originalCipher?.archivedDate;

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

  @if (!loading) {
    <vault-cipher-form
      formId="cipherForm"
      [config]="config"
      (cipherSaved)="onCipherSaved($event)"
      [beforeSubmit]="checkFido2UserVerification"
      [submitBtn]="submitBtn"
    >
      <app-open-attachments
        slot="attachment-button"
        [cipherId]="originalCipherId"
      ></app-open-attachments>
    </vault-cipher-form>
  }

  <popup-footer slot="footer">
    @if (saveAndFillEnabled) {
      <button [bitAction]="submitAndFill" type="button" bitButton buttonType="primary">
        {{ "saveAndFill" | i18n }}
      </button>
    }
    <button
      bitButton
      type="submit"
      form="cipherForm"
      [buttonType]="saveAndFillEnabled ? 'secondary' : 'primary'"
      #submitBtn
    >
      {{ (previouslyCouldArchive ? "unarchiveAndSave" : "save") | i18n }}
    </button>
    @if (saveAndFillEnabled) {
      <button
        (click)="handleBackButton()"
        bitButton
        type="button"
        buttonType="subtleGhost"
        slot="end"
      >
        {{ "cancel" | i18n }}
      </button>
    } @else {
      <button (click)="handleBackButton()" bitButton type="button" buttonType="secondary">
        {{ "cancel" | i18n }}
      </button>
    }
    @if (canDeleteCipher$ | async) {
      <button
        [bitAction]="delete"
        type="button"
        slot="end"
        buttonType="dangerGhost"
        bitIconButton="bwi-trash"
        [label]="'delete' | i18n"
      ></button>
    }
  </popup-footer>
</popup-page>