{% load forms %}
<div class="form-group"
     {% if visibility %} {{ visibility|safe }} {% endif %}
     >
    <span ng-class="{ 'errored-state': {{ form_name }}.{{ model_name }}.$dirty && !{{ form_name }}.{{ model_name }}.$valid }">
    {% if label %}
    <label class="control-label col-sm-3">
      {{ label }}
    </label>
    {% endif %}
  <div class="col-sm-8">
    {% if multiple %}
      <ui-select {% if tagging %}tagging {% endif %}multiple {% if autofocus %}autofocus {% endif %} {% if change %} ng-change="{{ change }}" {% endif %}{% if disabled %}ng-disabled="{{ disabled }}" {% endif %}name="{{ model_name }}" {% if required %}required{% endif %} ng-model="{{ model }}" theme="bootstrap" style="min-width: 300px;">
        <ui-select-match {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}>{% if multiple %}[[ $item ]]{% else %}[[ $select.selected ]]{% endif %}</ui-select-match>
        <ui-select-choices repeat="i in {{ lookuplist }} | filter:$select.search {% if not multiple %}track by $index{% endif %}">
          <div ng-bind-html="i | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select>
    {% else %}
      <select {% if autofocus %}autofocus {% endif %}name="{{ model_name }}" {% if required %}required{% endif %} class="form-control" ng-model="{{ model }}" {% if change %} ng-change="{{ change }}" {% endif %} {% if disabled %}ng-disabled="{{ disabled }}" {% endif %}>
        {% if default_null %}
          <option value="" selected>---------</option>
        {% endif %}
        <option ng-repeat="i in {{ lookuplist }} track by $index">[[ i ]]</option>
        {% if other %}<option>Other</option>{% endif %}
      </select>
    {% endif %}
    {% if required %}
      <span ng-show="{{ form_name }}.{{ model_name }}.$dirty && {{ form_name }}.{{ model_name }}.$error.required">
        {{ required }}
      </span>
    {% endif %}
    {% if help_text %}
    <p class="text-center text-muted">
        {{ help_text }}
    </p>
    {% endif %}
    {% if help_template %}
    <p class="text-muted pointer"
       title="Help"
       data-placement="bottom"
       data-auto-close="true"
       data-template-url="{{ help_template }}"
       name="{{ model }}"
       bs-popover
       >
        <i class="fa fa-question-circle"></i>
        More details about {{ label }}
    </p>
    <script type="text/ng-template" id="{{ help_template }}">
      <div class="popover">
        <div class="arrow"></div>
        <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
        <div class="popover-content">
          {% include help_template %}
        </div>
      </div>
    </script>
    {% endif %}
  </div>
  </span>
</div>
{% if other %}
{% input model=model label=other_label show=other_show  %}
{% endif %}
