<vn-watcher
    vn-id="watcher"
    data="$ctrl.dms">
</vn-watcher>
<vn-crud-model
    auto-load="true"
    url="DmsTypes"
    data="dmsTypes"
    order="name">
</vn-crud-model>
<vn-crud-model
    auto-load="true"
    url="Companies"
    data="companies"
    order="code">
</vn-crud-model>
<vn-crud-model
    auto-load="true"
    url="Warehouses"
    data="warehouses"
    order="name">
</vn-crud-model>
<form
    name="form"
    ng-submit="$ctrl.onSubmit()"
    class="vn-ma-md"
    enctype="multipart/form-data">
    <div class="vn-w-md">
        <vn-card class="vn-pa-lg">
            <vn-horizontal>
                <vn-autocomplete vn-one
                    label="Thermograph"
                    ng-model="$ctrl.dms.thermographId"
                    url="TravelThermographs"
                    where="{travelFk: null}"
                    show-field="thermographFk"
                    value-field="thermographFk">
                    <tpl-item>
                        {{thermographFk}}
                    </tpl-item>
                    <append>
                        <vn-icon-button
                            icon="add_circle"
                            vn-tooltip="New thermograph"
                            ng-click="$ctrl.onAddThermographClick($event)"
                            vn-acl="buyer" 
                            vn-acl-action="remove">
                        </vn-icon-button>
                    </append>
                </vn-autocomplete>
                <vn-textfield vn-one
                    label="State" 
                    ng-model="$ctrl.dms.state"
                    rule>
                </vn-textfield>
            </vn-horizontal>
            <vn-horizontal>
                <vn-textfield vn-one
                    label="Reference" 
                    ng-model="$ctrl.dms.reference"
                    rule>
                </vn-textfield>
                <vn-autocomplete vn-one
                    label="Type"
                    ng-model="$ctrl.dms.dmsTypeId"
                    data="dmsTypes"
                    show-field="name"
                    value-field="id">
                </vn-autocomplete>
            </vn-horizontal>
            <vn-horizontal>
                <vn-autocomplete vn-one
                    label="Company"
                    ng-model="$ctrl.dms.companyId"
                    data="companies"
                    show-field="code"
                    value-field="id">
                </vn-autocomplete>
                <vn-autocomplete vn-one
                    label="Warehouse"
                    ng-model="$ctrl.dms.warehouseId"
                    data="warehouses"
                    show-field="name"
                    value-field="id">
                </vn-autocomplete>
            </vn-horizontal>
            <vn-horizontal>
                <vn-input-file
                    vn-one 
                    label="File" 
                    ng-model="$ctrl.dms.files"
                    accept="{{$ctrl.allowedContentTypes}}"
                    multiple="true">
                    <append>
                        <vn-icon vn-none
                            color-marginal
                            title="{{$ctrl.contentTypesInfo}}"
                            icon="info">
                        </vn-icon>
                    </append>
                </vn-input-file>
            </vn-horizontal>
        </vn-card>
        <vn-button-bar>
            <vn-submit
                disabled="!watcher.dataChanged()"
                label="Upload">
            </vn-submit>
            <vn-button
                class="cancel"
                label="Cancel"
                ui-sref="travel.card.thermograph.index">
            </vn-button>
        </vn-button-bar>
    </div>
</form>
<!-- Create thermograph dialog -->
<vn-crud-model
    vn-id="modelsModel"
    url="Thermographs/getThermographModels"
    data="thermographModels">
</vn-crud-model>
<vn-crud-model
    vn-id="temperaturesModel"
    url="Temperatures"
    data="Temperatures"
    auto-load="true">
</vn-crud-model>
<vn-dialog class="edit" 
    vn-id="newThermographDialog"
    on-accept="$ctrl.onNewThermographAccept()"
    message="New thermograph">
    <tpl-body>
        <vn-horizontal>
            <vn-textfield
                vn-one
                required="true"
                label="Identifier"
                ng-model="$ctrl.newThermograph.thermographId"
                vn-focus>
            </vn-textfield>
            <vn-autocomplete 
                vn-one 
                required="true"
                label="Model"
                ng-model="$ctrl.newThermograph.model"
                data="thermographModels"
                show-field="value"
                value-field="value">
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal>
            <vn-autocomplete 
                vn-one 
                required="true"
                label="Warehouse"
                ng-model="$ctrl.newThermograph.warehouseId"
                url="Warehouses"
                show-field="name"
                value-field="id">
            </vn-autocomplete>
            <vn-autocomplete 
                vn-one 
                required="true"
                label="Temperature"
                ng-model="$ctrl.newThermograph.temperatureFk"
                data='Temperatures'
                show-field="name"
                value-field="code">
            </vn-autocomplete>
        </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>