<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="c.hasAttachments">
                  <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="c.subTitle" class="detail">{{ c.subTitle }}</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>
      <button type="button" (click)="addCipher()" class="btn block primary link">
        {{ "addItem" | i18n }}
      </button>
    </div>
    <div class="footer">
      <button
        type="button"
        (click)="addCipher()"
        (contextmenu)="addCipherOptions()"
        class="block primary"
        appA11yTitle="{{ 'addItem' | i18n }}"
        [disabled]="deleted"
      >
        <i class="bwi bwi-plus bwi-lg" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</ng-container>
