<vn-crud-model
    vn-id="model"
    url="SalesMonitors/clientsFilter"
    limit="6"
    filter="$ctrl.filter"
    order="dated DESC, hour DESC"
    auto-load="true">
</vn-crud-model>
<vn-horizontal class="header">
    <vn-one translate>
        Clients on website
    </vn-one>
    <vn-none>
        <vn-icon class="arrow"
            icon="keyboard_arrow_up"
            vn-tooltip="Minimize/Maximize"
            ng-click="$ctrl.main.toggle()">
        </vn-icon>
    </vn-none>
</vn-horizontal>
<vn-card vn-id="card">
    <smart-table
        model="model"
        options="$ctrl.smartTableOptions"
        expr-builder="$ctrl.exprBuilder(param, value)"
        disabled-table-filter="true"
        disabled-table-order="true"
        class="scrollable sm">
        <slot-actions>
            <vn-horizontal>
                <vn-date-picker
                    class="vn-pa-xs"
                    label="From"
                    ng-model="$ctrl.dateFrom"
                    on-change="$ctrl.addFilterDate()">
                </vn-date-picker>
                <vn-date-picker
                    class="vn-pa-xs"
                    label="To"
                    ng-model="$ctrl.dateTo"
                    on-change="$ctrl.addFilterDate()">
                </vn-date-picker>
            </vn-horizontal>
        </slot-actions>
        <slot-table>
            <table>
                <thead>
                    <tr>
                        <th field="dated">
                            <span translate>Date</span>
                        </th>
                        <th field="hour">
                            <span translate>Hour</span>
                        </th>
                        <th field="salesPersonFk" class="expendable">
                            <span translate>Salesperson</span>
                        </th>
                        <th field="clientFk">
                            <span translate>Client</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="visit in model.data track by visit.id">
                        <td shrink-date>
                            <span class="chip">
                                {{::visit.dated | date:'dd/MM/yy'}}
                            </span>
                        </td>
                        <td shrink-date>
                            <span class="chip">
                                {{::visit.hour | date: 'HH:mm'}}
                            </span>
                        </td>
                        <td class="shrink expendable">
                            <span
                                title="{{::visit.salesPerson}}"
                                vn-click-stop="workerDescriptor.show($event, visit.salesPersonFk)"
                                class="link">
                                {{::visit.salesPerson | dashIfEmpty}}
                            </span>
                        </td>
                        <td>
                            <span
                                title="{{::visit.clientName}}"
                                vn-click-stop="clientDescriptor.show($event, visit.clientFk)"
                                class="link">
                                {{::visit.clientName}}
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </slot-table>
        <slot-pagination>
            <vn-pagination
                model="model"
                class="vn-pt-xs"
                scroll-selector="vn-monitor-sales-clients smart-table"
                scroll-offset="100">
            </vn-pagination>
        </slot-pagination>
    </smart-table>
</vn-card>
<vn-worker-descriptor-popover
    vn-id="workerDescriptor">
</vn-worker-descriptor-popover>
<vn-client-descriptor-popover
    vn-id="clientDescriptor">
</vn-client-descriptor-popover>