{% load allauth %}
{% comment %}
Bootstrap 5 version of allauth's single-field element (used for the TOTP manual-entry key,
the recovery-codes textarea and its "I have saved the codes" checkbox).
{% endcomment %}
{{ attrs.errors }}
{% if attrs.type == "checkbox" or attrs.type == "radio" %}
  <div class="form-check mb-3">
    <input class="form-check-input"
           {% 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 }}">
    <label class="form-check-label" for="{{ attrs.id }}">
      {% slot label %}
      {% endslot %}
    </label>
    {% if slots.help_text %}<div class="form-text">{% slot help_text %}{% endslot %}</div>{% endif %}
  </div>
{% elif attrs.type == "textarea" %}
  <div class="mb-3">
    {% if slots.label %}<label class="form-label" for="{{ attrs.id }}">{% slot label %}{% endslot %}</label>{% endif %}
    <textarea class="form-control{% if attrs.readonly or attrs.disabled %} font-monospace{% endif %}"
              {% if attrs.required %}required{% endif %}
              {% if attrs.rows %}rows="{{ attrs.rows }}"{% endif %}
              {% if attrs.disabled %}disabled{% endif %}
              {% if attrs.readonly %}readonly{% 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 %}<div class="form-text">{% slot help_text %}{% endslot %}</div>{% endif %}
  </div>
{% else %}
  <div class="mb-3">
    {% if slots.label %}<label class="form-label" for="{{ attrs.id }}">{% slot label %}{% endslot %}</label>{% endif %}
    <input class="form-control{% if attrs.readonly or attrs.disabled %} font-monospace{% endif %}"
           {% if attrs.required %}required{% endif %}
           {% if attrs.disabled %}disabled{% endif %}
           {% if attrs.readonly %}readonly{% 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 %}<div class="form-text">{% slot help_text %}{% endslot %}</div>{% endif %}
  </div>
{% endif %}