<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="worker in model.data track by worker.id"
            ui-sref="worker.card.summary({id: worker.id})"
            translate-attr="{title: 'View worker'}"
            class="vn-item search-result">
            <vn-item-section>
                <h6>{{::worker.nickname}}</h6>
                <vn-label-value label="Id"
                    value="{{::worker.id}}">
                </vn-label-value>
                <vn-label-value label="User"
                    value="{{::worker.userName}}">
                </vn-label-value>
                <vn-label-value label="Email"
                    value="{{::worker.email}}">
                </vn-label-value>
                <vn-label-value label="Department"
                    value="{{::worker.department}}">
                </vn-label-value>
            </vn-item-section>
            <vn-item-section side>
                <vn-icon-button
                    ng-click="$ctrl.goToTimeControl($event, worker.id)"
                    vn-tooltip="Time control"
                    icon="access_time">
                </vn-icon-button>
                <vn-icon-button
                    ng-click="$ctrl.preview($event, worker)"
                    vn-tooltip="Preview"
                    icon="preview">
                </vn-icon-button>
            </vn-item-section>
        </a>
        </div>
    </vn-card>
</vn-data-viewer>
<a ui-sref="worker.create"
    vn-tooltip="New worker"
    vn-bind="+"
    vn-acl="hr"
    vn-acl-action="remove"
    fixed-bottom-right>
    <vn-float-button icon="person_add"></vn-float-button>
</a>
<vn-popup vn-id="preview">
    <vn-worker-summary
        worker="$ctrl.selectedWorker">
    </vn-worker-summary>
</vn-popup>