<ng-form name="schemaPropertyEditorForm" novalidate>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="name" translate>Name</label>
        <input
          id="name"
          name="name"
          type="text"
          class="form-control"
          ng-model="vm.property.key"
          ng-pattern="/^[A-Za-z0-9_]+$/"
          placeholder="{{ 'e.g. myProperty' | translate }}"
          required
        />
        <c8y-error-feedback field="schemaPropertyEditorForm.name">
          <span ng-message="pattern" translate>Only letters, digits and underscore allowed.</span>
        </c8y-error-feedback>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label for="label" translate>Label</label>
        <input
          id="label"
          name="label"
          type="text"
          class="form-control"
          ng-model="vm.property.schema.title"
          placeholder="{{ 'e.g. My property' | translate }}"
          required
        />
        <c8y-error-feedback field="schemaPropertyEditorForm.label"></c8y-error-feedback>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label class="sr-only" translate>Type</label>
        <div class="c8y-select-wrapper">
          <select
            name="type"
            class="form-control"
            ng-model="vm.schemaPropertyType"
            ng-options="type as (type.label | translate) for type in vm.Types.values() | orderBy:'label'"
            ng-change="vm.setType(type)"
            required
            aria-label="{{ 'Type' | translate }}"
          ></select>
          <span></span>
        </div>
        <c8y-error-feedback
          field="schemaPropertyEditorForm.type"
          check-on-dirty="true"
        ></c8y-error-feedback>
      </div>
    </div>
  </div>
  <fieldset>
    <div class="legend" translate>Validation rules</div>

    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label
            title="{{ vm.Validations.REQUIRED.label | translate }}"
            class="c8y-checkbox"
            ng-class="{ disabled: !vm.isValidationSupported(vm.Validations.REQUIRED) }"
          >
            <input
              type="checkbox"
              ng-model="vm.property.schema.required"
              ng-change="vm.updateRequiredValidationApplied()"
              ng-disabled="!vm.isValidationSupported(vm.Validations.REQUIRED)"
            />
            <span></span>
            <span ng-bind="vm.Validations.REQUIRED.label | translate"></span>
          </label>

          <label
            title="{{ vm.Validations.DEFAULT.label | translate }}"
            class="c8y-checkbox"
            ng-class="{ disabled: !vm.isValidationSupported(vm.Validations.DEFAULT) }"
          >
            <input
              type="checkbox"
              ng-model="vm.validationsApplied.default"
              ng-disabled="!vm.isValidationSupported(vm.Validations.DEFAULT)"
            />
            <span></span>
            <span ng-bind="vm.Validations.DEFAULT.label | translate"></span>
          </label>
          <div class="m-t-8" ng-if="vm.validationsApplied.default">
            <ng-form name="vm.defaultForm">
              <div class="form-group">
                <label class="sr-only" translate>Default value</label>
                <input
                  name="default"
                  type="text"
                  class="form-control"
                  placeholder="{{ vm.Validations.DEFAULT.label | translate }}"
                  ng-model="vm.property.schema.default"
                  ng-min="vm.property.schema.minimum"
                  ng-max="vm.property.schema.maximum"
                  ng-minlength="vm.property.schema.minLength"
                  ng-maxlength="vm.property.schema.maxLength"
                  ng-pattern="vm.property.schema.pattern"
                  ng-required="vm.validationsApplied.default"
                />
                <c8y-error-feedback field="vm.defaultForm.default"></c8y-error-feedback>
              </div>
            </ng-form>
          </div>

          <label
            title="{{ vm.Validations.MINIMUM.label | translate }}"
            class="c8y-checkbox"
            ng-class="{ disabled: !vm.isValidationSupported(vm.Validations.MINIMUM) }"
          >
            <input
              type="checkbox"
              ng-model="vm.validationsApplied.minimum"
              ng-disabled="!vm.isValidationSupported(vm.Validations.MINIMUM)"
            />
            <span></span>
            <span ng-bind="vm.Validations.MINIMUM.label | translate"></span>
          </label>

          <div class="m-t-8" ng-if="vm.validationsApplied.minimum">
            <ng-form name="minimumForm">
              <div class="form-group">
                <label class="sr-only" translate>Minimum</label>
                <input
                  name="minimum"
                  type="number"
                  class="form-control"
                  placeholder="{{ vm.Validations.MINIMUM.label | translate }}"
                  ng-model="vm.property.schema.minimum"
                  ng-max="vm.property.schema.maximum"
                  ng-required="vm.validationsApplied.minimum"
                />
                <c8y-error-feedback field="minimumForm.minimum"></c8y-error-feedback>
              </div>
            </ng-form>
          </div>

          <label
            title="{{ vm.Validations.MAXIMUM.label | translate }}"
            class="c8y-checkbox"
            ng-class="{ disabled: !vm.isValidationSupported(vm.Validations.MAXIMUM) }"
          >
            <input
              type="checkbox"
              ng-model="vm.validationsApplied.maximum"
              ng-disabled="!vm.isValidationSupported(vm.Validations.MAXIMUM)"
            />
            <span></span>
            <span ng-bind="vm.Validations.MAXIMUM.label | translate"></span>
          </label>

          <div class="m-t-8" ng-if="vm.validationsApplied.maximum">
            <ng-form name="maximumForm">
              <div class="form-group">
                <label class="sr-only" translate>Maximum</label>
                <input
                  name="maximum"
                  type="number"
                  class="form-control"
                  placeholder="{{ vm.Validations.MAXIMUM.label | translate }}"
                  ng-model="vm.property.schema.maximum"
                  ng-min="vm.property.schema.minimum"
                  ng-required="vm.validationsApplied.maximum"
                />
                <c8y-error-feedback field="maximumForm.maximum"></c8y-error-feedback>
              </div>
            </ng-form>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label
            title="{{ vm.Validations.MIN_LENGTH.label | translate }}"
            class="c8y-checkbox"
            ng-class="{ disabled: !vm.isValidationSupported(vm.Validations.MIN_LENGTH) }"
          >
            <input
              type="checkbox"
              ng-model="vm.validationsApplied.minLength"
              ng-disabled="!vm.isValidationSupported(vm.Validations.MIN_LENGTH)"
            />
            <span></span>
            <span ng-bind="vm.Validations.MIN_LENGTH.label | translate"></span>
          </label>

          <div class="m-t-8" ng-if="vm.validationsApplied.minLength">
            <ng-form name="minLengthForm">
              <div class="form-group">
                <label class="sr-only" translate>Minimum length</label>
                <input
                  name="minLength"
                  type="number"
                  class="form-control"
                  placeholder="{{ vm.Validations.MIN_LENGTH.label | translate }}"
                  ng-model="vm.property.schema.minLength"
                  ng-min="1"
                  ng-max="vm.property.schema.maxLength"
                  ng-required="vm.validationsApplied.minLength"
                />
                <c8y-error-feedback field="minLengthForm.minLength"></c8y-error-feedback>
              </div>
            </ng-form>
          </div>

          <label
            title="{{ vm.Validations.MAX_LENGTH.label | translate }}"
            class="c8y-checkbox"
            ng-class="{ disabled: !vm.isValidationSupported(vm.Validations.MAX_LENGTH) }"
          >
            <input
              type="checkbox"
              ng-model="vm.validationsApplied.maxLength"
              ng-disabled="!vm.isValidationSupported(vm.Validations.MAX_LENGTH)"
            />
            <span></span>
            <span ng-bind="vm.Validations.MAX_LENGTH.label | translate"></span>
          </label>

          <div class="m-t-8" ng-if="vm.validationsApplied.maxLength">
            <ng-form name="maxLengthForm">
              <div class="form-group">
                <label class="sr-only" translate>Maximum length</label>
                <input
                  name="maxLength"
                  type="number"
                  class="form-control"
                  placeholder="{{ vm.Validations.MAX_LENGTH.label | translate }}"
                  ng-model="vm.property.schema.maxLength"
                  ng-min="vm.property.schema.minLength"
                  ng-required="vm.validationsApplied.maxLength"
                />
                <c8y-error-feedback field="maxLengthForm.maxLength"></c8y-error-feedback>
              </div>
            </ng-form>
          </div>

          <label
            title="{{ vm.Validations.PATTERN.label | translate }}"
            class="c8y-checkbox"
            ng-class="{ disabled: !vm.isValidationSupported(vm.Validations.PATTERN) }"
          >
            <input
              type="checkbox"
              ng-model="vm.validationsApplied.pattern"
              ng-disabled="!vm.isValidationSupported(vm.Validations.PATTERN)"
            />
            <span></span>
            <span ng-bind="vm.Validations.PATTERN.label | translate"></span>
          </label>

          <div class="m-t-8" ng-if="vm.validationsApplied.pattern">
            <ng-form name="patternForm">
              <div class="form-group">
                <label class="sr-only" translate>Regular expression</label>
                <input
                  name="pattern"
                  type="text"
                  class="form-control"
                  ng-model="vm.property.schema.pattern"
                  placeholder="{{ 'e.g.' | translate }} ^\d{1,9}$"
                  ng-required="vm.validationsApplied.pattern"
                  c8y-regular-expression
                />
                <c8y-error-feedback field="patternForm.pattern"></c8y-error-feedback>
              </div>
            </ng-form>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
</ng-form>
