<!--

    Copyright © 2016-2020 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<form class="tb-multiple-input" name="multipleInputForm" ng-submit="vm.save()" novalidate autocomplete="off">
    <div style="padding: 0 8px;" ng-if="vm.entityDetected && vm.isAllParametersValid">
        <fieldset ng-repeat="source in vm.sources" ng-class="{'fields-group': vm.settings.showGroupTitle}">
            <legend class="group-title" ng-if="vm.settings.showGroupTitle">{{ vm.getGroupTitle(source.datasource) }}
            </legend>
            <div layout="row" layout-wrap
                 ng-class="{'vertical-alignment': vm.isVerticalAlignment || vm.changeAlignment}">
                <div ng-repeat="key in source.keys" ng-if="!key.settings.dataKeyHidden"
                     ng-style="{'width': (vm.isVerticalAlignment || vm.changeAlignment) ? '100%' : vm.inputWidthSettings}">
                    <div class="input-field" ng-if="(key.settings.dataKeyValueType === 'string')">
                        <md-input-container class="md-block">
                            <label>{{key.label}}</label>
                            <md-icon class="material-icons" ng-if="key.settings.icon">
                                {{key.settings.icon}}
                            </md-icon>
                            <input name="{{key.name}}"
                                   ng-disabled="(key.settings.isEditable === 'disabled') || key.settings.disabledOnCondition"
                                   ng-readonly="key.settings.isEditable === 'readonly'"
                                   ng-model="key.data.currentValue"
                                   ng-required="key.settings.required"
                                   type="text"
                                   md-select-on-focus
                                   ng-blur="vm.inputChanged(source,key)">
                            <div ng-messages="multipleInputForm[key.name].$error">
                                <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
                            </div>
                        </md-input-container>
                    </div>
                    <div class="input-field" ng-if="(key.settings.dataKeyValueType === 'double')">
                        <md-input-container class="md-block">
                            <label>{{key.label}}</label>
                            <md-icon class="material-icons" ng-if="key.settings.icon">
                                {{key.settings.icon}}
                            </md-icon>
                            <input name="{{key.name}}"
                                   ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
                                   ng-readonly="key.settings.isEditable === 'readonly'"
                                   ng-model="key.data.currentValue"
                                   ng-required="key.settings.required"
                                   type="number"
                                   step="key.settings.step"
                                   md-select-on-focus
                                   ng-blur="vm.inputChanged(source,key)">
                            <div ng-messages="multipleInputForm[key.name].$error">
                                <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
                            </div>
                        </md-input-container>
                    </div>
                    <div class="input-field" ng-if="(key.settings.dataKeyValueType === 'integer')">
                        <md-input-container class="md-block">
                            <label>{{key.label}}</label>
                            <md-icon class="material-icons" ng-if="key.settings.icon">
                                {{key.settings.icon}}
                            </md-icon>
                            <input name="{{key.name}}"
                                   ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
                                   ng-readonly="key.settings.isEditable === 'readonly'"
                                   ng-model="key.data.currentValue"
                                   ng-required="key.settings.required"
                                   type="number"
                                   step="key.settings.step"
                                   md-select-on-focus
                                   ng-pattern="/^-?[0-9]+$/"
                                   ng-blur="vm.inputChanged(source,key)">
                            <div ng-messages="multipleInputForm[key.name].$error">
                                <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
                                <div translate ng-message="pattern">value.invalid-integer-value</div>
                            </div>
                        </md-input-container>
                    </div>
                    <div class="input-field md-block" ng-if="(key.settings.dataKeyValueType === 'booleanCheckbox')">
                        <md-checkbox name="{{key.name}}"
                                     ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
                                     ng-model="key.data.currentValue"
                                     ng-change="vm.inputChanged(source,key)">
                            {{key.label}}
                        </md-checkbox>
                    </div>
                    <div class="input-field md-block" ng-if="(key.settings.dataKeyValueType === 'booleanSwitch')">
                        <md-switch name="{{key.name}}"
                                   ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
                                   ng-model="key.data.currentValue"
                                   ng-change="vm.inputChanged(source,key)"
                                   aria-label="{{key.label}}"
                                   md-invert>
                            {{key.label}}
                        </md-switch>
                    </div>
                    <div ng-if="(key.settings.dataKeyValueType === 'dateTime') ||
                                (key.settings.dataKeyValueType === 'date') ||
                                (key.settings.dataKeyValueType === 'time')"
                         class="md-block input-field date-time-input" layout="column">
                        <label class="date-time-input__label">{{key.label}}</label>
                        <div layout="row" ng-class="{'vertically-aligned': vm.smallWidthContainer}">
                            <mdp-date-picker name="{{key.name + 'Date'}}"
                                             ng-if="key.settings.dataKeyValueType !== 'time'"
                                             mdp-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
                                             ng-model="key.data.currentValue"
                                             ng-change="vm.inputChanged(source,key)"
                                             mdp-placeholder="{{ 'widgets.input-widgets.date' | translate }}">
                                <div ng-messages="multipleInputForm[key.name].$error">
                                    <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
                                </div>
                            </mdp-date-picker>
                            <mdp-time-picker name="{{key.name + 'Time'}}"
                                             ng-if="key.settings.dataKeyValueType !== 'date'"
                                             mdp-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
                                             ng-model="key.data.currentValue"
                                             ng-change="vm.inputChanged(source,key)"
                                             mdp-placeholder="{{ 'widgets.input-widgets.time' | translate }}"
                                             mdp-auto-switch="true">
                                <div ng-messages="multipleInputForm[key.name].$error">
                                    <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
                                </div>
                            </mdp-time-picker>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
        <div class="md-padding" layout="row" layout-align="end center"
             ng-if="vm.entityDetected && vm.settings.showActionButtons">
            <md-button class="md-primary" ng-click="vm.discardAll()" style="max-height: 50px; margin-right:20px;"
                       ng-disabled="!multipleInputForm.$dirty">
                {{ 'action.undo' | translate }}
            </md-button>
            <md-button class="md-raised md-primary" type="submit" value="Submit"
                       style="max-height: 50px; margin-right:20px;"
                       ng-disabled="!multipleInputForm.$dirty || multipleInputForm.$invalid"
                       ng-click="vm.isFocused = false">
                {{ 'action.save' | translate }}
            </md-button>
        </div>
    </div>
    <div class="tb-multiple-input__errors" layout="column" layout-align="center center" style="height: 100%;"
         ng-if="!vm.entityDetected || !vm.isAllParametersValid">
        <div style="text-align: center; font-size: 18px; color: #a0a0a0;" ng-hide="vm.entityDetected">
            {{ 'widgets.input-widgets.no-entity-selected' | translate }}
        </div>
        <div style="text-align: center; font-size: 18px; color: #a0a0a0;"
             ng-show="vm.entityDetected && !vm.isAllParametersValid">
            {{ 'widgets.input-widgets.not-allowed-entity' | translate }}
        </div>
    </div>
</form>
