browser/src/popup/vault/ciphers.component.html

<header>
    <div class="left">
        <button type="button" appBlurClick (click)="back()">
            <span class="header-icon"><i class="fa fa-chevron-left"></i></span>
            <span>{{'back' | i18n}}</span>
        </button>
    </div>
    <div class="search">
        <input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search"
               [(ngModel)]="searchText" (input)="search(200)" appAutofocus>
        <i class="fa fa-search"></i>
    </div>
    <div class="right" *ngIf="showAdd">
        <button type="button" appBlurClick (click)="addCipher()" title="{{'addItem' | i18n}}">
            <i class="fa fa-plus fa-lg fa-fw"></i>
        </button>
    </div>
</header>
<content>
    <ng-container *ngIf="(!isPaging() ? ciphers : pagedCiphers) as filteredCiphers">
        <div class="no-items" *ngIf="!filteredCiphers.length">
            <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
            <ng-container *ngIf="loaded">
                <p>{{'noItemsInList' | i18n}}</p>
                <button (click)="addCipher()" class="btn block primary link" *ngIf="showAdd">
                    {{'addItem' | i18n}}
                </button>
            </ng-container>
        </div>
        <div class="box list only-list" *ngIf="filteredCiphers.length > 0"
             infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollContainer]="'content'" [fromRoot]="true"
             [infiniteScrollDisabled]="!isPaging()" (scrolled)="loadMore()">
            <div class="box-header">
                {{groupingTitle}}
                <span class="flex-right">{{isSearching() ? filteredCiphers.length : ciphers.length}}</span>
            </div>
            <div class="box-content">
                <app-ciphers-list [ciphers]="filteredCiphers" title="{{'viewItem' | i18n}}"
                                  (onSelected)="selectCipher($event)"
                                  (onDoubleSelected)="launchCipher($event)"></app-ciphers-list>
            </div>
        </div>
    </ng-container>
</content>