<vn-auto-search
    model="model">
</vn-auto-search>
<vn-data-viewer
    model="model"
    class="vn-w-lg">
    <vn-card>
    <vn-table model="model">
        <vn-thead>
            <vn-tr>
                <vn-th field="id" number>Id</vn-th>
                <vn-th field="clientFk">Client</vn-th>
                <vn-th field="created" center shrink-date>Created</vn-th>
                <vn-th field="workerFk">Worker</vn-th>
                <vn-th field="claimStateFk">State</vn-th>
                <vn-th></vn-th>
            </vn-tr>
        </vn-thead>
        <vn-tbody>
            <a
                ng-repeat="claim in model.data"
                class="{{::$ctrl.compareDate(ticket.shipped)}} clickable vn-tr search-result"
                ui-sref="claim.card.summary({id: claim.id})">
                <vn-td number>{{::claim.id}}</vn-td>
                <vn-td expand>
                    <span
                        vn-click-stop="clientDescriptor.show($event, claim.clientFk)"
                        class="link">
                        {{::claim.name}}
                    </span>
                </vn-td>
                <vn-td center shrink-date>{{::claim.created | date:'dd/MM/yyyy'}}</vn-td>
                <vn-td expand>
                    <span
                        vn-click-stop="workerDescriptor.show($event, claim.workerFk)"
                        class="link" >
                        {{::claim.userName}}
                    </span>
                </vn-td>
                <vn-td>
                    <span class="chip {{::$ctrl.stateColor(claim)}}">
                        {{::claim.description}}
                    </span>
                </vn-td>
                <vn-td shrink>
                    <vn-icon-button
                        vn-click-stop="$ctrl.preview(claim)"
                        vn-tooltip="Preview"
                        icon="preview">
                    </vn-icon-button>
                </vn-td>
            </a>
        </vn-tbody>
    </vn-table>
    </vn-card>
</vn-data-viewer>
<vn-client-descriptor-popover
    vn-id="clientDescriptor">
</vn-client-descriptor-popover>
<vn-worker-descriptor-popover 
    vn-id="workerDescriptor">
</vn-worker-descriptor-popover>
<vn-popup vn-id="summary">
    <vn-claim-summary
        claim="$ctrl.claimSelected">
    </vn-claim-summary>
</vn-popup>