<div
  class="form-group has-feedback {{ form.htmlClass }} schema-form-textarea"
  ng-class="{
    'has-error': form.disableErrorState !== true && hasError(),
    'has-success': form.disableSuccessState !== true && hasSuccess()
  }"
>
  <label
    class="{{ form.labelHtmlClass }}"
    ng-class="{ 'sr-only': !showTitle() }"
    for="sf-{{ form.key.slice(-1)[0] + $id }}"
  >
    {{ form.title | translate }}
  </label>
  <textarea
    ng-if="!form.fieldAddonLeft && !form.fieldAddonRight"
    class="form-control {{ form.fieldHtmlClass }}"
    sf-changed="form"
    placeholder="{{ form.placeholder | translate }}"
    ng-readonly="form.readonly"
    ng-model="$$value$$"
    ng-model-options="form.ngModelOptions"
    schema-validate="form"
    name="sf-{{ form.key.slice(-1)[0] + $id }}"
    title="{{ form.title | translate }}"
    id="sf-{{ form.key.slice(-1)[0] + $id }}"
    rows="10"
  ></textarea>
  <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>
    <textarea
      class="form-control {{ form.fieldHtmlClass }}"
      sf-changed="form"
      placeholder="{{ form.placeholder | translate }}"
      ng-readonly="form.readonly"
      ng-model="$$value$$"
      ng-model-options="form.ngModelOptions"
      schema-validate="form"
      name="sf-{{ form.key.slice(-1)[0] + $id }}"
      title="{{ form.title | translate }}"
      id="sf-{{ form.key.slice(-1)[0] + $id }}"
    ></textarea>
    <span
      ng-if="form.fieldAddonRight"
      class="input-group-addon"
      ng-bind-html="form.fieldAddonRight"
    ></span>
  </div>
  <span class="help-block" sf-message="form.description | translate"></span>
</div>
