<vn-crud-model
    vn-id="model"
    url="/item/api/Clients"
    order="id DESC"
    limit="8"
    data="clients"
    auto-load="false">
</vn-crud-model>
<div class="content-block">
    <div class="vn-list">
        <vn-card pad-medium-h>
            <vn-searchbar
                panel="vn-client-search-panel"
                model="model"
                expr-builder="$ctrl.exprBuilder(param, value)"
                vn-focus>
            </vn-searchbar>
        </vn-card>
        <vn-card margin-medium-v>
            <a
                ng-repeat="client in clients track by client.id"
                ui-sref="client.card.summary({ id: {{::client.id}} })"
                translate-attr="{title: 'View client'}"
                class="vn-list-item searchResult">
                <vn-horizontal ng-click="$ctrl.onClick($event)">
                    <vn-one>
                        <h6>{{::client.name}}</h6>
                        <vn-label-value label="Id" 
                            value="{{::client.id}}">
                        </vn-label-value>
                        <vn-label-value label="Phone" 
                            value="{{::client.phone | phone}}">
                        </vn-label-value>
                        <vn-label-value label="Town/City" 
                            value="{{::client.city}}">
                        </vn-label-value>
                        <vn-label-value label="Email" 
                            value="{{::client.email}}">
                        </vn-label-value>
                    </vn-one>
                    <vn-horizontal class="buttons">
                        <vn-icon-button
                            ng-click="$ctrl.openSummary(client, $event)"
                            vn-tooltip="Preview"
                            icon="desktop_windows">
                        </vn-icon-button>
                    </vn-horizontal>
                </vn-horizontal>
            </a>
            <vn-empty-rows translate ng-if="model.data.length === 0">
                No results
            </vn-empty-rows>
            <vn-empty-rows translate ng-if="model.data === null">
                Enter a new search
            </vn-empty-rows>
        </vn-card>
        <vn-pagination model="model"></vn-pagination>
    </div>
</div>
<a ui-sref="client.create" vn-tooltip="New client" vn-bind="+" fixed-bottom-right>
    <vn-float-button icon="person_add"></vn-float-button>
</a>
<vn-dialog class="dialog-summary"
    vn-id="dialog-summary-client">
    <tpl-body>
        <vn-client-summary client="$ctrl.clientSelected"></vn-client-summary>
    </tpl-body>
</vn-dialog>