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

<header>
    <div class="left">
        <button type="button" appBlurClick (click)="back()">
            <i class="fa fa-chevron-left"></i>
            <span>{{'back' | i18n}}</span>
        </button>
    </div>
    <div class="center">
        {{searchPlaceholder || ('searchVault' | i18n)}}
    </div>
    <div class="right">
        <button type="button" appBlurClick (click)="addCipher()" title="{{'addItem' | i18n}}">
            <i class="fa fa-plus fa-lg"></i>
        </button>
    </div>
</header>
<content>
    <ng-container *ngIf="(ciphers | searchCiphers: searchText) as searchedCiphers">
        <div class="box list only-list" *ngIf="searchedCiphers.length > 0">
            <div class="box-header">
                Some name here
            </div>
            <div class="box-content">
                <app-ciphers-list [ciphers]="searchedCiphers" title="{{'viewItem' | i18n}}"
                                  (onSelected)="selectCipher($event)"></app-ciphers-list>
            </div>
        </div>
        <div class="no-items" *ngIf="!searchedCiphers.length">
            <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)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
            </ng-container>
        </div>
    </ng-container>
</content>