<vn-crud-model 
    vn-id="model"
    url="/ticket/api/Sales"
    link="{ticketFk: $ctrl.$stateParams.id}"
    filter="::$ctrl.filter"
    data="components"
    auto-load="true">
</vn-crud-model>
<vn-vertical>
    <vn-card pad-large>
    <vn-vertical>
    <table class="vn-grid">
        <thead>
            <tr>
                <th number translate>Item</th>
                <th translate>Description</th>
                <th number translate>Quantity</th>
                <th translate>Serie</th>
                <th translate>Components</th>
                <th number translate>Import</th>
                <th number translate>Total import</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td number colspan="7">
                    <span translate>Base to commission</span> {{$ctrl.base() | currency: 'EUR':3}}
                </td>
            </tr>
        </tfoot>
        <tbody ng-repeat="sale in components track by sale.id">
            <tr>
                <td rowspan="{{::sale.components.length + 1}}" number>
                    <span 
                        ng-click="$ctrl.showDescriptor($event, sale.itemFk)"
                        class="link">
                        {{sale.itemFk | zeroFill:6}}
                    </span>
                </td>
                <td rowspan="{{::sale.components.length + 1}}">
                    <vn-fetched-tags
                        max-length="6"
                        item="::sale.item"
                        name="::sale.concept"
                        sub-name="::sale.item.subName">
                    </vn-fetched-tags>
                </td>
                <td rowspan="{{::sale.components.length + 1}}" number>
                    {{::sale.quantity}}
                </td>
            </tr>
            <tr 
                ng-repeat="component in sale.components track by component.componentFk">
                <td ng-class="::{first: $index == 0,last: $index == sale.components.length - 1}">
                    {{::component.componentRate.componentType.type}}
                </td>
                <td ng-class="::{first: $index == 0,last: $index == sale.components.length - 1}">
                    {{::component.componentRate.name}}
                </td>
                <td ng-class="::{first: $index == 0,last: $index == sale.components.length - 1}" number>
                    {{::component.value | currency: 'EUR':3}}
                </td>
                <td ng-class="::{first: $index == 0,last: $index == sale.components.length - 1}" number>
                    {{::sale.quantity * component.value | currency: 'EUR':3}}
                </td>
            </tr>    
            <tr ng-if="model.data.length === 0" class="list list-element">
                <td colspan="7" style="text-align: center" translate>No results</td>
            </tr>              
        </tbody>
    </table>
    </vn-vertical>
    </vn-card>
</vn-vertical>
<vn-item-descriptor-popover
    vn-id="descriptor"
    quicklinks="$ctrl.quicklinks">
</vn-item-descriptor-popover>