<vn-crud-model 
    vn-id="model"
    url="/ticket/api/TicketServices"
    link="{ticketFk: $ctrl.$stateParams.id}"
    data="$ctrl.services"
    auto-load="true">
</vn-crud-model>
<vn-watcher
    vn-id="watcher"
    data="$ctrl.services">
</vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" compact>
    <vn-card pad-large>
        <vn-one>
            <vn-horizontal ng-repeat="service in $ctrl.services track by $index">
                <vn-autocomplete vn-one
                    vn-focus
                    url="/api/TicketServiceTypes"
                    label="Description"
                    show-field="name"
                    value-field="name"
                    field="service.description">
                </vn-autocomplete>
                <vn-icon-button vn-auto margin-medium-v
                    icon="add_circle"
                    vn-tooltip="New service type"
                    ng-click="$ctrl.newServiceTypeDialog($index)"
                    vn-acl="administrative">
                </vn-icon-button>
                <vn-input-number vn-one min="0" step="1" 
                    label="Quantity"
                    model="service.quantity"
                    rule="TicketService.quantity">
                </vn-input-number>
                <vn-input-number vn-one
                    label="Price"
                    model="service.price" step="0.01">
                </vn-input-number>
                <vn-autocomplete vn-one
                    url="/api/TaxClasses"
                    label="Tax class"
                    show-field="description"
                    value-field="id"
                    field="service.taxClassFk">
                </vn-autocomplete>
                <vn-auto pad-medium-top>
                    <vn-icon-button
                        pointer
                        vn-tooltip="Remove service"
                        icon="delete"
                        ng-click="model.remove($index)">
                    </vn-icon-button>  
                </vn-one>
            </vn-horizontal>
        </vn-one>
        <vn-one>
            <vn-icon-button
                vn-tooltip="Add service"
                vn-bind="+"
                icon="add_circle"
                ng-click="$ctrl.add()">
            </vn-icon-button>
        </vn-one>
    </vn-card>
    <vn-button-bar>
        <vn-submit label="Save"></vn-submit>
    </vn-button-bar>
</form>

<!-- Create service type dialog -->
<vn-dialog class="edit" 
    vn-id="createServiceTypeDialog"
    on-open="$ctrl.onNewServiceTypeOpen()"
    on-response="$ctrl.onNewServiceTypeResponse(response)">
    <tpl-body>
        <h5 pad-small-v translate>New service type</h5>
        <vn-horizontal>
            <vn-textfield vn-one
                label="Description"
                model="$ctrl.newServiceType.name">
            </vn-textfield>
        </vn-horizontal>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="CANCEL" translate-attr="{value: 'Cancel'}"/>
        <button response="ACCEPT" translate>Create</button>
    </tpl-buttons>
</vn-dialog>