<tpl-title>
    <vn-horizontal>
        <span translate>Tickets to add</span>
        <div class="button-right">
            <vn-button label="Add" ng-click="$ctrl.setTicketsRoute()"></vn-button>
        </div>
    </vn-horizontal>
</tpl-title>
<tpl-body id="manifold-form">
    <vn-crud-model
        vn-id="model"
        url="Routes/{{$ctrl.route.id}}/getSuggestedTickets"
        data="$ctrl.possibleTickets"
        auto-load="true">
    </vn-crud-model>
    <vn-data-viewer data="$ctrl.possibleTickets" class="manifold-panel">
        <vn-table auto-load="true">
            <vn-thead>
                <vn-tr>
                    <vn-th shrink>
                        <vn-multi-check 
                            model="model">
                        </vn-multi-check>
                    </vn-th>
                    <vn-th number>Ticket</vn-th>
                    <vn-th>Client</vn-th>
                    <vn-th shrink>Province</vn-th>
                    <vn-th shrink> 
                        <span translate>
                            Population 
                        </span> 
                    </vn-th>
                    <vn-th expand>PC</vn-th>
                    <vn-th>Address</vn-th>
                    <vn-th shrink>Zone</vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr ng-repeat="ticket in $ctrl.possibleTickets">
                    <vn-td shrink>
                        <vn-check 
                            ng-model="ticket.checked">
                        </vn-check>
                    </vn-td>
                    <vn-td number>
                        <span class="link" ng-click="ticketDescriptor.show($event, ticket.id)">
                            {{::ticket.id}}
                        </span>
                    </vn-td>
                    <vn-td expand>
                        <span class="link" ng-click="clientDescriptor.show($event, ticket.clientFk)">
                            {{::ticket.nickname}}
                        </span>
                    </vn-td>
                    <vn-td shrink>{{::ticket.address.province.name}}</vn-td>
                    <vn-td shrink>{{::ticket.address.city}}</vn-td>
                    <vn-td number shrink>{{::ticket.address.postalCode}}</vn-td>
                    <vn-td expand title="{{::ticket.address.street}}">{{::ticket.address.street}}</vn-td>
                    <vn-td expand>
                        {{::ticket.zone.name}}
                        <vn-icon-button
                            icon="link_off"
                            class="pointer"
                            title="{{'Unlink zone' | translate: {zoneName: ticket.zone.name, agencyName: ticket.agencyMode.name} }}"
                            ng-click="unlinkZoneConfirmation.show(ticket)">
                        </vn-icon-button>
                    </vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
    </vn-data-viewer>
    <vn-confirm
        vn-id="unlinkZoneConfirmation"
        on-accept="$ctrl.unlinkZone($data)"
        question="{{$ctrl.confirmationMessage}}"
        message="Unlink selected zone?">
    </vn-confirm>
    <vn-ticket-descriptor-popover  vn-id="ticket-descriptor">
    </vn-ticket-descriptor-popover>
    <vn-client-descriptor-popover vn-id="client-descriptor">
    </vn-client-descriptor-popover>
</tpl-body>