{% comment %}
FORM FIELD MOLECULE — LABEL + WIDGET + HELP TEXT + ERRORS.

Django renders the widget itself; the element-level base styles registered in
the Tailwind preset take care of its appearance, so this molecule only handles
layout, labelling and errors.

USAGE:
    {% include "django_fundamentals/molecules/form_field.html" with field=form.email %}

PARAMETERS:
    field  -- a bound Django form field (required)
{% endcomment %}
<div class="space-y-1.5">
    {% if field.field.widget.input_type == "checkbox" %}
        {# CHECKBOXES READ AS "[x] Label", NOT A LABEL STACKED ABOVE A LONE BOX. #}
        <div class="flex items-center gap-2">
            {{ field }}
            {% if field.label %}
                <label for="{{ field.id_for_label }}" class="text-sm text-ink">
                    {{ field.label }}
                    {% if field.field.required %}
                        <span class="text-danger" aria-hidden="true">*</span>
                        <span class="sr-only">(required)</span>
                    {% endif %}
                </label>
            {% endif %}
        </div>
    {% else %}
        {% if field.label %}
            <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-ink">
                {{ field.label }}
                {% if field.field.required %}
                    <span class="text-danger" aria-hidden="true">*</span>
                    <span class="sr-only">(required)</span>
                {% endif %}
            </label>
        {% endif %}

        {{ field }}
    {% endif %}

    {% if field.help_text %}
        <p class="text-xs text-muted">{{ field.help_text|safe }}</p>
    {% endif %}

    {% comment %}
    RENDERED AS <ul class="errorlist">, MATCHING DJANGO/allauth'S OWN ERROR
    MARKUP, SO ONE RULE IN THE TAILWIND PRESET STYLES BOTH OURS AND ANY FORM WE
    DON'T CONTROL.

    IT ALSO KEEPS THAT RULE ALIVE: TAILWIND PURGES addBase RULES WHOSE SELECTOR
    NAMES A CLASS THAT NEVER APPEARS IN SCANNED CONTENT, AND THIS TEMPLATE IS
    THE ONLY PLACE "errorlist" IS WRITTEN IN A TEMPLATE RATHER THAN EMITTED AT
    RUNTIME BY DJANGO.
    {% endcomment %}
    {% if field.errors %}
        <ul class="errorlist" role="alert">
            {% for error in field.errors %}<li>{{ error }}</li>{% endfor %}
        </ul>
    {% endif %}
</div>