<vn-crud-model auto-load="false"
    vn-id="model"
    url="Travels/extraCommunityFilter"
    data="travels"
    order="landed ASC, shipped ASC, travelFk, loadPriority, agencyModeFk, evaNotes"
    limit="20">
</vn-crud-model>
<vn-portal slot="topbar">
    <vn-searchbar
        vn-focus
        panel="vn-extra-community-search-panel"
        info="Search by travel id or reference"
        placeholder="Search by extra community travel"
        suggested-filter="$ctrl.defaultFilter"
        filter="$ctrl.defaultFilter"
        auto-state="false"
        model="model">
    </vn-searchbar>
</vn-portal>
<vn-data-viewer model="model" class="travel-list">
    <vn-card>
        <section class="vn-pa-md">
            <vn-tool-bar class="vn-mb-md">
                <vn-button disabled="!model.userParams.landedFrom || !model.userParams.landedTo"
                    icon="picture_as_pdf"
                    ng-click="$ctrl.showReport()"
                    vn-tooltip="Open as PDF">
                </vn-button>
            </vn-tool-bar>
            <vn-table>
                <vn-thead>
                    <vn-tr>
                        <vn-th shrink>Id</vn-th>
                        <vn-th expand>Supplier</vn-th>
                        <vn-th expand>Freighter</vn-th>
                        <vn-th>Reference</vn-th>
                        <vn-th number>Packages</vn-th>
                        <vn-th number>Bl. KG</vn-th>
                        <vn-th number>Phy. KG</vn-th>
                        <vn-th number>Vol. KG</vn-th>
                        <vn-th expand translate-attr="{title: 'Warehouse Out'}">
                            Wh. Out
                        </vn-th>
                        <vn-th expand>W. Shipped</vn-th>
                        <vn-th expand translate-attr="{title: 'Warehouse In'}">
                            Wh. In
                        </vn-th>
                        <vn-th expand>W. Landed</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody ng-repeat="travel in travels" class="vn-mb-md" vn-droppable="$ctrl.onDrop($event)" ng-attr-id="{{::travel.id}}">
                    <vn-tr class="header">
                        <vn-td>
                            <span class="link"
                                ng-click="travelDescriptor.show($event, travel.id)">
                                {{::travel.id}}
                            </span>
                        </vn-td>
                        <vn-td expand>{{::travel.agencyModeName}}</vn-td>
                        <vn-td expand>{{::travel.cargoSupplierNickname}}</vn-td>
                        <vn-td-editable name="reference" expand>
                            <text>{{travel.ref}}</text>
                            <field>
                                <vn-textfield class="dense" vn-focus
                                    ng-model="travel.ref"
                                    on-change="$ctrl.save(travel.id, {ref: value})">
                                </vn-textfield>
                            </field>
                        </vn-td-editable>
                        <vn-td number>{{::travel.stickers}}</vn-td>
                        <vn-td-editable name="lockedKg" expand style="text-align: right">
                            <text number>{{travel.kg}}</text>
                            <field>
                                <vn-input-number class="dense" vn-focus
                                    ng-model="travel.kg"
                                    on-change="$ctrl.save(travel.id, {kg: value})"
                                    min="0">
                                </vn-input-number>
                            </field>
                        </vn-td-editable>
                        <vn-td number>{{::travel.loadedKg}}</vn-td>
                        <vn-td number>{{::travel.volumeKg}}</vn-td>
                        <vn-td expand>{{::travel.warehouseOutName}}</vn-td>
                        <vn-td expand>{{::travel.shipped | date: 'dd/MM/yyyy'}}</vn-td>
                        <vn-td expand>{{::travel.warehouseInName}}</vn-td>
                        <vn-td expand>{{::travel.landed | date: 'dd/MM/yyyy'}}</vn-td>
                    </vn-tr>
                    <a href="#" ng-repeat="entry in travel.entries" class="vn-tr" draggable
                        ng-attr-id="{{::entry.id}}"
                        ng-click="$event.preventDefault()">
                        <vn-td>
                            <span class="link"
                                ng-click="entryDescriptor.show($event, entry.id)">
                                {{::entry.id}}
                            </span>
                        </vn-td>
                        <vn-td>{{::entry.supplierName}}</vn-td>
                        <vn-td></vn-td>
                        <vn-td expand>{{::entry.ref}}</vn-td>
                        <vn-td number>{{::entry.stickers}}</vn-td>
                        <vn-td number></vn-td>
                        <vn-td number>{{::entry.loadedkg}}</vn-td>
                        <vn-td number>{{::entry.volumeKg}}</vn-td>
                        <vn-td>
                            <span ng-if="::entry.notes" vn-tooltip="{{::entry.notes}}">
                                {{::entry.notes}}
                            </span>
                        </vn-td>
                        <vn-td>
                            <span ng-if="::entry.evaNotes" vn-tooltip="{{::entry.evaNotes}}">
                                {{::entry.evaNotes}}
                            </span>
                        </vn-td>
                        <vn-td></vn-td>
                        <vn-td></vn-td>
                    </a>
                </vn-tbody>
            </vn-table>
        </section>
    </vn-card>
</vn-data-viewer>
<vn-travel-descriptor-popover
    vn-id="travelDescriptor">
</vn-travel-descriptor-popover>
<vn-entry-descriptor-popover
    vn-id="entryDescriptor">
</vn-entry-descriptor-popover>