<!--

    Copyright © 2016-2017 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.

-->
<md-card class="extension-form extension-http">
    <md-card-title>
        <md-card-title-text>
            <span translate class="md-headline">extension.configuration</span>
        </md-card-title-text>
    </md-card-title>
    <md-card-content>
        <v-accordion id="http-converter-configs-accordion" class="vAccordion--default">
            <v-pane id="http-converters-pane" expanded="isAdd">
                <v-pane-header>
                    {{ 'extension.converter-configurations' | translate }}
                </v-pane-header>
                <v-pane-content>
                    <div ng-if="converterConfigs.length === 0">
                        <span translate layout-align="center center" class="tb-prompt">extension.add-config-prompt</span>
                    </div>
                    <div ng-if="converterConfigs.length > 0">
                        <ol class="list-group">
                            <li class="list-group-item" ng-repeat="(configIndex, config) in converterConfigs">
                                <md-button aria-label="{{ 'action.remove' | translate }}"
                                           class="md-icon-button"
                                           ng-click="removeConverterConfig(config)"
                                           ng-hide="converterConfigs.length < 2"
                                >
                                    <ng-md-icon icon="close" aria-label="{{ 'action.remove' | translate }}"></ng-md-icon>
                                    <md-tooltip md-direction="top">
                                        {{ 'action.remove' | translate }}
                                    </md-tooltip>
                                </md-button>
                                <md-card>
                                    <md-card-content>

                                        <md-input-container class="md-block">
                                            <label translate>extension.converter-id</label>
                                            <input required name="httpConverterId_{{configIndex}}" ng-model="config.converterId">
                                            <div ng-messages="theForm['httpConverterId_' + configIndex].$error">
                                                <div translate ng-message="required">extension.converter-id-required</div>
                                            </div>
                                        </md-input-container>
                                        <md-input-container class="md-block">
                                            <label translate>extension.token</label>
                                            <input name="httpToken" ng-model="config.token" parse-to-null>
                                        </md-input-container>
                                        <v-accordion id="http-converters-accordion" class="vAccordion--default">
                                            <v-pane id="http-converters-pane">
                                                <v-pane-header>
                                                    {{ 'extension.converters' | translate }}
                                                </v-pane-header>
                                                <v-pane-content>
                                                    <div ng-if="config.converters.length === 0">
                                                        <span translate layout-align="center center" class="tb-prompt">extension.add-converter-prompt</span>
                                                    </div>
                                                    <div ng-if="config.converters.length > 0">
                                                        <ol class="list-group">
                                                            <li class="list-group-item"
                                                                ng-repeat="(converterIndex,converter) in config.converters"
                                                            >
                                                                <md-button aria-label="{{ 'action.remove' | translate }}"
                                                                           class="md-icon-button"
                                                                           ng-click="removeConverter(converter, config.converters)"
                                                                           ng-hide="config.converters.length < 2"
                                                                >
                                                                    <ng-md-icon icon="close" aria-label="{{ 'action.remove' | translate }}"></ng-md-icon>
                                                                    <md-tooltip md-direction="top">
                                                                        {{ 'action.remove' | translate }}
                                                                    </md-tooltip>
                                                                </md-button>
                                                                <md-card>
                                                                    <md-card-content>
                                                                        <md-input-container class="md-block">
                                                                            <label translate>extension.device-name-expression</label>
                                                                            <input required name="httpDeviceNameExp_{{configIndex}}{{converterIndex}}" ng-model="converter.deviceNameJsonExpression">
                                                                            <div ng-messages="theForm['httpDeviceNameExp_' + configIndex + converterIndex].$error">
                                                                                <div translate ng-message="required">extension.device-name-expression-required</div>
                                                                            </div>
                                                                        </md-input-container>
                                                                        <md-input-container class="md-block">
                                                                            <label translate>extension.device-type-expression</label>
                                                                            <input required name="httpDeviceTypeExp_{{configIndex}}{{converterIndex}}" ng-model="converter.deviceTypeJsonExpression">
                                                                            <div ng-messages="theForm['httpDeviceTypeExp_' + configIndex + converterIndex].$error">
                                                                                <div translate ng-message="required">extension.device-type-expression-required</div>
                                                                            </div>
                                                                        </md-input-container>

                                                                        <v-accordion id="http-attributes-accordion" class="vAccordion--default">
                                                                            <v-pane id="http-attributes-pane">
                                                                                <v-pane-header>
                                                                                    {{ 'extension.attributes' | translate }}
                                                                                </v-pane-header>
                                                                                <v-pane-content>
                                                                                    <div ng-if="converter.attributes.length > 0">
                                                                                        <ol class="list-group">
                                                                                            <li class="list-group-item" ng-repeat="(attributeIndex, attribute) in converter.attributes">
                                                                                                <md-button aria-label="{{ 'action.remove' | translate }}" class="md-icon-button" ng-click="removeAttribute(attribute, converter.attributes)">
                                                                                                    <ng-md-icon icon="close" aria-label="{{ 'action.remove' | translate }}"></ng-md-icon>
                                                                                                    <md-tooltip md-direction="top">
                                                                                                        {{ 'action.remove' | translate }}
                                                                                                    </md-tooltip>
                                                                                                </md-button>
                                                                                                <md-card>
                                                                                                    <md-card-content>
                                                                                                        <section flex layout="row">
                                                                                                            <md-input-container flex="60" class="md-block">
                                                                                                                <label translate>extension.key</label>
                                                                                                                <input required name="httpAttributeKey_{{configIndex}}{{converterIndex}}{{attributeIndex}}" ng-model="attribute.key">
                                                                                                                <div ng-messages="theForm['httpAttributeKey_' + configIndex + converterIndex + attributeIndex].$error">
                                                                                                                    <div translate ng-message="required">extension.required-key</div>
                                                                                                                </div>
                                                                                                            </md-input-container>
                                                                                                            <md-input-container flex="40" class="md-block">
                                                                                                                <label translate>extension.type</label>
                                                                                                                <md-select required name="httpAttributeType_{{configIndex}}{{converterIndex}}{{attributeIndex}}" ng-model="attribute.type">
                                                                                                                    <md-option ng-repeat="(attrType, attrTypeValue) in types.extensionValueType" ng-value="attrType">
                                                                                                                        {{attrTypeValue | translate}}
                                                                                                                    </md-option>
                                                                                                                </md-select>
                                                                                                                <div ng-messages="theForm['httpAttributeType_' + configIndex + converterIndex + attributeIndex].$error">
                                                                                                                    <div translate ng-message="required">extension.required-type</div>
                                                                                                                </div>
                                                                                                            </md-input-container>
                                                                                                        </section>
                                                                                                        <section flex layout="row">
                                                                                                            <md-input-container flex="60" class="md-block">
                                                                                                                <label translate>extension.value</label>
                                                                                                                <input required name="httpAttributeValue_{{configIndex}}{{converterIndex}}{{attributeIndex}}" ng-model="attribute.value">
                                                                                                                <div ng-messages="theForm['httpAttributeValue_' + configIndex + converterIndex + attributeIndex].$error">
                                                                                                                    <div translate ng-message="required">extension.required-value</div>
                                                                                                                </div>
                                                                                                            </md-input-container>


                                                                                                            <md-input-container flex="40" class="md-block">
                                                                                                                <label translate>extension.transformer</label>
                                                                                                                <md-select name="httpAttributeTransformer" ng-model="attribute.transformerType" ng-change="transformerTypeChange(attribute)">
                                                                                                                    <md-option ng-repeat="(transformerType, value) in types.extensionTransformerType" ng-value="transformerType">
                                                                                                                        {{value | translate}}
                                                                                                                    </md-option>
                                                                                                                </md-select>
                                                                                                            </md-input-container>
                                                                                                        </section>

                                                                                                        <div ng-if='attribute.transformerType == "custom"'>
                                                                                                            <div class="md-caption" style="padding-left: 3px; padding-bottom: 10px; color: rgba(0,0,0,0.57);" translate>extension.transformer-json</div>
                                                                                                            <div flex class="tb-extension-custom-transformer-panel">
                                                                                                                <div flex class="tb-extension-custom-transformer"
                                                                                                                     ui-ace="extensionCustomTransformerOptions"
                                                                                                                     ng-model="attribute.transformer"
                                                                                                                     name="attributeCustomTransformer_{{configIndex}}{{converterIndex}}{{attributeIndex}}"
                                                                                                                     ng-change='validateTransformer(attribute.transformer,"attributeCustomTransformer_" + configIndex + converterIndex + attributeIndex)'
                                                                                                                     required>
                                                                                                                </div>
                                                                                                            </div>
                                                                                                            <div class="tb-error-messages" ng-messages="theForm['attributeCustomTransformer_' + configIndex + converterIndex + attributeIndex].$error" role="alert">
                                                                                                                <div ng-message="required" class="tb-error-message" translate>extension.json-required</div>
                                                                                                                <div ng-message="transformerJSON" class="tb-error-message" translate>extension.json-parse</div>
                                                                                                            </div>
                                                                                                        </div>


                                                                                                    </md-card-content>
                                                                                                </md-card>
                                                                                            </li>
                                                                                        </ol>
                                                                                    </div>
                                                                                    <div flex layout="row" layout-align="start center">
                                                                                        <md-button class="md-primary md-raised"
                                                                                                   ng-click="addAttribute(converter.attributes)" aria-label="{{ 'action.add' | translate }}">
                                                                                            <md-tooltip md-direction="top">
                                                                                                {{ 'extension.add-attribute' | translate }}
                                                                                            </md-tooltip>
                                                                                            <md-icon class="material-icons">add</md-icon>
                                                                                            <span translate>action.add</span>
                                                                                        </md-button>
                                                                                    </div>
                                                                                </v-pane-content>
                                                                            </v-pane>
                                                                        </v-accordion>


                                                                        <v-accordion id="http-timeseries-accordion" class="vAccordion--default">
                                                                            <v-pane id="http-timeseries-pane">
                                                                                <v-pane-header>
                                                                                    {{ 'extension.timeseries' | translate }}
                                                                                </v-pane-header>
                                                                                <v-pane-content>
                                                                                    <div ng-if="converter.timeseries.length > 0">
                                                                                        <ol class="list-group">
                                                                                            <li class="list-group-item" ng-repeat="(timeseriesIndex, timeseries) in converter.timeseries">
                                                                                                <md-button aria-label="{{ 'action.remove' | translate }}" class="md-icon-button" ng-click="removeAttribute(timeseries, converter.timeseries)">
                                                                                                    <ng-md-icon icon="close" aria-label="{{ 'action.remove' | translate }}"></ng-md-icon>
                                                                                                    <md-tooltip md-direction="top">
                                                                                                        {{ 'action.remove' | translate }}
                                                                                                    </md-tooltip>
                                                                                                </md-button>
                                                                                                <md-card>
                                                                                                    <md-card-content>
                                                                                                        <section flex layout="row">
                                                                                                            <md-input-container flex="60" class="md-block">
                                                                                                                <label translate>extension.key</label>
                                                                                                                <input required name="httpTimeseriesKey_{{configIndex}}{{converterIndex}}{{timeseriesIndex}}" ng-model="timeseries.key">
                                                                                                                <div ng-messages="theForm['httpTimeseriesKey_' + configIndex + converterIndex + timeseriesIndex].$error">
                                                                                                                    <div translate ng-message="required">extension.required-key</div>
                                                                                                                </div>
                                                                                                            </md-input-container>
                                                                                                            <md-input-container flex="40" class="md-block">
                                                                                                                <label translate>extension.type</label>
                                                                                                                <md-select required name="httpTimeseriesType_{{configIndex}}{{converterIndex}}{{timeseriesIndex}}" ng-model="timeseries.type">
                                                                                                                    <md-option ng-repeat="(attrType, attrTypeValue) in types.extensionValueType" ng-value="attrType">
                                                                                                                        {{attrTypeValue | translate}}
                                                                                                                    </md-option>
                                                                                                                </md-select>
                                                                                                                <div ng-messages="theForm['httpTimeseriesType_' + configIndex + converterIndex + timeseriesIndex].$error">
                                                                                                                    <div translate ng-message="required">extension.required-type</div>
                                                                                                                </div>
                                                                                                            </md-input-container>
                                                                                                        </section>
                                                                                                        <section flex layout="row">
                                                                                                            <md-input-container flex="60" class="md-block">
                                                                                                                <label translate>extension.value</label>
                                                                                                                <input required name="httpTimeseriesValue_{{configIndex}}{{converterIndex}}{{timeseriesIndex}}" ng-model="timeseries.value">
                                                                                                                <div ng-messages="theForm['httpTimeseriesValue_' + configIndex + converterIndex + timeseriesIndex].$error">
                                                                                                                    <div translate ng-message="required">extension.required-value</div>
                                                                                                                </div>
                                                                                                            </md-input-container>


                                                                                                            <md-input-container flex="40" class="md-block">
                                                                                                                <label translate>extension.transformer</label>
                                                                                                                <md-select name="httpTimeseriesTransformer" ng-model="timeseries.transformerType" ng-change="transformerTypeChange(timeseries)">
                                                                                                                    <md-option ng-repeat="(transformerType, value) in types.extensionTransformerType" ng-value="transformerType">
                                                                                                                        {{value | translate}}
                                                                                                                    </md-option>
                                                                                                                </md-select>
                                                                                                            </md-input-container>
                                                                                                        </section>

                                                                                                        <div ng-if='timeseries.transformerType == "custom"'>
                                                                                                            <div class="md-caption" style="padding-left: 3px; padding-bottom: 10px; color: rgba(0,0,0,0.57);" translate>extension.transformer-json</div>
                                                                                                            <div flex class="tb-extension-custom-transformer-panel">
                                                                                                                <div flex class="tb-extension-custom-transformer"
                                                                                                                     ui-ace="extensionCustomTransformerOptions"
                                                                                                                     ng-model="timeseries.transformer"
                                                                                                                     name="timeseriesCustomTransformer_{{configIndex}}{{converterIndex}}{{timeseriesIndex}}"
                                                                                                                     ng-change='validateTransformer(timeseries.transformer,"timeseriesCustomTransformer_" + configIndex + converterIndex + timeseriesIndex)'
                                                                                                                     required>
                                                                                                                </div>
                                                                                                            </div>
                                                                                                            <div class="tb-error-messages" ng-messages="theForm['timeseriesCustomTransformer_' + configIndex + converterIndex + timeseriesIndex].$error" role="alert">
                                                                                                                <div ng-message="required" class="tb-error-message" translate>extension.json-required</div>
                                                                                                                <div ng-message="transformerJSON" class="tb-error-message" translate>extension.json-parse</div>
                                                                                                            </div>
                                                                                                        </div>


                                                                                                    </md-card-content>
                                                                                                </md-card>
                                                                                            </li>
                                                                                        </ol>
                                                                                    </div>
                                                                                    <div flex layout="row" layout-align="start center">
                                                                                        <md-button class="md-primary md-raised"
                                                                                                   ng-click="addAttribute(converter.timeseries)" aria-label="{{ 'action.add' | translate }}">
                                                                                            <md-tooltip md-direction="top">
                                                                                                {{ 'extension.add-timeseries' | translate }}
                                                                                            </md-tooltip>
                                                                                            <md-icon class="material-icons">add</md-icon>
                                                                                            <span translate>action.add</span>
                                                                                        </md-button>
                                                                                    </div>
                                                                                </v-pane-content>
                                                                            </v-pane>
                                                                        </v-accordion>
                                                                    </md-card-content>
                                                                </md-card>
                                                            </li>
                                                        </ol>
                                                    </div>
                                                    <div flex layout="row" layout-align="start center">
                                                        <md-button class="md-primary md-raised"
                                                                   ng-click="addConverter(config.converters)" aria-label="{{ 'action.add' | translate }}">
                                                            <md-tooltip md-direction="top">
                                                                {{ 'extension.add-converter' | translate }}
                                                            </md-tooltip>
                                                            <md-icon class="material-icons">add</md-icon>
                                                            <span translate>action.add</span>
                                                        </md-button>
                                                    </div>
                                                </v-pane-content>
                                            </v-pane>
                                        </v-accordion>

                                    </md-card-content>
                                </md-card>
                            </li>
                        </ol>
                    </div>
                    <div flex layout="row" layout-align="start center">
                        <md-button class="md-primary md-raised"
                                   ng-click="addConverterConfig()" aria-label="{{ 'action.add' | translate }}">
                            <md-tooltip md-direction="top">
                                {{ 'extension.add-config' | translate }}
                            </md-tooltip>
                            <md-icon class="material-icons">add</md-icon>
                            <span translate>action.add</span>
                        </md-button>
                    </div>
                </v-pane-content>
            </v-pane>
        </v-accordion>
        <!--{{config}}-->
    </md-card-content>
</md-card>
