{% load widget_tweaks %}

<div
  {% with classes=field.css_classes %} class="field is-horizontal {{ classes }}"
  {% endwith %}
  id="form-row-{{ field.name }}"
  {% if do_htmx_validation and field|widget_type != "fileinput" and field|widget_type != "checkboxinput" %}

    hx-get="."
    hx-vals='{"_validate_field": "{{ field.name }}" }'
    hx-trigger="focusout from:#form-row-{{ field.name }}"
    hx-include="#form-row-{{ field.name }}"
    hx-target="this"
    hx-ext="morph"
    hx-swap="morph:outerHTML"
  {% endif %}
>
  {% if field.label %}
    <div class="field-label is-normal">
      {{ field.label_tag }}
    </div>
  {% endif %}
  <div class="field-body">
    {% with error_class=errors|yesno:"is-danger,," %}
      <div class="field">
        <div class="control">
          {% if field|widget_type == "select" %}
            <div class="select {{ error_class }}">
              {{ field|attr:"hx-preserve:true" }}
            </div>
          {% else %}
            {{ field|add_class:error_class|attr:"hx-preserve:true" }}
          {% endif %}
        </div>
        {% if field.help_text %}
          <p class="help">{{ field.help_text|safe }}</p>
        {% endif %}
        {% if errors %}
          <div class="help">
            {{ errors }}
          </div>
        {% endif %}
      </div>
    {% endwith %}
  </div>
</div>