{% load allauth %}
{% comment %}
Themis override of allauth's single-field element, invoked directly by the
email-management radio list, the connections list, email/phone change, and the
recovery-codes textarea. DaisyUI classes are applied per input type; every attr
and slot from the stock element is preserved so no caller loses behaviour.
{% endcomment %}
{% if attrs.errors %}<div class="text-error text-sm mb-1">{{ attrs.errors|striptags }}</div>{% endif %}
{% if attrs.type == "textarea" %}
    <div class="form-control">
        <label class="label" for="{{ attrs.id }}">
            <span class="label-text">{% slot label %}{% endslot %}</span>
        </label>
        <textarea class="textarea textarea-bordered w-full"
                  {% if attrs.required %}required{% endif %}
                  {% if attrs.rows %}rows="{{ attrs.rows }}"{% endif %}
                  {% if attrs.disabled %}disabled{% endif %}
                  {% if attrs.readonly %}readonly{% endif %}
                  {% if attrs.checked %}checked{% endif %}
                  {% if attrs.name %}name="{{ attrs.name }}"{% endif %}
                  {% if attrs.id %}id="{{ attrs.id }}"{% endif %}
                  {% if attrs.placeholder %}placeholder="{{ attrs.placeholder }}"{% endif %}>{% slot value %}{% endslot %}</textarea>
        {% if slots.help_text %}<span class="label-text-alt opacity-70 mt-1">{% slot help_text %}{% endslot %}</span>{% endif %}
    </div>
{% elif attrs.type == "checkbox" or attrs.type == "radio" %}
    <label class="label cursor-pointer justify-start gap-3" for="{{ attrs.id }}">
        <input class="{% if attrs.type == 'radio' %}radio{% else %}checkbox{% endif %}"
               {% if attrs.required %}required{% endif %}
               {% if attrs.disabled %}disabled{% endif %}
               {% if attrs.readonly %}readonly{% endif %}
               {% if attrs.checked %}checked{% endif %}
               {% if attrs.name %}name="{{ attrs.name }}"{% endif %}
               {% if attrs.id %}id="{{ attrs.id }}"{% endif %}
               {% if attrs.value is not None %}value="{{ attrs.value }}"{% endif %}
               type="{{ attrs.type }}">
        <span class="label-text">{% slot label %}{% endslot %}</span>
    </label>
    {% if slots.help_text %}<span class="label-text-alt opacity-70">{% slot help_text %}{% endslot %}</span>{% endif %}
{% else %}
    <div class="form-control">
        <label class="label" for="{{ attrs.id }}">
            <span class="label-text">{% slot label %}{% endslot %}</span>
        </label>
        <input class="input input-bordered w-full"
               {% if attrs.required %}required{% endif %}
               {% if attrs.disabled %}disabled{% endif %}
               {% if attrs.readonly %}readonly{% endif %}
               {% if attrs.checked %}checked{% endif %}
               {% if attrs.name %}name="{{ attrs.name }}"{% endif %}
               {% if attrs.id %}id="{{ attrs.id }}"{% endif %}
               {% if attrs.placeholder %}placeholder="{{ attrs.placeholder }}"{% endif %}
               {% if attrs.autocomplete %}autocomplete="{{ attrs.autocomplete }}"{% endif %}
               {% if attrs.value is not None %}value="{{ attrs.value }}"{% endif %}
               type="{{ attrs.type }}">
        {% if slots.help_text %}<span class="label-text-alt opacity-70 mt-1">{% slot help_text %}{% endslot %}</span>{% endif %}
    </div>
{% endif %}