<!--
  #%L
  thinkbig-ui-feed-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  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.
  #L%
  -->
<div layout="row" class="centered">

    <card-layout class="not-centered" card-css="layout-fill" style="max-width:980px;width:980px;overflow-x:inherit"
                 flex="initial">

        <header-section>
            <div layout="row" layout-align="space-between-center">
                <div class="card-title">{{::vm.cardTitle}}</div>

                <div class="md-subheader">{{::vm.stepNumber}} of 4</div>
            </div>
        </header-section>

        <body-section>
            <md-content>
                <ng-form name="propertiesForm" layout-fill>
                    <md-virtual-repeat-container browser-height browser-height-offset="400"
                                                 browser-height-scroll-y="false" style="width:100%;"
                                                 md-top-index="vm.topIndex">

                        <div md-virtual-repeat="property in vm.allProperties " layout="column" layout-fill>
                            <div ng-if="property.firstProperty" layout="row" class="layout-padding-left-16">
                                <a id="{{property.processor.id}}" name="{{property.processor.name}}"></a>
                                <md-subheader class="md-subhead left-aligned">{{property.processor.name}}</md-subheader>
                            </div>
                            <div layout="row" style="padding-left:30px;">
                                <md-input-container style="height:30px;margin-bottom:5px;"
                                                    class="md-block">
                                    <div class="md-checkbox-div-top" ng-repeat="v in [0]">
                                        <md-checkbox aria-label="Select" ng-model="property.selected" ng-click="vm.updateSize()"></md-checkbox>
                                    </div>
                                </md-input-container>
                                <div class="register-template-property md-padding" layout="column" layout-fill>
                                    <h3>{{property.key}}</h3>
                                    <span class="md-warn" ng-show="property.requiredEmpty">This is a required field.  You need to either allow the user to input data, or supply a default value.</span>

                                    <div>{{property.propertyDescriptor.description}}</div>

                                    <div ng-if="property.selected == true" style="padding-top:10px;" class="fade">
                                        <ng-form name="innerForm">

                                            <div ng-if="property.propertyDescriptor.allowableValues != null">
                                                <md-input-container md-no-float class="md-block">
                                                    <label>Default Value</label>
                                                    <md-select ng-model="property.value" name="property"
                                                               placeholder="Default Value">
                                                        <md-option
                                                                ng-repeat="allowableValue in property.propertyDescriptor.allowableValues  | orderBy:'value' track by allowableValue.value"
                                                                value="{{allowableValue.value}}">
                                                            {{allowableValue.displayName}}
                                                        </md-option>
                                                    </md-select>
                                                </md-input-container>
                                            </div>


                                            <div ng-if="property.propertyDescriptor.allowableValues == null && property.selected == true">


                                                <md-input-container style="height:30px;margin-bottom:5px;"
                                                                    class="md-block">
                                                    <label>Default Value (Supports Expressions)</label>
                                                    <input name="property"
                                                           placeholder="Enter a string or ${expression})" mentio
                                                           type="text"
                                                           mentio-id="property.mentioId" mentio-typed-text="typedTerm"
                                                           ng-model="property.value" size="100"/>
                                                </md-input-container>


                                                <mentio-menu style="display:none;"
                                                             mentio-for="property.mentioId"
                                                             mentio-trigger-char="'$'"
                                                             mentio-items="vm.expressionProperties"
                                                             mentio-template-url="js/register-template/processor-properties/expression-property-mentions.html"
                                                             mentio-search="vm.searchExpressionProperties(term)"
                                                             mentio-select="vm.getExpressionPropertyTextRaw(item)"></mentio-menu>

                                                <div class="hint" thinkbig-derived-expression ng-model="property.value"
                                                     style="margin-bottom:10px;"></div>

                                            </div>

                                            <div layout="row" layout-align="start-center">
                                                <md-input-container style="height:30px;margin-bottom:5px;"
                                                                    class="md-block">
                                                    <div class="md-checkbox-div-top" ng-repeat="v in [0]">
                                                        <md-checkbox aria-label="User can supply input"
                                                                     ng-model="property.userEditable">
                                                          Allow user input?
                                                        </md-checkbox>
                                                    </div>
                                                </md-input-container>

                                                <md-input-container
                                                        style="height:30px;margin-bottom:5px; padding-left:10px;"
                                                        class="md-block" ng-if="property.userEditable">
                                                    <label>Render as</label>
                                                    <md-select ng-model="property.renderType" name="renderType" ng-change="vm.onRenderTypeChange(property)"
                                                               placeholder="Render Input As...">
                                                        <md-option
                                                                ng-repeat="renderType in property.renderTypes  | orderBy:'label' track by renderType.type"
                                                                value="{{renderType.type}}">
                                                            {{renderType.label}}
                                                        </md-option>
                                                    </md-select>
                                                </md-input-container>
                                              <md-input-container
                                                  style="height:30px;margin-bottom:5px; padding-left:10px;"
                                                  class="md-block" ng-if="property.userEditable && property.renderType == 'checkbox-custom'">
                                                <label>True Value</label>
                                                <input name="property"
                                                       placeholder="true"
                                                       type="text"
                                                       ng-model="property.renderOptions['trueValue']" size="20"/>
                                                </md-input-container>

                                              <md-input-container
                                                  style="height:30px;margin-bottom:5px; padding-left:10px;"
                                                  class="md-block" ng-if="property.userEditable && property.renderType == 'checkbox-custom'">
                                                <label>False Value</label>
                                                <input name="property"
                                                       placeholder="false"
                                                       type="text"
                                                       ng-model="property.renderOptions['falseValue']" size="20"/>
                                              </md-input-container>

                                              <div style="padding-left:10px;">
                                                <md-chips md-on-add="vm.customSelectOptionChanged(property)" md-on-remove="vm.customSelectOptionChanged(property)" placeholder="Add Select Options"
                                                          ng-model="property.selectOptions"
                                                          ng-if="property.userEditable  && property.propertyDescriptor.identifiesControllerService == null && property.renderOptions['selectCustom'] == 'true'">
                                                </md-chips>
                                              </div>
                                            </div>
                                        </ng-form>

                                    </div>


                                </div>

                            </div>
                            <md-divider ng-if="!$last"></md-divider>
                        </div>


                    </md-virtual-repeat-container>


                    <thinkbig-step-buttons can-continue="vm.isValid && propertiesForm.$valid"
                                           step-index="{{::vm.stepIndex}}"></thinkbig-step-buttons>
                </ng-form>

            </md-content>

        </body-section>

    </card-layout>

    <card-layout offsetleftfromprevious top="8" card-css="layout-fill"
                 id="property-legend-{{::vm.processorPropertiesFieldName}}"
                 style="max-width:250px;width:250px;min-width:250px;" flex="initial">
        <header-section>
            <div class="card-title">Filter</div>
            <div class="hint">Showing {{vm.allProperties.length}} properties</div>
        </header-section>

        <body-section style="padding-left:25px;">
            <md-checkbox ng-model="vm.showOnlySelected" aria-label="Show Selected" ng-change="vm.onShowOnlySelected()">
                Show only selected
            </md-checkbox>
            <md-subheader class="md-primary left-aligned layout-padding-left">Jump to a group</md-subheader>

            <md-list md-virtual-repeat-container md-auto-shrink="true" md-auto-shrink-min="5" style="height:300px;"
                     layout-align="start center" layout="column">

                <md-list-item md-virtual-repeat="processor in vm.processors " layout="column" layout-fill
                              ng-click="vm.scrollToProcessor(processor)" style="height:48px">

                    {{processor.name}}
                    <md-divider ng-if="!$last"></md-divider>
                </md-list-item>
            </md-list>

        </body-section>

    </card-layout>
</div>
