{% load allauth %}
{% if attrs.errors %}
  <div class="rounded-lg bg-red-50 border border-red-200 p-2 mb-3 text-xs text-red-700">
    {{ attrs.errors }}
  </div>
{% endif %}
<div class="space-y-1 mb-4">
  {% if attrs.type == "textarea" %}
    <label for="{{ attrs.id }}" class="block text-sm font-medium text-slate-700">{% slot label %}{% endslot %}</label>
    <textarea {% 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 %}
              class="block w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-y"
    >{% slot value %}{% endslot %}</textarea>
  {% elif attrs.type == "checkbox" %}
    <div class="flex items-center gap-2">
      <input type="{{ attrs.type }}"
             {% if attrs.required %}required{% endif %}
             {% if attrs.disabled %}disabled{% 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 %}
             class="h-4 w-4 rounded border-slate-300 text-indigo-600 accent-indigo-600">
      <label for="{{ attrs.id }}" class="text-sm text-slate-700">{% slot label %}{% endslot %}</label>
    </div>
  {% else %}
    <label for="{{ attrs.id }}" class="block text-sm font-medium text-slate-700">{% slot label %}{% endslot %}</label>
    <input type="{{ attrs.type }}"
           {% 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 %}>
  {% endif %}
  {% if slots.help_text %}
    <p class="text-xs text-slate-400">{% slot help_text %}{% endslot %}</p>
  {% endif %}
</div>