<div>

  <div id='valuePlaceHolder'></div>

  <script type="text/ng-template" id="ShortText.html">
    <div class="form-input">
      <input ng-disabled="currentEntity.isReadOnly"
             ng-required="currentEntity.required && !currentEntity.isReadOnly"
             ng-model="context.currentPropValues[0].value"
             name="{{currentEntity.name}}"
             ng-maxlength="currentEntity.validationRule.charCountMax"
             ng-minlength="currentEntity.validationRule.charCountMin"
             ng-pattern="currentEntity.validationRule.regExp"
             placeholder="Please enter short text"
             type="text">
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="LongText.html">
    <div class="form-input">
      <textarea ng-disabled="currentEntity.isReadOnly"
                ng-required="currentEntity.required && !currentEntity.isReadOnly"
                ng-model="context.currentPropValues[0].value"
                name="{{currentEntity.name}}"
                ng-maxlength="currentEntity.validationRule.charCountMax"
                ng-minlength="currentEntity.validationRule.charCountMin"
                ng-pattern="currentEntity.validationRule.regExp"
                placeholder="Please enter long text"></textarea>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="Html.html">
    <div class="form-input">
      <ui-codemirror ng-required="currentEntity.required && !currentEntity.isReadOnly"
                     ng-readonly="currentEntity.isReadOnly"
                     ng-model="context.currentPropValues[0].value"
                     ui-codemirror-opts="editorOptions"></ui-codemirror>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="Number.html">
    <!--<a href="#" editable-number="val.value">{{val.value || "N/A" }}</a>-->
    <div class="form-input">
      <input smart-float num-type="float" fraction="4"
             ng-disabled="currentEntity.isReadOnly"
             ng-required="currentEntity.required && !currentEntity.isReadOnly"
             ng-model="context.currentPropValues[0].value"
             name="{{currentEntity.name}}"
             ng-class="{'error': context.currentEntity.valueType.$error.pattern}"
             placeholder="Please enter number">
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="Integer.html">
    <div class="form-input __number">
      <input smart-float num-type="integer"
             ng-disabled="currentEntity.isReadOnly"
             ng-required="currentEntity.required && !currentEntity.isReadOnly"
             ng-model="context.currentPropValues[0].value"
             name="{{currentEntity.name}}"
             ng-class="{'error': context.currentEntity.valueType.$error.pattern}"
             placeholder="Please enter integer"
             type="text">
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="DateTime.html">
    <div class="form-input __calendar">
      <input is-open="datepickers.DateTime"
             datepicker-popup
             ng-required="currentEntity.required && !currentEntity.isReadOnly"
             placeholder="{{ 'platform.genericValueInput.placeholders.date-time' | translate}}"
             ng-model="context.currentPropValues[0].value"
             name="{{currentEntity.name}}">
      <button ng-click="open($event, 'DateTime')" type="button" class="btn">
        <i class="btn-ico fa fa-calendar"></i>
      </button>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="Boolean.html">
    <label class="form-label __switch">
      <input type="checkbox"
             ng-model="context.currentPropValues[0].value"
             name="{{currentEntity.name}}">
      <span class="switch"></span>
    </label>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="Measure.html">
    <div class="columns">
      <div class="column" style="width:70%;height:30px;">
        <div class="form-input" style="margin-bottom:15px;">
          <input smart-float num-type="float" fraction="6"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required && !currentEntity.isReadOnly"
                 ng-model="context.currentPropValues[0].value"
                 name="{{currentEntity.name}}"
                 ng-class="{'error': context.currentEntity.valueType.$error.pattern}"
                 placeholder="Please enter number">
        </div>
      </div>
      <div class="column" style="width:25%;margin-left:5%;">
        <div class="form-input" style="margin-bottom:15px;">
          <ui-select ng-model="context.currentPropValues[0].unitOfMeasureId"
                     ng-disabled="currentEntity.isReadOnly"
                     ng-required="currentEntity.required"
                     name="{{currentEntity.name}}">
            <ui-select-match allow-clear="true">{{$select.selected.symbol}}</ui-select-match>
            <ui-select-choices repeat="x.id as x in context.unitOfMeasures | filter: $select.search" refresh="loadUnitsOfMeasure($select, currentEntity.measureId)" refresh-delay="200">
              <span ng-bind-html="x.symbol | highlight: $select.search"></span>
            </ui-select-choices>
          </ui-select>
        </div>
      </div>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="ShortText-multivalue.html">
    <tags-input ng-model="context.currentPropValues"
                ng-disabled="currentEntity.isReadOnly"
                ng-required="currentEntity.required && !currentEntity.isReadOnly"
                name="{{currentEntity.name}}"
                display-property="value"
                placeholder="Add value"
                max-length="{{currentEntity.validationRule.charCountMax}}"
                min-length="{{currentEntity.validationRule.charCountMin}}"
                allowed-tags-pattern="{{currentEntity.validationRule.regExp}}"
                on-tag-added="tagsAdded($tag, currentEntity.name)"
                on-tag-removed="tagsDeleted($tag, currentEntity.name, currentEntity.required)"
                on-invalid-tag="addederror($tag, currentEntity.name, currentEntity.validationRule.charCountMin, currentEntity.validationRule.charCountMax, currentEntity.validationRule.regExp)">
    </tags-input>
    <va-property-messages></va-property-messages>
  </script>
  <script type="text/ng-template" id="LongText-multivalue.html">
    <div class="form-group" ng-repeat="val in context.currentPropValues track by $index">
      <div class="form-input">
        <textarea ng-disabled="currentEntity.isReadOnly"
                  ng-required="currentEntity.required && !currentEntity.isReadOnly"
                  ng-model="val.value"
                  name="{{currentEntity.name}}"
                  ng-maxlength="currentEntity.validationRule.charCountMax"
                  ng-minlength="currentEntity.validationRule.charCountMin"
                  ng-pattern="currentEntity.validationRule.regExp" />
        <va-property-messages></va-property-messages>
        <a ng-if="!currentEntity.isReadOnly" ng-click="context.currentPropValues.splice(context.currentPropValues.indexOf(val),1)">remove</a>
      </div>
      <a ng-if="!currentEntity.isReadOnly" ng-click="context.currentPropValues.push({value:''})" style="cursor:pointer;">add value</a>
    </div>
  </script>
  <script type="text/ng-template" id="Integer-multivalue.html">
    <tags-input ng-model="context.currentPropValues"
                ng-disabled="currentEntity.isReadOnly"
                min-tags="{{(currentEntity.required && !currentEntity.isReadOnly) ? 1 : undefined}}"
                tags-number num-type="integer"
                min-length="1"
                name="{{currentEntity.name}}"
                display-property="value"
                placeholder="Add number">
    </tags-input>
    <va-property-messages></va-property-messages>
  </script>
  <script type="text/ng-template" id="Number-multivalue.html">
    <tags-input ng-model="context.currentPropValues"
                ng-disabled="currentEntity.isReadOnly"
                min-tags="{{(currentEntity.required && !currentEntity.isReadOnly) ? 1 : undefined}}"
                tags-number num-type="float"
                min-length="1"
                name="{{currentEntity.name}}"
                display-property="value"
                placeholder="Add number">
    </tags-input>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="ShortText-dictionary.html">
    <div class="form-input">
      <ui-select ng-model="context.currentPropValues[0]"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required"
                 name="{{currentEntity.name}}">
        <ui-select-match allow-clear="true" placeholder="{{ 'platform.genericValueInput.placeholders.short-text-dictionary' | translate }}">{{$select.selected.value}}</ui-select-match>
        <ui-select-choices repeat="propValue in context.allDictionaryValues | filter: {value: $select.search} | orderBy: 'value'" refresh="loadDictionaryValues($select)" refresh-delay="200" when-scrolled="loadNextDictionaryValues($select)">
          <span ng-bind-html="propValue.value | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <va-property-messages></va-property-messages>
  </script>
  <script type="text/ng-template" id="Number-dictionary.html">
    <div class="form-input">
      <ui-select ng-model="context.currentPropValues[0]"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required"
                 name="{{currentEntity.name}}">
        <ui-select-match allow-clear="true" placeholder="{{ 'platform.genericValueInput.placeholders.number' | translate }}">{{$select.selected.value}}</ui-select-match>
        <ui-select-choices repeat="propValue in context.allDictionaryValues | filter: {value: $select.search} | orderBy: 'value'" refresh="loadDictionaryValues($select)" refresh-delay="200" when-scrolled="loadNextDictionaryValues($select)">
          <span ng-bind-html="propValue.value | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <va-property-messages></va-property-messages>
  </script>


  <script type="text/ng-template" id="ShortText-dictionary-multivalue.html">
    <div class="form-input">
      <ui-select multiple
                 sortable="true"
                 ng-model="context.currentPropValues"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required"
                 name="{{currentEntity.name}}">
        <ui-select-match placeholder="{{ 'platform.genericValueInput.placeholders.short-text-dictionary-multivalue' | translate }}">{{$item.value}}</ui-select-match>
        <ui-select-choices repeat="propValue in context.allDictionaryValues | filter: {value: $select.search} | orderBy: 'value'" refresh="loadDictionaryValues($select)" refresh-delay="200" when-scrolled="loadNextDictionaryValues($select)">
          <span ng-bind-html="propValue.value | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <va-property-messages></va-property-messages>
  </script>
  <script type="text/ng-template" id="Number-dictionary-multivalue.html">
    <div class="form-input">
      <ui-select multiple
                 sortable="true"
                 ng-model="context.currentPropValues"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required"
                 name="{{currentEntity.name}}">
        <ui-select-match placeholder="{{ 'platform.genericValueInput.placeholders.number-multivalue' | translate }}">{{$item.value}}</ui-select-match>
        <ui-select-choices repeat="propValue in context.allDictionaryValues | filter: {value: $select.search} | orderBy: 'value'" refresh="loadDictionaryValues($select)" refresh-delay="200" when-scrolled="loadNextDictionaryValues($select)">
          <span ng-bind-html="propValue.value | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="ShortText-multilang.html">
    <div class="form-group" ng-repeat="(language, langValuesGroup) in context.langValuesMap" ng-if="isLanguageVisible(language)">
      <div class="vc-catalog form-input __langs">
        <label class="lang-code">{{language}}</label>
        <input ng-disabled="currentEntity.isReadOnly"
               ng-required="currentEntity.required && !currentEntity.isReadOnly"
               ng-model="langValuesGroup.currentPropValues[0].value"
               name="{{currentEntity.name}}"
               placeholder="Please enter value"
               type="text"
               ng-maxlength="currentEntity.validationRule.charCountMax"
               ng-minlength="currentEntity.validationRule.charCountMin"
               ng-pattern="currentEntity.validationRule.regExp"
               class="vc-catalog">
        <va-property-messages></va-property-messages>
      </div>
    </div>
  </script>

  <script type="text/ng-template" id="LongText-multilang.html">
    <div class="form-group" ng-repeat="(language, langValuesGroup) in context.langValuesMap" ng-if="isLanguageVisible(language)">
      <div class="form-input __langs">
        <label>{{language}}</label>
        <textarea ng-disabled="currentEntity.isReadOnly"
                  ng-required="currentEntity.required && !currentEntity.isReadOnly"
                  ng-model="langValuesGroup.currentPropValues[0].value"
                  name="{{currentEntity.name}}"
                  ng-maxlength="currentEntity.validationRule.charCountMax"
                  ng-minlength="currentEntity.validationRule.charCountMin"
                  ng-pattern="currentEntity.validationRule.regExp" />
        <va-property-messages></va-property-messages>
      </div>
    </div>
  </script>

  <script type="text/ng-template" id="Html-multilang.html">
    <div class="form-group" ng-repeat="(language, langValuesGroup) in context.langValuesMap" ng-if="isLanguageVisible(language)">
      <div class="form-input __langs">
        <label>{{language}}</label>
        <ui-codemirror ng-required="currentEntity.required && !currentEntity.isReadOnly"
                       ng-readonly="currentEntity.isReadOnly"
                       ng-model="langValuesGroup.currentPropValues[0].value"
                       ui-codemirror-opts="editorOptions"></ui-codemirror>
        <va-property-messages></va-property-messages>
      </div>
    </div>
  </script>

  <script type="text/ng-template" id="Number-multilang.html">
    <div class="form-group" ng-repeat="(language, langValuesGroup) in context.langValuesMap" ng-if="isLanguageVisible(language)">
      <div class="form-input __langs __number">
        <input ng-disabled="currentEntity.isReadOnly"
               ng-required="currentEntity.required && !currentEntity.isReadOnly"
               ng-model="langValuesGroup.currentPropValues[0].value"
               name="{{currentEntity.name}}"
               class="vc-catalog"
               placeholder="Please enter number value"
               type="text">
        <va-property-messages></va-property-messages>
      </div>
    </div>
  </script>

  <script type="text/ng-template" id="ShortText-multivalue-multilang.html">
    <div class="form-group" ng-repeat="(language, langValuesGroup) in context.langValuesMap" ng-if="isLanguageVisible(language)">
      <div class="vc-catalog form-input __langs">
        <label class="lang-code">{{language}}</label>
        <tags-input ng-model="langValuesGroup.currentPropValues"
                    ng-disabled="currentEntity.isReadOnly"
                    ng-required="currentEntity.required && !currentEntity.isReadOnly"
                    name="{{currentEntity.name}}"
                    display-property="value"
                    placeholder="Add value"
                    ng-maxlength="currentEntity.validationRule.charCountMax"
                    ng-minlength="currentEntity.validationRule.charCountMin"
                    allowed-tags-pattern="{{currentEntity.validationRule.regExp}}"
                    on-tag-added="tagsAdded($tag, currentEntity.name)"
                    on-tag-removed="tagsDeleted($tag, currentEntity.name, currentEntity.required)"
                    on-invalid-tag="addederror($tag, currentEntity.name, currentEntity.validationRule.charCountMin, currentEntity.validationRule.charCountMax, currentEntity.validationRule.regExp)">
        </tags-input>
        <va-property-messages></va-property-messages>
      </div>
    </div>
  </script>
  <script type="text/ng-template" id="LongText-multivalue-multilang.html">
    <div class="form-group" ng-repeat="(language, langValuesGroup) in context.langValuesMap" ng-if="isLanguageVisible(language)">
      <div class="vc-catalog form-input __langs" ng-repeat="val in langValuesGroup.currentPropValues track by $index">
        <label class="lang-code">{{language}}</label>
        <textarea ng-disabled="currentEntity.isReadOnly"
                  ng-required="currentEntity.required && !currentEntity.isReadOnly"
                  ng-model="val.value"
                  name="{{currentEntity.name}}"
                  ng-maxlength="currentEntity.validationRule.charCountMax"
                  ng-minlength="currentEntity.validationRule.charCountMin"
                  ng-pattern="currentEntity.validationRule.regExp" />
        <va-property-messages></va-property-messages>
        <a ng-if="!currentEntity.isReadOnly" ng-click="langValuesGroup.currentPropValues.splice(langValuesGroup.currentPropValues.indexOf(val),1)">remove</a>
        <a ng-if="!currentEntity.isReadOnly" ng-click="langValuesGroup.currentPropValues.push({value:'', languageCode:language})" style="cursor:pointer;">add value</a>
      </div>
    </div>
  </script>
  <script type="text/ng-template" id="Number-multivalue-multilang.html">
    <div class="form-group" ng-repeat="(language, langValuesGroup) in context.langValuesMap" ng-if="isLanguageVisible(language)">
      <div class="vc-catalog form-input __langs">
        <label class="lang-code">{{language}}</label>
        <tags-input ng-model="langValuesGroup.currentPropValues"
                    ng-disabled="currentEntity.isReadOnly"
                    min-tags="{{(currentEntity.required && !currentEntity.isReadOnly) ? 1 : undefined}}"
                    allowed-tags-pattern="^[-]?[0-9]+[\.]?[0-9]*$"
                    min-length="1"
                    name="{{currentEntity.name}}"
                    display-property="value"
                    placeholder="Add number">
        </tags-input>
      </div>
      <va-property-messages></va-property-messages>
    </div>
  </script>
  <script type="text/ng-template" id="ShortText-dictionary-multilang.html">
    <div class="form-input">
      <ui-select ng-model="context.currentPropValues[0]"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required"
                 name="{{currentEntity.name}}">
        <ui-select-match allow-clear="true" placeholder="{{ 'platform.genericValueInput.placeholders.short-text-dictionary-multilang' | translate }}">{{$select.selected.value}}</ui-select-match>
        <ui-select-choices repeat="propValue in context.allDictionaryValues | filter: {value: $select.search} | orderBy: 'value'" refresh="loadDictionaryValues($select)" refresh-delay="200" when-scrolled="loadNextDictionaryValues($select)">
          <span ng-bind-html="propValue.value | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="Number-dictionary-multilang.html">
    <div class="form-input">
      <ui-select ng-model="context.currentPropValues[0]"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required"
                 name="{{currentEntity.name}}">
        <ui-select-match allow-clear="true" placeholder="{{ 'platform.genericValueInput.placeholders.number' | translate }}">{{$select.selected.value}}</ui-select-match>
        <ui-select-choices repeat="propValue in context.allDictionaryValues | filter: {value: $select.search} | orderBy: 'value'" refresh="loadDictionaryValues($select)" refresh-delay="200" when-scrolled="loadNextDictionaryValues($select)">
          <span ng-bind-html="propValue.value | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="LongText-dictionary-multivalue-multilang.html">
    <div class="form-input">
      <ui-select multiple
                 sortable="true"
                 ng-model="context.currentPropValues"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required"
                 name="{{currentEntity.name}}">
        <ui-select-match placeholder="{{ 'platform.genericValueInput.placeholders.long-text-dictionary-multivalue-multilang' | translate }}">{{$item.value}}</ui-select-match>
        <ui-select-choices repeat="propValue in context.allDictionaryValues | filter: {value: $select.search} | orderBy: 'value'" refresh="loadDictionaryValues($select)" refresh-delay="200" when-scrolled="loadNextDictionaryValues($select)">
          <span ng-bind-html="propValue.value | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="ShortText-dictionary-multivalue-multilang.html">
    <div class="form-input">
      <ui-select multiple
                 sortable="true"
                 ng-model="context.currentPropValues"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required"
                 name="{{currentEntity.name}}">
        <ui-select-match placeholder="{{ 'platform.genericValueInput.placeholders.short-text-dictionary-multivalue-multilang' | translate }}">{{$item.value}}</ui-select-match>
        <ui-select-choices repeat="propValue in context.allDictionaryValues | filter: {value: $select.search} | orderBy: 'value'" refresh="loadDictionaryValues($select)" refresh-delay="200" when-scrolled="loadNextDictionaryValues($select)">
          <span ng-bind-html="propValue.value | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="Number-dictionary-multivalue-multilang.html">
    <div class="form-input">
      <ui-select multiple
                 sortable="true"
                 ng-model="context.currentPropValues"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required"
                 name="{{currentEntity.name}}">
        <ui-select-match placeholder="{{ 'platform.genericValueInput.placeholders.number-multivalue' | translate }}">{{$item.value}}</ui-select-match>
        <ui-select-choices repeat="propValue in context.allDictionaryValues | filter: {value: $select.search} | orderBy: 'value'" refresh="loadDictionaryValues($select)" refresh-delay="200" when-scrolled="loadNextDictionaryValues($select)">
          <span ng-bind-html="propValue.value | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <va-property-messages></va-property-messages>
  </script>
  <!--GeoPoint-->
  <script type="text/ng-template" id="GeoPoint.html">
    <div class="form-input">
      <input ng-disabled="currentEntity.isReadOnly"
             ng-required="currentEntity.required && !currentEntity.isReadOnly"
             ng-model="context.currentPropValues[0].value"
             name="{{currentEntity.name}}"
             ng-class="{'error': context.currentEntity.valueType.$error.pattern, 'error': propertiesForm.name.$valid }"
             placeholder="{{ 'catalog.properties.geoPoint.placeholder' | translate }}"
             ng-pattern="currentEntity.validationRule.regExp"
             type="text">
      <div class="list-descr">{{ 'catalog.properties.geoPoint.description' | translate }}</div>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="GeoPoint-multivalue.html">
    <tags-input ng-model="context.currentPropValues"
                ng-disabled="currentEntity.isReadOnly"
                ng-required="currentEntity.required && !currentEntity.isReadOnly"
                name="{{currentEntity.name}}"
                display-property="value"
                placeholder="Add geo point"
                allowed-tags-pattern="{{currentEntity.validationRule.regExp}}"
                on-tag-added="tagsAdded($tag, currentEntity.name)"
                on-tag-removed="tagsDeleted($tag, currentEntity.name, currentEntity.required)"
                on-invalid-tag="addederror($tag, currentEntity.name, currentEntity.validationRule.charCountMin, currentEntity.validationRule.charCountMax, currentEntity.validationRule.regExp)">
    </tags-input>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="Color.html">
    <div class="column" style="width: 55%; height: 50px">
      <div class="form-input">
        <input type="text"
               ng-disabled="currentEntity.isReadOnly"
               ng-required="currentEntity.required && !currentEntity.isReadOnly"
               ng-model="context.currentPropValues[0].value"
               name="{{currentEntity.name}}_value"
               ng-maxlength="currentEntity.validationRule.charCountMax"
               ng-minlength="currentEntity.validationRule.charCountMin"
               ng-pattern="currentEntity.validationRule.regExp"
               placeholder="{{ 'catalog.properties.color.name' | translate }}" />
      </div>
    </div>
    <div class="column" style="width: 40%; height: 50px; margin-left: 5%; ">
      <div class="form-input">
        <input type="color"
               id="color_input_{{::$id}}"
               class="hidden-color-picker"
               ng-model="context.currentPropValues[0].colorCode" />
        <input type="text"
               ng-disabled="currentEntity.isReadOnly"
               ng-required="currentEntity.required && !currentEntity.isReadOnly"
               ng-model="context.currentPropValues[0].colorCode"
               name="{{currentEntity.name}}_colorCode"
               ng-maxlength="currentEntity.validationRule.charCountMax"
               ng-minlength="currentEntity.validationRule.charCountMin"
               ng-pattern="currentEntity.validationRule.regExp"
               placeholder="{{ 'catalog.properties.color.code' | translate }}" />
        <button class="btn" type="button" data-color-input-id="color_input_{{::$id}}" ng-click="openColorPicker($event)">
          <span class="btn-ico fa fa-square" ng-style="{ 'color': context.currentPropValues[0].colorCode }"></span>
        </button>
      </div>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="Color-multilang.html">
    <div ng-repeat="(language, langValuesGroup) in context.langValuesMap" ng-if="isLanguageVisible(language)">
      <div class="column" style="width: 55%; height: 50px">
        <div class="vc-catalog form-input __langs">
          <input type="text"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required && !currentEntity.isReadOnly"
                 ng-model="langValuesGroup.currentPropValues[0].value"
                 name="{{currentEntity.name}}_{{language}}_value"
                 ng-maxlength="currentEntity.validationRule.charCountMax"
                 ng-minlength="currentEntity.validationRule.charCountMin"
                 ng-pattern="currentEntity.validationRule.regExp"
                 placeholder="{{ 'catalog.properties.color.name' | translate }}" />
          <label class="lang-code">{{language}}</label>
        </div>
      </div>
      <div class="column" style="width: 40%; height: 50px; margin-left: 5%; ">
        <div class="form-input">
          <input type="color"
                 id="color_input_{{::$id}}"
                 class="hidden-color-picker"
                 ng-model="langValuesGroup.currentPropValues[0].colorCode" />
          <input type="text"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required && !currentEntity.isReadOnly"
                 ng-model="langValuesGroup.currentPropValues[0].colorCode"
                 name="{{currentEntity.name}}_{{language}}_colorCode"
                 ng-maxlength="currentEntity.validationRule.charCountMax"
                 ng-minlength="currentEntity.validationRule.charCountMin"
                 ng-pattern="currentEntity.validationRule.regExp"
                 placeholder="{{ 'catalog.properties.color.code' | translate }}"
                 class="vc-catalog" />
          <button class="btn" type="button" data-color-input-id="color_input_{{::$id}}" ng-click="openColorPicker($event)">
            <span class="btn-ico fa fa-square" ng-style="{ 'color': langValuesGroup.currentPropValues[0].colorCode }"></span>
          </button>
        </div>
      </div>
      <va-property-messages></va-property-messages>
    </div>
  </script>

  <script type="text/ng-template" id="Color-dictionary.html">
    <div class="form-input">
      <ui-select ng-model="context.currentPropValues[0]"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required"
                 name="{{currentEntity.name}}">
        <ui-select-match allow-clear="true" placeholder="{{ 'catalog.properties.color.dictionary' | translate }}">
          <span class="fa fa-square" ng-style="{ 'color': $select.selected.colorCode }"></span>
          {{$select.selected.value}}
        </ui-select-match>
        <ui-select-choices repeat="propValue in context.allDictionaryValues | filter: {value: $select.search} | orderBy: 'value'" refresh="loadDictionaryValues($select)" refresh-delay="200" when-scrolled="loadNextDictionaryValues($select)">
          <span class="fa fa-square" ng-style="{ 'color': propValue.colorCode }"></span>
          <span ng-bind-html="propValue.value | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="Color-dictionary-multilang.html">
    <div class="form-input">
      <ui-select ng-model="context.currentPropValues[0]"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required"
                 name="{{currentEntity.name}}">
        <ui-select-match allow-clear="true" placeholder="{{ 'catalog.properties.color.dictionary' | translate }}">
          <span class="fa fa-square" ng-style="{ 'color': $select.selected.colorCode }"></span>
          {{$select.selected.value}}
        </ui-select-match>
        <ui-select-choices repeat="propValue in context.allDictionaryValues | filter: {value: $select.search} | orderBy: 'value'" refresh="loadDictionaryValues($select)" refresh-delay="200" when-scrolled="loadNextDictionaryValues($select)">
          <span class="fa fa-square" ng-style="{ 'color': propValue.colorCode }"></span>
          <span ng-bind-html="propValue.value | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="Color-dictionary-multivalue.html">
    <div class="form-input">
      <ui-select multiple
                 sortable="true"
                 ng-model="context.currentPropValues"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required"
                 name="{{currentEntity.name}}">
        <ui-select-match allow-clear="true" placeholder="{{ 'catalog.properties.color.dictionary' | translate }}">
          <span class="fa fa-square" ng-style="{ 'color': $item.colorCode }"></span>
          {{$item.value}}
        </ui-select-match>
        <ui-select-choices repeat="propValue in context.allDictionaryValues | filter: {value: $select.search} | orderBy: 'value'" refresh="loadDictionaryValues($select)" refresh-delay="200" when-scrolled="loadNextDictionaryValues($select)">
          <span class="fa fa-square" ng-style="{ 'color': propValue.colorCode }"></span>
          <span ng-bind-html="propValue.value | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <script type="text/ng-template" id="Color-dictionary-multivalue-multilang.html">
    <div class="form-input">
      <ui-select multiple
                 sortable="true"
                 ng-model="context.currentPropValues"
                 ng-disabled="currentEntity.isReadOnly"
                 ng-required="currentEntity.required"
                 name="{{currentEntity.name}}">
        <ui-select-match allow-clear="true" placeholder="{{ 'catalog.properties.color.dictionary' | translate }}">
          <span class="fa fa-square" ng-style="{ 'color': $item.colorCode }"></span>
          {{$item.value}}
        </ui-select-match>
        <ui-select-choices repeat="propValue in context.allDictionaryValues | filter: {value: $select.search} | orderBy: 'value'" refresh="loadDictionaryValues($select)" refresh-delay="200" when-scrolled="loadNextDictionaryValues($select)">
          <span class="fa fa-square" ng-style="{ 'color': propValue.colorCode }"></span>
          <span ng-bind-html="propValue.value | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <va-property-messages></va-property-messages>
  </script>

  <!--
  <script type="text/ng-template" id="Color-multivalue.html">
  </script>

  <script type="text/ng-template" id="Color-multivalue-multilang.html">
  </script>
  -->

</div>
