<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">{{ "send" | i18n }}</h1>
  <div class="search">
    <input
      type="search"
      placeholder="{{ 'searchType' | i18n }}"
      id="search"
      [(ngModel)]="searchText"
      (input)="search(200)"
      autocomplete="off"
      appAutofocus
    />
    <i class="bwi bwi-search"></i>
  </div>
  <div class="right">
    <button
      type="button"
      (click)="addSend()"
      appA11yTitle="{{ 'addSend' | i18n }}"
      [disabled]="disableSend"
    >
      <i class="bwi bwi-plus bwi-lg bwi-fw" aria-hidden="true"></i>
    </button>
  </div>
</header>
<main tabindex="-1" [ngClass]="{ flex: disableSend }">
  <app-callout type="warning" title="{{ 'sendDisabled' | i18n }}" *ngIf="disableSend">
    {{ "sendDisabledWarning" | i18n }}
  </app-callout>
  <div class="no-items" *ngIf="!filteredSends.length">
    <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded" aria-hidden="true"></i>
    <ng-container *ngIf="loaded">
      <p>{{ "noItemsInList" | i18n }}</p>
      <button
        type="button"
        (click)="addSend()"
        class="btn block primary link"
        [disabled]="disableSend"
      >
        {{ "addSend" | i18n }}
      </button>
    </ng-container>
  </div>
  <div class="box list only-list" *ngIf="filteredSends.length">
    <h2 class="box-header">
      {{ groupingTitle }}
      <span class="flex-right">{{ filteredSends.length }}</span>
    </h2>
    <div class="box-content">
      <app-send-list
        [sends]="filteredSends"
        title="{{ 'editItem' | i18n }}"
        [disabledByPolicy]="disableSend"
        (onSelected)="selectSend($event)"
        (onCopySendLink)="copy($event)"
        (onRemovePassword)="removePassword($event)"
        (onDeleteSend)="delete($event)"
      >
      </app-send-list>
    </div>
  </div>
</main>
