<vn-crud-model auto-load="true"
    vn-id="model"
    url="Items/getWasteByItem"
    params="$ctrl.$params"
    data="details">
</vn-crud-model>
<vn-data-viewer model="model">
    <vn-card class="vn-w-md">
        <section ng-repeat="detail in details" class="vn-pa-md">
            <vn-horizontal class="header">
                <h5>{{detail.family}} ({{detail.buyer}})</h5>
            </vn-horizontal>
            <vn-table>
                <vn-thead>
                    <vn-tr>
                        <vn-th shrink>Item</vn-th>
                        <vn-th number>Percentage</vn-th>
                        <vn-th number>Dwindle</vn-th>
                        <vn-th number>Total</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr ng-repeat="waste in detail.lines">
                        <vn-td shrink>
                            <span 
                                ng-click="itemDescriptor.show($event, waste.itemFk)"
                                class="link">
                                {{::waste.itemFk}}
                            </span>
                        </vn-td>
                        <vn-td number>{{::(waste.percentage / 100) | percentage: 2}}</vn-td>
                        <vn-td number>{{::waste.dwindle | currency: 'EUR'}}</vn-td>
                        <vn-td number>{{::waste.total | currency: 'EUR'}}</vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
        </section>
    </vn-card>
</vn-data-viewer>
<vn-item-descriptor-popover
    vn-id="item-descriptor"
    warehouse-fk="$ctrl.vnConfig.warehouseFk">
</vn-item-descriptor-popover>