<bit-section *ngIf="ciphers?.length">
  <bit-section-header>
    <h2 bitTypography="h6">
      {{ headerText }}
    </h2>
    <span bitTypography="body1" slot="end">{{ ciphers.length }}</span>
  </bit-section-header>
  <bit-item-group>
    <bit-item *ngFor="let cipher of ciphers">
      <button
        bit-item-content
        type="button"
        [appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
        (click)="onViewCipher(cipher)"
      >
        <app-vault-icon slot="start" [cipher]="cipher"></app-vault-icon>
        <span data-testid="item-name">{{ cipher.name }}</span>
      </button>
      <ng-container slot="end" *ngIf="cipher.edit">
        <bit-item-action>
          <button
            type="button"
            bitIconButton="bwi-ellipsis-v"
            size="small"
            [attr.aria-label]="'moreOptionsLabel' | i18n: cipher.name"
            [title]="'moreOptionsTitle' | i18n: cipher.name"
            [bitMenuTriggerFor]="moreOptions"
          ></button>
          <bit-menu #moreOptions>
            <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>
