<vn-crud-model
    vn-id="model"
    url="/claim/api/Claims/filter"
    limit="20"
    data="claims"
    order="claimStateFk ASC, created DESC">
</vn-crud-model>
<div class="content-block">
    <div class="vn-list">
        <vn-card pad-medium-h>
            <vn-searchbar
                panel="vn-claim-search-panel"
                on-search="$ctrl.onSearch($params)"
                info="Search claim by id or client name"
                vn-focus>
            </vn-searchbar>
        </vn-card>
    </div>
    <vn-card margin-medium-v compact>
        <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>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 claims"
                    class="{{::$ctrl.compareDate(ticket.shipped)}} clickable vn-tr searchResult"
                    ui-sref="claim.card.summary({id: claim.id})">
                    <vn-td number>{{::claim.id}}</vn-td>
                    <vn-td expand>
                        <span class="link" ng-click="$ctrl.showClientDescriptor($event, claim.clientFk)">
                            {{::claim.name}}
                        </span>
                    </vn-td>
                    <vn-td center>{{::claim.created | dateTime:'dd/MM/yyyy'}}</vn-td>
                    <vn-td expand>
                        <span 
                            class="link" 
                            ng-click="$ctrl.showWorkerDescriptor($event, claim.workerFk)">
                            {{::claim.nickName}}
                        </span>
                    </vn-td>
                    <vn-td>
                        <span class="chip {{::$ctrl.stateColor(claim)}}">
                            {{::claim.description}}
                        </span>
                    </vn-td>
                    <vn-td shrink>
                        <vn-icon-button
                            ng-click="$ctrl.preview($event, claim)"
                            vn-tooltip="Preview"
                            icon="desktop_windows">
                        </vn-icon-button>
                    </vn-td>
                </a>
            </vn-tbody>
        </vn-table>
    </vn-card>
    <vn-pagination model="model"></vn-pagination>
</div>
<vn-client-descriptor-popover vn-id="clientDescriptor"></vn-client-descriptor-popover>
<vn-worker-descriptor-popover 
    vn-id="workerDescriptor"
    worker-fk="$ctrl.selectedWorker">
</vn-worker-descriptor-popover>
<vn-dialog class="dialog-summary"
    vn-id="dialog-summary-claim">
    <tpl-body>
        <vn-claim-summary claim="$ctrl.claimSelected"></vn-claim-summary>
    </tpl-body>
</vn-dialog>