<div class="blade-content">
    <div class="blade-inner">
        <div class="inner-block">
          <form class="form" name="rules">

            <div class="form-group">
              <label class="form-label">{{'catalog.blades.aggregation-properties-details.name.label' | translate}}</label>
              <div class="form-input">
                <input ng-model="blade.property.name" ng-disabled="true" />
              </div>
            </div>

            <div class="form-group">
              <label class="form-label">{{'catalog.blades.aggregation-properties-details.type.label' | translate}}</label>
              <div class="form-input">
                <ui-select ng-model="blade.property.type" ng-disabled="!blade.canChangeType()">
                  <ui-select-match>{{$select.selected}}</ui-select-match>
                  <ui-select-choices repeat="selectedType in blade.propertyTypes | filter: $select.search">
                    <span>{{selectedType}}</span>
                  </ui-select-choices>
                </ui-select>
              </div>
            </div>

            <div class="form-group" ng-if="blade.canSetItemsSorting()">
              <label class="form-label">{{'catalog.blades.aggregation-properties-details.sorting.label' | translate}}</label>
              <ui-scroll-drop-down ng-model="blade.property.termValuesSortingType"
                                   data="blade.getSortingTypes()"
                                   placeholder="'catalog.blades.aggregation-properties-details.sorting.placeholder'">
              </ui-scroll-drop-down>
            </div>

            <div class="form-group" ng-if="blade.measure">
              <label class="form-label">{{'catalog.blades.aggregation-properties-details.measure.label' | translate}}</label>
              <div class="form-input">
                <input ng-model="blade.measure.name" ng-disabled="true" />
              </div>
            </div>

            <div class="form-group" ng-if="blade.units">
              <label class="form-label">{{'catalog.blades.aggregation-properties-details.unit.label' | translate}}</label>
              <div class="form-input">
                <ui-select ng-model="blade.property.unitOfMeasureId">
                  <ui-select-match>{{$select.selected.symbol}}</ui-select-match>
                  <ui-select-choices repeat="x.id as x in blade.units | filter: $select.search">
                    <span ng-bind-html="x.symbol | highlight: $select.search"></span>
                  </ui-select-choices>
                </ui-select>
              </div>
            </div>

            <div class="form-group" ng-if="blade.canChangeSize()">
              <label class="form-label">{{'catalog.blades.aggregation-properties-details.size.label' | translate}}</label>
              <div class="form-input">
                <input ng-model="blade.property.size" placeholder="{{'catalog.blades.aggregation-properties-details.size.placeholder' | translate}}" />
              </div>
              <div class="table-descr">{{'catalog.blades.aggregation-properties-details.size.description' | translate}}</div>
            </div>

            <div class="form-group">
              <label class="form-label">{{'catalog.blades.aggregation-properties-details.values-'+blade.property.type+'.label' | translate}}</label>
              <div class="form-input">
                <ui-select ng-if="blade.hasPredefinedValues()"
                           multiple
                           ng-model="blade.property.values">
                  <ui-select-match placeholder="{{'catalog.blades.aggregation-properties-details.values-'+blade.property.type+'.placeholder' | translate}}">{{$item}}</ui-select-match>
                  <ui-select-choices repeat="x in blade.getValues($select.search) | filter: $select.search">
                    <span ng-bind-html="x | highlight: $select.search"></span>
                  </ui-select-choices>
                </ui-select>
                <tags-input ng-if="!blade.hasPredefinedValues()"
                            use-strings="true"
                            ng-model="blade.property.values"
                            display-property="value"
                            placeholder="{{'platform.genericValueInput.placeholders.short-text-multivalue' | translate}}">
                </tags-input>
              </div>
              <div class="table-descr">{{'catalog.blades.aggregation-properties-details.values-'+blade.property.type+'.description' | translate}}</div>
            </div>

            <div class="form-group __bottom" ng-include="'Modules/$(VirtoCommerce.Catalog)/Scripts/blades/common/templates/ok-cancel.tpl.html'"></div>
          </form>
        </div>
    </div>
</div>