<header>
    <div class="left" *ngIf="showLeftHeader">
        <app-pop-out></app-pop-out>
    </div>
    <div class="search">
        <input type="search" placeholder="{{'searchSends' | i18n}}" id="search" [(ngModel)]="searchText"
            (input)="search(200)" autocomplete="off" appAutofocus>
        <i class="fa fa-search"></i>
    </div>
    <div class="right">
        <button appBlurClick (click)="addSend()" appA11yTitle="{{'addSend' | i18n}}" [disabled]="disableSend">
            <i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>
        </button>
    </div>
</header>
<content [ngClass]="{'flex' : disableSend, 'tab-page' : disableSend}">
    <app-callout type="warning" title="{{'sendDisabled' | i18n}}" *ngIf="disableSend">
        {{'sendDisabledWarning' | i18n}}
    </app-callout>
    <div class="no-items" *ngIf="(!sends || !sends.length) && !showSearching()">
        <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
        <ng-container *ngIf="loaded">
            <i class="fa fa-frown-o fa-4x"></i>
            <p>{{'noItemsInList' | i18n}}</p>
            <button (click)="addSend()" class="btn block primary link"
                [disabled]="disableSend">{{'addSend' | i18n}}</button>
        </ng-container>
    </div>
    <ng-container *ngIf="sends && sends.length && !showSearching()">
        <div class="box list">
            <div class="box-header">
                {{'types' | i18n}}
            </div>
            <div class="box-content single-line">
                <a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(sendType.Text)">
                    <div class="row-main">
                        <div class="icon"><i class="fa fa-fw fa-lg fa-file-text-o"></i></div>
                        <span class="text">{{'sendTypeText' | i18n}}</span>
                    </div>
                    <span class="row-sub-label">{{typeCounts.get(sendType.Text) || 0}}</span>
                    <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
                </a>
                <a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(sendType.File)">
                    <div class="row-main">
                        <div class="icon"><i class="fa fa-fw fa-lg fa-file-o"></i></div>
                        <span class="text">{{'sendTypeFile' | i18n}}</span>
                    </div>
                    <span class="row-sub-label">{{typeCounts.get(sendType.File) || 0}}</span>
                    <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
                </a>
            </div>
        </div>
        <div class="box list">
            <div class="box-header">
                {{'allSends' | i18n}}
                <div class="flex-right">{{sends.length}}</div>
            </div>
            <div class="box-content">
                <app-send-list [sends]="sends" title="{{'editItem' | i18n}}" [disabledByPolicy]="disableSend"
                    (onSelected)="selectSend($event)" (onCopySendLink)="copy($event)"
                    (onRemovePassword)="removePassword($event)" (onDeleteSend)="delete($event)"></app-send-list>
            </div>
        </div>
    </ng-container>
    <ng-container *ngIf="showSearching()">
        <div class="no-items" *ngIf="!filteredSends || !filteredSends.length">
            <p>{{'noItemsInList' | i18n}}</p>
        </div>
        <div class="box list full-list" *ngIf="filteredSends && filteredSends.length > 0">
            <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>
    </ng-container>
</content>
