<popup-page [loading]="loading$ | async">
  <popup-header slot="header" [pageTitle]="'archiveNoun' | i18n" showBackButton>
    <ng-container slot="end">
      <app-pop-out></app-pop-out>
    </ng-container>
  </popup-header>

  @if (showSubscriptionEndedMessaging$ | async) {
    <bit-card class="tw-mb-4">
      <div class="tw-flex tw-gap-2 tw-items-baseline">
        <i class="bwi bwi-info-circle" aria-hidden="true"></i>
        <h3 class="tw-font-[500]" bitTypography="h5">{{ "premiumSubscriptionEnded" | i18n }}</h3>
      </div>
      <p bitTypography="body2" class="tw-mb-3">
        {{ "archivePremiumRestart" | i18n }}
      </p>
      <button type="button" bitButton (click)="navigateToPremium()" buttonType="primary">
        {{ "restartPremium" | i18n }}
      </button>
    </bit-card>
  }

  @if (archivedCiphers$ | async; as archivedItems) {
    @if (archivedItems.length) {
      <bit-section>
        <bit-section-header>
          <h2 bitTypography="h6">
            {{ "itemsInArchive" | i18n }}
          </h2>
          <span bitTypography="body1" slot="end">{{ archivedItems.length }}</span>
        </bit-section-header>
        <bit-item-group>
          @for (cipher of archivedItems; track cipher.id) {
            <bit-item>
              <button
                bit-item-content
                type="button"
                [appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
                (click)="view(cipher)"
              >
                <div slot="start" class="tw-justify-start tw-w-7 tw-flex">
                  <app-vault-icon [cipher]="cipher"></app-vault-icon>
                </div>
                <span data-testid="item-name">{{ cipher.name }}</span>
                <div slot="default-trailing" class="tw-flex tw-gap-1.5">
                  @if (cipher.organizationId) {
                    <i
                      appOrgIcon
                      [tierType]="orgTierType(cipher)"
                      [size]="'small'"
                      [appA11yTitle]="orgIconTooltip(cipher)"
                    ></i>
                  }
                  @if (CipherViewLikeUtils.hasAttachments(cipher)) {
                    <i
                      slot="default-trailing"
                      class="bwi bwi-paperclip bwi-sm"
                      [appA11yTitle]="'attachments' | i18n"
                    ></i>
                  }
                </div>
                <span slot="secondary">{{ CipherViewLikeUtils.subtitle(cipher) }}</span>
              </button>
              <bit-item-action slot="end">
                <button
                  type="button"
                  bitIconButton="bwi-ellipsis-v"
                  size="small"
                  label="{{ 'options' | i18n }}"
                  [appA11yTitle]="'moreOptionsTitle' | i18n: cipher.name"
                  [bitMenuTriggerFor]="moreOptions"
                ></button>
                <bit-menu #moreOptions>
                  <button type="button" bitMenuItem (click)="edit(cipher)">
                    {{ "edit" | i18n }}
                  </button>
                  @if (userHasPremium$ | async) {
                    <button type="button" bitMenuItem (click)="clone(cipher)">
                      {{ "clone" | i18n }}
                    </button>
                  }
                  @if (canAssignCollections$ | async) {
                    <button
                      type="button"
                      bitMenuItem
                      (click)="conditionallyNavigateToAssignCollections(cipher)"
                    >
                      {{ "assignToCollections" | vfo1I18n: "addToSharedFolder" }}
                    </button>
                  }
                  <button type="button" bitMenuItem (click)="unarchive(cipher)">
                    {{ "unArchive" | i18n }}
                  </button>
                  <button
                    type="button"
                    bitMenuItem
                    variant="danger"
                    *appCanDeleteCipher="cipher"
                    (click)="delete(cipher)"
                  >
                    {{ "delete" | i18n }}
                  </button>
                </bit-menu>
              </bit-item-action>
            </bit-item>
          }
        </bit-item-group>
      </bit-section>
    } @else {
      <bit-no-items class="tw-flex tw-h-full tw-items-center tw-justify-center">
        <ng-container slot="title">
          {{ "noItemsInArchive" | i18n }}
        </ng-container>
        <ng-container slot="description">
          {{ "noItemsInArchiveDesc" | i18n }}
        </ng-container>
      </bit-no-items>
    }
  }
</popup-page>
