<header>
  <div class="left">
    <button type="button" (click)="back()">
      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
      <span>{{ "back" | i18n }}</span>
    </button>
  </div>
  <h1 class="sr-only">{{ "myVault" | i18n }}</h1>
  <div class="search">
    <input
      type="{{ searchTypeSearch ? 'search' : 'text' }}"
      placeholder="{{ searchPlaceholder || ('searchVault' | i18n) }}"
      id="search"
      [(ngModel)]="searchText"
      (input)="search(200)"
      autocomplete="off"
      appAutofocus
    />
    <i class="bwi bwi-search" aria-hidden="true"></i>
  </div>
  <div class="right">
    <button type="button" (click)="addCipher()" appA11yTitle="{{ 'addItem' | i18n }}">
      <i class="bwi bwi-plus bwi-lg bwi-fw" aria-hidden="true"></i>
    </button>
  </div>
</header>
<main tabindex="-1" [ngClass]="{ 'stacked-boxes': showGroupings() }">
  <ng-container *ngIf="showGroupings()">
    <app-vault-select
      *ngIf="showVaultFilter"
      (onVaultSelectionChanged)="changeVaultSelection()"
    ></app-vault-select>
    <div class="box list" *ngIf="nestedFolders && nestedFolders.length">
      <h2 class="box-header">
        {{ "folders" | i18n }}
      </h2>
      <div class="box-content single-line">
        <button
          type="button"
          *ngFor="let f of nestedFolders"
          class="box-content-row"
          appStopClick
          (click)="selectFolder(f.node)"
        >
          <div class="row-main">
            <div class="icon">
              <i class="bwi bwi-fw bwi-lg bwi-folder" aria-hidden="true"></i>
            </div>
            <span class="text">{{ f.node.name }}</span>
          </div>
          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i></span>
        </button>
      </div>
    </div>
    <div class="box list" *ngIf="nestedCollections && nestedCollections.length">
      <h2 class="box-header">
        {{ "collections" | i18n }}
      </h2>
      <div class="box-content single-line">
        <button
          type="button"
          *ngFor="let c of nestedCollections"
          class="box-content-row"
          appStopClick
          (click)="selectCollection(c.node)"
        >
          <div class="row-main">
            <div class="icon">
              <i class="bwi bwi-fw bwi-lg bwi-collection" aria-hidden="true"></i>
            </div>
            <span class="text">{{ c.node.name }}</span>
          </div>
          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i></span>
        </button>
      </div>
    </div>
  </ng-container>
  <ng-container *ngIf="ciphers">
    <div *ngIf="!ciphers.length">
      <app-vault-select
        *ngIf="showVaultFilter && !showGroupings()"
        (onVaultSelectionChanged)="changeVaultSelection()"
      ></app-vault-select>
      <div class="no-items" *ngIf="!nestedFolders?.length && !nestedCollections?.length">
        <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded" aria-hidden="true"></i>
        <ng-container *ngIf="loaded">
          <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>
        </ng-container>
      </div>
    </div>
    <cdk-virtual-scroll-viewport
      itemSize="55"
      minBufferPx="400"
      maxBufferPx="600"
      *ngIf="ciphers.length"
      #virtualScrollViewport
      ><app-vault-select
        *ngIf="showVaultFilter && !showGroupings()"
        (onVaultSelectionChanged)="changeVaultSelection()"
      ></app-vault-select>
      <div class="box list only-list">
        <h2 class="box-header">
          {{ groupingTitle }}
          <span class="flex-right">{{ isSearching() ? ciphers.length : ciphers.length }}</span>
        </h2>
        <div class="box-content">
          <app-cipher-row
            *cdkVirtualFor="let c of ciphers; let last = last"
            [cipher]="c"
            [last]="last"
            title="{{ 'viewItem' | i18n }}"
            (onSelected)="selectCipher($event)"
            (launchEvent)="launchCipher($event)"
          ></app-cipher-row>
        </div>
      </div>
    </cdk-virtual-scroll-viewport>
  </ng-container>
</main>
