<header>
    <div class="left">
        <button type="button" appBlurClick (click)="back()">
            <span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
            <span>{{'back' | i18n}}</span>
        </button>
    </div>
    <div class="search">
        <input type="{{searchTypeSearch ? 'search' : 'text'}}"
            placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search" [(ngModel)]="searchText"
            (input)="search(200)" autocomplete="off" appAutofocus>
        <i class="fa fa-search" aria-hidden="true"></i>
    </div>
    <div class="right">
        <button type="button" appBlurClick (click)="addCipher()" appA11yTitle="{{'addItem' | i18n}}">
            <i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>
        </button>
    </div>
</header>
<content [ngClass]="{'stacked-boxes': showGroupings()}">
    <ng-container *ngIf="showGroupings()">
        <div class="box list" *ngIf="nestedFolders && nestedFolders.length">
            <div class="box-header">
                {{'folders' | i18n}}
            </div>
            <div class="box-content single-line">
                <a *ngFor="let f of nestedFolders" href="#" class="box-content-row" appStopClick appBlurClick
                    (click)="selectFolder(f.node)">
                    <div class="row-main">
                        <div class="icon">
                            <i class="fa fa-fw fa-lg" aria-hidden="true"
                                [ngClass]="{'fa-folder-open': f.node.id, 'fa-folder-open-o': !f.node.id}"></i>
                        </div>
                        <span class="text">{{f.node.name}}</span>
                    </div>
                    <span><i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
        <div class="box list" *ngIf="nestedCollections && nestedCollections.length">
            <div class="box-header">
                {{'collections' | i18n}}
            </div>
            <div class="box-content single-line">
                <a *ngFor="let c of nestedCollections" href="#" class="box-content-row" appStopClick appBlurClick
                    (click)="selectCollection(c.node)">
                    <div class="row-main">
                        <div class="icon"><i class="fa fa-fw fa-lg fa-cube" aria-hidden="true"></i></div>
                        <span class="text">{{c.node.name}}</span>
                    </div>
                    <span><i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
    </ng-container>
    <ng-container *ngIf="ciphers">
        <div class="no-items" *ngIf="!ciphers.length">
            <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded" aria-hidden="true"></i>
            <ng-container *ngIf="loaded">
                <p>{{'noItemsInList' | i18n}}</p>
                <button (click)="addCipher()" class="btn block primary link">
                    {{'addItem' | i18n}}
                </button>
            </ng-container>
        </div>
        <cdk-virtual-scroll-viewport itemSize="46" minBufferPx="400" maxBufferPx="600" *ngIf="ciphers.length"
            #virtualScrollViewport>
            <div class="box list only-list">
                <div class="box-header">
                    {{groupingTitle}}
                    <span class="flex-right">{{isSearching() ? ciphers.length : ciphers.length}}</span>
                </div>
                <div class="box-content">
                    <app-cipher-row *cdkVirtualFor="let c of ciphers" [cipher]="c" title="{{'viewItem' | i18n}}"
                        (onSelected)="selectCipher($event)" (launchEvent)="launchCipher($event)"></app-cipher-row>
                </div>
            </div>
        </cdk-virtual-scroll-viewport>
    </ng-container>
</content>
