<div class="blade-content __medium-wide">
  <div class="blade-inner">
    <div class="inner-block">
      <div class="config-section-detail" style="white-space: normal;">
        <form class="form" name="formScope" style="margin: 0; padding: 0;">
          <va-metaform registered-inputs="blade.metaFields" blade="blade" column-count="6" ng-if="blade.currentEntity" ng-init="setForm(formScope)"></va-metaform>
        </form>
      </div>

      <ul class="list __items" ng-if="blade.currentEntity">
        <li class="list-item"
            ng-if="blade.canShowOptions()"
            ng-class="{'__selected': currentChild === 'options'}"
            ng-click='openChild("options")'>
          <span class="list-t">{{ 'catalog.blades.section-details.labels.options' | translate }}</span>
          <span class="list-descr">{{ 'catalog.blades.section-options-list.subtitle' | translate }}</span>
        </li>
      </ul>
    </div>
  </div>
</div>

<script type="text/ng-template" id="section-type.html">
  <i class="form-ico fa fa-question-circle __link __lightblue" ng-click="blade.setting.type_descrVisible=!blade.setting.type_descrVisible"></i>
  <div class="form-input">
    <ui-select ng-model="blade.currentEntity.type" ng-disabled="blade.isTypeChangeDisabled()" required>
      <ui-select-match placeholder="{{ 'catalog.blades.section-details.placeholders.type' | translate }}">{{$select.selected}}</ui-select-match>
      <ui-select-choices repeat="x in blade.sectionTypes | filter: $select.search">
        <span ng-bind-html="x | highlight: $select.search"></span>
      </ui-select-choices>
    </ui-select>
  </div>
  <div ng-if="blade.setting.type_descrVisible">
    <div class="list __info list-descr">{{ 'catalog.blades.section-details.descr.type' | translate }}</div>
    <a href="" ng-click="blade.setting.type_descrVisible = null;">{{ 'catalog.blades.section-details.hide-description' | translate }}</a>
  </div>
</script>
<script type="text/ng-template" id="section-allow-custom-text.html">
  <div class="form-group" ng-if="blade.currentEntity.type === 'Text'">
    <label class="form-label">{{ 'catalog.blades.section-details.labels.allow-custom-text' | translate }}</label>
    <i class="form-ico fa fa-question-circle __link __lightblue" ng-click="blade.setting.allowCustomText_descrVisible=!blade.setting.allowCustomText_descrVisible"></i>
    <div class="form-input">
      <label class="form-label __switch">
        <input type="checkbox" ng-model="blade.currentEntity.allowCustomText" />
        <span class="switch"></span>
      </label>
    </div>
    <div ng-if="blade.setting.allowCustomText_descrVisible">
      <div class="list __info list-descr">{{ 'catalog.blades.section-details.descr.allow-custom-text' | translate }}</div>
      <a href="" ng-click="blade.setting.allowCustomText_descrVisible = null;">{{ 'catalog.blades.section-details.hide-description' | translate }}</a>
    </div>
  </div>
</script>
<script type="text/ng-template" id="section-allow-predefined.html">
  <div class="form-group" ng-if="blade.currentEntity.type === 'Text'">
    <label class="form-label">{{ 'catalog.blades.section-details.labels.allow-predefined-options' | translate }}</label>
    <i class="form-ico fa fa-question-circle __link __lightblue" ng-click="blade.setting.allowPredefined_descrVisible=!blade.setting.allowPredefined_descrVisible"></i>
    <div class="form-input">
      <label class="form-label __switch">
        <input type="checkbox" ng-model="blade.currentEntity.allowPredefinedOptions" />
        <span class="switch"></span>
      </label>
    </div>
    <div ng-if="blade.setting.allowPredefined_descrVisible">
      <div class="list __info list-descr">{{ 'catalog.blades.section-details.descr.allow-predefined-options' | translate }}</div>
      <a href="" ng-click="blade.setting.allowPredefined_descrVisible = null;">{{ 'catalog.blades.section-details.hide-description' | translate }}</a>
    </div>
  </div>
</script>
<script type="text/ng-template" id="section-depends-on.html">
  <div class="form-group">
    <label class="form-label">{{ 'catalog.blades.section-details.labels.depends-on' | translate }}</label>
    <div class="form-input">
      <ui-select ng-model="blade.currentEntity.dependsOnSectionId" allow-clear="true">
        <ui-select-match placeholder="{{ 'catalog.blades.section-details.placeholders.depends-on' | translate }}" allow-clear="true">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="s.id as s in blade.otherSections | filter: { name: $select.search }">
          <span ng-bind-html="s.name | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
  </div>
</script>
<script type="text/ng-template" id="section-is-required.html">
  <div>
    <label class="form-label">{{ 'catalog.blades.section-details.labels.required' | translate }}</label>
    <i class="form-ico fa fa-question-circle __link __lightblue" ng-click="blade.setting.isRequired_descrVisible=!blade.setting.isRequired_descrVisible"></i>
    <div class="form-input">
      <label class="form-label __switch">
        <input type="checkbox" ng-model="blade.currentEntity.isRequired" />
        <span class="switch"></span>
      </label>
    </div>
    <div ng-if="blade.setting.isRequired_descrVisible">
      <div class="list __info list-descr">{{ 'catalog.blades.section-details.descr.is-required' | translate }}</div>
      <a href="" ng-click="blade.setting.isRequired_descrVisible = null;">{{ 'catalog.blades.section-details.hide-description' | translate }}</a>
    </div>
  </div>
</script>
<script type="text/ng-template" id="section-max-length.html">
  <div class="form-group" ng-if="blade.currentEntity.type === 'Text'">
    <label class="form-label">{{ 'catalog.blades.section-details.labels.max-length' | translate }}</label>
    <i class="form-ico fa fa-question-circle __link __lightblue" ng-click="blade.setting.maxLength_descrVisible=!blade.setting.maxLength_descrVisible"></i>
    <div class="form-input">
      <input type="number" min="0" ng-model="blade.currentEntity.maxLength" ng-disabled="!blade.currentEntity.allowCustomText" />
    </div>
    <div ng-if="blade.setting.maxLength_descrVisible">
      <div class="list __info list-descr">{{ 'catalog.blades.section-details.descr.max-length' | translate }}</div>
      <a href="" ng-click="blade.setting.maxLength_descrVisible = null;">{{ 'catalog.blades.section-details.hide-description' | translate }}</a>
    </div>
  </div>
</script>

<style lang="scss">
  .blade .blade-container .blade-static.config-section-detail .form-group {
    margin: 0;
    padding-top: 0px;
  }

  .blade .blade-container .blade-static.config-section-detail .column .form-group {
    margin: 10px 10px 0 0;
    padding-top: 5px;
  }

  .config-section-detail .form-input input,
  .config-section-detail .form-input textarea {
    background: #fff;
    border-color: #d4d4d4;
  }

  .config-section-detail .form-input textarea {
    min-height: 60px;
    max-height: 60px;
    resize: none;
  }
</style>
