<div class="blade-content">
    <div class="blade-inner">
        <div class="inner-block">
          <form name="pdForm" class="form">
            <div class="form-group" ng-init="setForm(pdForm);">
              <label class="form-label" for="">{{ 'catalog.blades.property-detail.labels.property-name' | translate }}</label>
              <div class="form-input">
                <input focus-on="" required class="form-control" ng-model="blade.currentEntity.name" />
              </div>
              <span class="comment-text" ng-if="errorData">
                <img src="/images/layout/warning.svg" class="comment-icon">
                <span ng-if="errorData.errorMessage==='duplicated-property' && errorData.customState.categoryName">
                  {{ 'catalog.blades.item-property-detail.labels.duplicate-property-in-product' | translate: errorData.customState }}
                </span>
                <span ng-if="errorData.errorMessage==='duplicated-property' && !errorData.customState.categoryName">
                  {{ 'catalog.blades.item-property-detail.labels.duplicate-property-in-catalog' | translate: errorData.customState }}
                </span>
                <span ng-if="errorData.errorMessage==='inherited-duplicated-property' && errorData.customState.categoryName">
                  {{ 'catalog.blades.item-property-detail.labels.duplicate-property-in-product' | translate: errorData.customState }}
                </span>
                <span ng-if="errorData.errorMessage==='inherited-duplicated-property' && !errorData.customState.categoryName">
                  {{ 'catalog.blades.item-property-detail.labels.duplicate-property-in-catalog' | translate: errorData.customState }}
                </span>
                <span ng-if="errorData.errorMessage==='global-property-name-type' && errorData.customState.categoryName">
                  {{ 'catalog.blades.item-property-detail.labels.duplicate-property-in-product' | translate: errorData.customState }}
                </span>
                <span ng-if="errorData.errorMessage==='global-property-name-type' && !errorData.customState.categoryName">
                  {{ 'catalog.blades.item-property-detail.labels.duplicate-property-in-catalog' | translate: errorData.customState }}
                </span>
                <span ng-if="errorData.errorMessage=='property-naming-error'">
                  {{ 'catalog.blades.item-property-detail.labels.property-naming-error' | translate }}
                </span>
              </span>
            </div>

            <div class="form-group">
              <label class="form-label" for="">{{ 'catalog.blades.property-detail.labels.display-name' | translate }}</label>
              <div class="vc-catalog form-input __langs" ng-repeat="data in blade.currentEntity.displayNames | limitTo: blade.showAllLanguages ? blade.currentEntity.displayNames.length : 2">
                <label class="lang-code">{{data.languageCode}}</label>
                <input ng-model="data.name" placeholder="{{ 'catalog.blades.property-detail.placeholders.display-name' | translate }}" class="vc-catalog form-control" />
              </div>
              <div ng-if="blade.currentEntity.displayNames.length > 2">
                <a href="" ng-click="blade.showAllLanguages = !blade.showAllLanguages">
                  {{ (blade.showAllLanguages ? 'catalog.blades.item-detail.labels.show-less-languages' : 'catalog.blades.item-detail.labels.show-more-languages' ) | translate }}
                </a>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label" for="">{{ 'catalog.blades.property-detail.labels.display-order' | translate }}</label>
              <div class="form-input">
                <input class="form-input" num-type="integer" type="number" ng-min="0" min="0" ng-model="blade.currentEntity.displayOrder" placeholder="{{ 'catalog.blades.property-detail.placeholders.display-order' | translate}}" />
              </div>
            </div>

            <div class="form-group">
              <label class="form-label">{{'catalog.blades.property-detail.labels.property-group' | translate}}</label>
              <ui-scroll-drop-down page-size="50"
                                   ng-if="propertyGroupSelectorShown"
                                   ng-model="blade.currentEntity.propertyGroupId"
                                   data="blade.fetchPropertyGroups(criteria)"
                                   placeholder="'catalog.blades.property-detail.placeholders.property-group'">
              </ui-scroll-drop-down>
            </div>

            <div class="columns clearfix">
              <div class="column" ng-class="{disabled : !blade.hasDictionary}">
                <div class="form-group">
                  <label class="form-label">{{ 'catalog.blades.property-detail.labels.dictionary' | translate }}</label>
                  <div class="form-input">
                    <label class="form-label __switch">
                      <input type="checkbox" ng-model="blade.currentEntity.dictionary" ng-disabled="!blade.hasDictionary" />
                      <span class="switch"></span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="column" ng-class="{disabled : !blade.hasMultivalue}">
                <div class="form-group">
                  <label class="form-label">{{ 'catalog.blades.property-detail.labels.multivalue' | translate }}</label>
                  <div class="form-input">
                    <label class="form-label __switch">
                      <input type="checkbox" ng-model="blade.currentEntity.multivalue" ng-disabled="!blade.hasMultivalue" />
                      <span class="switch"></span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="column" ng-class="{disabled : !blade.hasMultilanguage}">
                <div class="form-group">
                  <label class="form-label">{{ 'catalog.blades.property-detail.labels.multi-language' | translate }}</label>
                  <div class="form-input">
                    <label class="form-label __switch">
                      <input type="checkbox" ng-model="blade.currentEntity.multilanguage" ng-disabled="!blade.hasMultilanguage" />
                      <span class="switch"></span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div class="columns clearfix">
              <div class="column">
                <div class="form-group">
                  <label class="form-label">{{ 'catalog.blades.property-detail.labels.hidden' | translate }}</label>
                  <div class="form-input">
                    <label class="form-label __switch">
                      <input type="checkbox" ng-model="blade.currentEntity.hidden" />
                      <span class="switch"></span>
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="form-label">{{ 'catalog.blades.property-detail.labels.applies-to' | translate }}</label>
              <div class="form-input">
                <ui-select ng-disabled="true" ng-model="blade.currentEntity.type" class="capitalizeText">
                  <ui-select-match>{{$select.selected}}</ui-select-match>
                  <ui-select-choices repeat="propertyType in blade.availablePropertyTypes | filter: $select.search">
                    <span ng-click="blade.currentEntity.type">{{propertyType}}</span>
                  </ui-select-choices>
                </ui-select>
              </div>
            </div>

            <div class="form-group">
              <label class="form-label">{{ 'catalog.blades.property-detail.labels.value-type' | translate }}</label>
              <div class="form-input">
                <ui-select ng-model="blade.currentEntity.valueType">
                  <ui-select-match placeholder="">{{ $select.selected.title |translate}}</ui-select-match>
                  <ui-select-choices repeat="x.valueType as x in blade.availableValueTypes | filter: $select.search">
                    <div>{{ x.title |translate }}</div>
                  </ui-select-choices>
                </ui-select>
              </div>
            </div>

            <div class="form-group" ng-if="blade.currentEntity.valueType === 'Measure'">
              <label class="form-label">{{ 'catalog.blades.property-detail.labels.measure' | translate }}</label>
              <div class="form-input">
                <ui-select ng-model="blade.currentEntity.measureId" required>
                  <ui-select-match placeholder="{{ 'catalog.properties.measure.select-placeholder' | translate }}">{{ $select.selected.name |translate}}</ui-select-match>
                  <ui-select-choices repeat="x.id as x in blade.measures | filter: $select.search">
                    <div>{{ x.name }}</div>
                  </ui-select-choices>
                </ui-select>
              </div>
            </div>

          </form>

            <ul class="list __items">
                <li class="list-item" ng-class="{'__selected': currentChild === 'va'}" ng-click='openChild("rules")'>
                    <span class="list-t">{{ 'catalog.blades.property-validationRule.title'|translate }}</span>
                    <span class="list-descr">{{ 'catalog.blades.property-validationRule.subtitle'|translate }}</span>
                </li>
                <li class="list-item" ng-class="{'__selected': currentChild === 'dict', '__disabled': !blade.canEditDictionary() }" ng-click='openChild("dict")'>
                    <span class="list-t">{{ 'catalog.blades.property-detail.labels.dictionary' | translate }}</span>
                    <span class="list-descr">{{ 'catalog.blades.property-detail.labels.manage-dictionary' | translate }}</span>
                    <span ng-if="blade.currentEntity.isNew" class="list-descr">{{ 'catalog.blades.property-detail.labels.new-dictionary-property-caution' | translate }}</span>
                </li>
                <li class="list-item" ng-class="{'__selected': currentChild === 'attr'}" ng-click='openChild("attr")'>
                    <span class="list-t">{{ 'catalog.blades.property-detail.labels.attributes' | translate }}</span>
                    <span class="list-descr">{{ 'catalog.blades.property-detail.labels.manage-attributes' | translate }}</span>
                </li>
            </ul>
        </div>
    </div>
</div>
