{% load crispy_field is_checkbox is_select is_checkboxselectmultiple is_radioselect is_file from crispy_forms_field %}
{% load is_rich_select from core_tags %}
{% load whitespaceless from ext_theme_tags %}

{% block field-outer %}

  {% whitespaceless as all_field_classes %}
    {% if not field|is_checkbox %}
      {% if field.field.required %}required{% endif %}
      {% if field.field.disabled %}disabled{% endif %}
      {% if field.errors %}error{% endif %}
      {% if 'form-horizontal' in form_class %}inline{% endif %}
      field
    {% endif %}
    {% if wrapper_class %}{{ wrapper_class }}{% endif %}
    {% if field.css_classes %}{{ field.css_classes }}{% endif %}
  {% endwhitespaceless %}

  <{{ tag|default:"div" }} id="div_{{ field.auto_id }}" class="{{ all_field_classes }}">

  {% block field-label %}
    {% if field.label and form_show_labels %}
      {% comment %}
      A help text usually contains HTML to be included as is, and it's marked as safe.
      Here we are including it in a data attribute, so we need to escape it.
      We use force_escape, since escape skips strings marked as safe.
      {% endcomment %}
      <label for="{{ field.id_for_label }}"
             class="ui {{ label_class }}"
             {% if field.help_text %} data-html="{{ field.help_text|force_escape }}" data-bind="semanticui: {popup: {hoverable: true, delay: {show: 500}}}"{% endif %}>
        {{ field.label|safe }}
        {% if field.help_text %}
          <i class="ui grey fa-duotone fa-circle-question icon"></i>
        {% endif %}
      </label>
    {% endif %}
  {% endblock field-label %}

  {% block field-input %}
    {% if field|is_rich_select %}
      {% include "semantic-ui/layout/rich_select.html" %}
      {% include "semantic-ui/layout/field_errors_block.html" %}
    {% elif field|is_select %}
      {% include "semantic-ui/layout/dropdown.html" %}
      {% include "semantic-ui/layout/field_errors_block.html" %}
    {% elif field|is_checkboxselectmultiple %}
      {% include "semantic-ui/layout/checkboxselectmultiple.html" %}
      {% include "semantic-ui/layout/field_errors_block.html" %}
    {% elif field|is_radioselect %}
      {% include "semantic-ui/layout/radioselect.html" %}
      {% include "semantic-ui/layout/field_errors_block.html" %}
    {% elif field|is_file %}
      {% include "semantic-ui/layout/field_file.html" %}
      {% include "semantic-ui/layout/field_errors_block.html" %}
    {% else %}
      <div class="{{ field_class }}">
        {% crispy_field field %}
        {% include "semantic-ui/layout/field_errors_block.html" %}
      </div>
    {% endif %}
  {% endblock field-input %}

  </{{ tag|default:"div" }}>
{% endblock field-outer %}