<div
  class="form-group schema-form-{{ form.type }} {{ form.htmlClass }}"
  ng-class="{
    'has-error': form.disableErrorState !== true && hasError(),
    'has-success': form.disableSuccessState !== true && hasSuccess(),
    'has-feedback': form.feedback !== false
  }"
>
  <label
    class="control-label {{ form.labelHtmlClass }}"
    ng-class="{ 'sr-only': !showTitle() }"
    for="sf-{{ form.key.slice(-1)[0] + $id }}"
  >
    {{ form.title | translate }}
  </label>
  <input
    ng-if="!form.fieldAddonLeft && !form.fieldAddonRight"
    ng-show="form.key"
    type="{{ form.type }}"
    step="any"
    sf-changed="form"
    placeholder="{{ form.placeholder | translate }}"
    class="text-truncate form-control {{ form.fieldHtmlClass }}"
    ng-model-options="form.ngModelOptions"
    ng-model="$$value$$"
    ng-readonly="form.readonly"
    schema-validate="form"
    title="{{ form.title | translate }}"
    id="sf-{{ form.key.slice(-1)[0] + $id }}"
    name="sf-{{ form.key.slice(-1)[0] + $id }}"
  />

  <div
    ng-if="form.fieldAddonLeft || form.fieldAddonRight"
    ng-class="{ 'input-group': form.fieldAddonLeft || form.fieldAddonRight }"
  >
    <span
      ng-if="form.fieldAddonLeft"
      class="input-group-addon"
      ng-bind-html="form.fieldAddonLeft"
    ></span>
    <input
      ng-show="form.key"
      type="{{ form.type }}"
      step="any"
      sf-changed="form"
      placeholder="{{ form.placeholder | translate }}"
      class="text-truncate form-control {{ form.fieldHtmlClass }}"
      ng-model-options="form.ngModelOptions"
      ng-model="$$value$$"
      ng-readonly="form.readonly"
      schema-validate="form"
      title="{{ form.title | translate }}"
      id="sf-{{ form.key.slice(-1)[0] + $id }}"
      name="sf-{{ form.key.slice(-1)[0] + $id }}"
    />

    <span
      ng-if="form.fieldAddonRight"
      class="input-group-addon"
      ng-bind-html="form.fieldAddonRight"
    ></span>
  </div>
  <span
    ng-if="form.feedback !== false"
    class="form-control-feedback"
    ng-class="
      evalInScope(form.feedback) || {
        glyphicon: true,
        'glyphicon-ok': hasSuccess(),
        'glyphicon-remove': hasError()
      }
    "
    aria-hidden="true"
  ></span>
  <span
    ng-if="hasError() || hasSuccess()"
    id="{{ form.key.slice(-1)[0] + 'Status' + $id }}"
    class="sr-only"
  >
    <span ng-if="hasSuccess()">({{ 'valid`value`' | translate }})</span>
    <span ng-if="hasError()">({{ 'invalid`value`' | translate }})</span>
  </span>
  <div class="help-block" sf-message="form.description | translate"></div>
</div>
