@if (ciphers?.length) {
  <bit-section>
    <bit-section-header>
      <h2 bitTypography="h6">
        {{ headerText }}
      </h2>
      <span bitTypography="body1" slot="end">{{ ciphers.length }}</span>
    </bit-section-header>
    <bit-item-group>
      @for (cipher of ciphers; track cipher.id) {
        <bit-item>
          <button
            bit-item-content
            type="button"
            [appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
            (click)="onViewCipher(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>
            @if (cipher.organizationId) {
              <i
                appOrgIcon
                [tierType]="cipher.organization.productTierType"
                [size]="'small'"
                [appA11yTitle]="orgIconTooltip(cipher)"
              ></i>
            }
            @if (hasAttachments(cipher)) {
              <i class="bwi bwi-paperclip bwi-sm" [appA11yTitle]="'attachments' | i18n"></i>
            }
            <span slot="secondary">{{ getSubtitle(cipher) }}</span>
          </button>
          @if (cipher.permissions.restore) {
            <ng-container slot="end">
              <bit-item-action>
                <button
                  type="button"
                  bitIconButton="bwi-ellipsis-v"
                  size="small"
                  [label]="'moreOptionsLabel' | i18n: cipher.name"
                  [bitMenuTriggerFor]="moreOptions"
                ></button>
                <bit-menu #moreOptions>
                  @if (!hasDecryptionFailure(cipher)) {
                    <button type="button" bitMenuItem (click)="restore(cipher)">
                      {{ "restore" | i18n }}
                    </button>
                  }
                  <button
                    type="button"
                    bitMenuItem
                    *appCanDeleteCipher="cipher"
                    (click)="delete(cipher)"
                  >
                    {{ "deleteForever" | i18n }}
                  </button>
                </bit-menu>
              </bit-item-action>
            </ng-container>
          }
        </bit-item>
      }
    </bit-item-group>
  </bit-section>
}