<div class="container loading-spinner" *ngIf="!loaded">
  <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
</div>
<ng-container *ngIf="loaded">
  <div class="content">
    <cdk-virtual-scroll-viewport
      itemSize="42"
      minBufferPx="400"
      maxBufferPx="600"
      *ngIf="ciphers.length"
    >
      <div class="list">
        <button
          type="button"
          *cdkVirtualFor="let c of ciphers; trackBy: trackByFn"
          appStopClick
          (click)="selectCipher(c)"
          (contextmenu)="rightClickCipher(c)"
          title="{{ 'viewItem' | i18n }}"
          [ngClass]="{ active: c.id === activeCipherId }"
          [attr.aria-pressed]="c.id === activeCipherId"
          class="flex-list-item virtual-scroll-item"
        >
          <app-vault-icon [cipher]="c"></app-vault-icon>
          <div class="flex-cipher-list-item">
            <span class="text">
              <span class="truncate-box">
                <span class="truncate">{{ c.name }}</span>
                <ng-container *ngIf="c.organizationId">
                  <i
                    class="bwi bwi-collection text-muted"
                    title="{{ 'shared' | i18n }}"
                    aria-hidden="true"
                  ></i>
                  <span class="sr-only">{{ "shared" | i18n }}</span>
                </ng-container>
                <ng-container *ngIf="CipherViewLikeUtils.hasAttachments(c)">
                  <i
                    class="bwi bwi-paperclip text-muted"
                    title="{{ 'attachments' | i18n }}"
                    aria-hidden="true"
                  ></i>
                  <span class="sr-only">{{ "attachments" | i18n }}</span>
                </ng-container>
              </span>
            </span>
            <span *ngIf="CipherViewLikeUtils.subtitle(c)" class="detail">{{
              CipherViewLikeUtils.subtitle(c)
            }}</span>
          </div>
        </button>
      </div>
    </cdk-virtual-scroll-viewport>
    <div class="no-items" *ngIf="!ciphers.length">
      <img class="no-items-image" aria-hidden="true" />
      <p>{{ "noItemsInList" | i18n }}</p>
      <ng-container *ngTemplateOutlet="addCipherButton"></ng-container>
    </div>
    <div class="footer">
      <ng-container *ngTemplateOutlet="addCipherButton"></ng-container>
    </div>
  </div>
</ng-container>

<ng-template #addCipherButton>
  <button
    type="button"
    class="block primary"
    bitButton
    appA11yTitle="{{ 'addItem' | i18n }}"
    [disabled]="deleted"
    [bitMenuTriggerFor]="addCipherMenu"
  >
    <i class="bwi bwi-plus bwi-lg" aria-hidden="true"></i>
  </button>
  <bit-menu #addCipherMenu>
    @for (itemTypes of itemTypes$ | async; track itemTypes.type) {
      <button type="button" bitMenuItem (click)="addCipher(itemTypes.type)">
        <i class="bwi {{ itemTypes.icon }} tw-mr-1" aria-hidden="true"></i>
        {{ itemTypes.labelKey | i18n }}
      </button>
    }
  </bit-menu>
</ng-template>
