<vn-auto-search
    model="model">
</vn-auto-search>
<vn-data-viewer
    model="model"
    class="vn-w-sm">
    <vn-card>
        <div class="vn-list separated">
            <a
                ng-repeat="user in model.data track by user.id"
                ui-sref="account.card.summary(::{id: user.id})"
                translate-attr="{title: 'View user'}"
                class="vn-item search-result">
                <vn-item-section>
                    <h6>{{::user.nickname}}</h6>
                    <vn-label-value
                        label="Id" 
                        value="{{::user.id}}">
                    </vn-label-value>
                    <vn-label-value
                        label="User" 
                        value="{{::user.name}}">
                    </vn-label-value>
                </vn-item-section>
                <vn-item-section side>
                    <vn-icon-button
                        vn-click-stop="$ctrl.preview(user)"
                        vn-tooltip="Preview"
                        icon="preview">
                    </vn-icon-button>
                </vn-item-section>
            </a>
        </div>
    </vn-card>
</vn-data-viewer>
<vn-popup vn-id="summary">
    <vn-user-summary user="$ctrl.selectedUser"></vn-user-summary>
</vn-popup>
<a 
    fixed-bottom-right
    ui-sref="account.create"
    vn-tooltip="New user"
    vn-bind="+"
    vn-acl="it"
    vn-acl-action="remove">
    <vn-float-button icon="add"></vn-float-button>
</a>