<vn-crud-model
    vn-id="model"
    url="Clients"
    limit="20">
</vn-crud-model>
<vn-portal slot="topbar">
    <vn-searchbar
        vn-focus
        panel="vn-client-search-panel"
        placeholder="Search client"
        info="Search client by id or name"
        auto-state="false"
        model="model"
        expr-builder="$ctrl.exprBuilder(param, value)">
    </vn-searchbar>
</vn-portal>
<vn-card>
    <smart-table 
        model="model" 
        options="$ctrl.smartTableOptions" 
        expr-builder="$ctrl.exprBuilder(param, value)">
        <slot-actions>
            <vn-button disabled="$ctrl.checked.length === 0"
                icon="show_chart"
                ng-click="filters.show($event)"
                vn-tooltip="Campaign consumption">
            </vn-button>
        </slot-actions>
        <slot-table>
            <table>
                <thead>
                    <tr>
                        <th shrink>
                            <vn-multi-check
                                model="model"
                                check-field="$checked">
                            </vn-multi-check>
                        </th>
                        <th field="id">
                            <span translate>Identifier</span>
                        </th>
                        <th field="socialName">
                            <span translate>Social name</span>
                        </th>
                        <th field="city">
                            <span translate>City</span>
                        </th>
                        <th field="phone">
                            <span translate>Phone</span>
                        </th>
                        <th field="email">
                            <span translate>Email</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="client in model.data"
                        vn-anchor="::{
                            state: 'item.card.summary', 
                            params: {id: item.id}
                        }">
                        <td>
                            <vn-check 
                                ng-model="client.$checked"
                                vn-click-stop>
                            </vn-check>
                        </td>
                        <td>
                            <span
                                vn-click-stop="clientDescriptor.show($event, client.id)"
                                class="link">
                                {{::client.id}}
                            </span>
                        </td>
                        <td>{{::client.socialName}}</td>
                        <td>{{::client.city}}</td>
                        <td>{{::client.phone}}</td>
                        <td>{{::client.email}}</td>
                    </tr>
                </tbody>
            </table>
        </slot-table>
    </smart-table>
</vn-card>

<vn-client-descriptor-popover
    vn-id="clientDescriptor">
</vn-client-descriptor-popover>
<vn-popover vn-id="filters">
    <div class="vn-pa-lg">
        <form ng-submit="$ctrl.onSendClientConsumption()">
            <vn-horizontal><h4 translate>Campaign consumption</h4></vn-horizontal>
            <vn-horizontal>
                <vn-autocomplete vn-one
                    url="Campaigns/latest"
                    label="Campaign"
                    translate-fields="['code']"
                    show-field="code"
                    value-field="id"
                    ng-model="$ctrl.campaign.id"
                    order="dated DESC"
                    selection="$ctrl.campaignSelection"
                    search-function="{dated: {like: '%'+ $search +'%'}}">
                    <tpl-item>
                        {{code}} {{dated | date: 'yyyy'}}
                    </tpl-item>
                </vn-autocomplete>
            </vn-horizontal>
            <vn-horizontal>
                <vn-date-picker
                    vn-one
                    label="From"
                    ng-model="$ctrl.campaign.from"
                    on-change="$ctrl.onChangeDate(value)">
                </vn-date-picker>
                <vn-date-picker
                    vn-one
                    label="To"
                    ng-model="$ctrl.campaign.to"
                    on-change="$ctrl.onChangeDate(value)">
                </vn-date-picker>
            </vn-horizontal>
            <vn-horizontal class="vn-mt-lg">
                <vn-submit label="Send"></vn-submit>
            </vn-horizontal>
        </form>
    </div>
</vn-popover>
<vn-contextmenu vn-id="contextmenu" targets="['smart-table']" model="model"
    expr-builder="$ctrl.exprBuilder(param, value)">
    <slot-menu>
        <vn-item translate
            ng-if="contextmenu.isFilterAllowed()"
            ng-click="contextmenu.filterBySelection()">
            Filter by selection
        </vn-item>
        <vn-item translate 
            ng-if="contextmenu.isFilterAllowed()" 
            ng-click="contextmenu.excludeSelection()">
            Exclude selection
        </vn-item>
        <vn-item translate 
            ng-if="contextmenu.isFilterAllowed()" 
            ng-click="contextmenu.removeFilter()">
            Remove filter
        </vn-item>
        <vn-item translate 
            ng-click="contextmenu.removeAllFilters()">
            Remove all filters
        </vn-item>
        <vn-item translate 
            ng-if="contextmenu.isActionAllowed()" 
            ng-click="contextmenu.copyValue()">
            Copy value
        </vn-item>
    </slot-menu>
</vn-contextmenu>
<vn-client-descriptor-popover
    vn-id="clientDescriptor">
</vn-client-descriptor-popover>