{% load allauth %}
{% for field in attrs.form.visible_fields %}
  <div class="space-y-1">
    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-slate-700">
      {{ field.label }}{% if field.field.required %} <span class="text-red-500">*</span>{% endif %}
    </label>
    {{ field }}
    {% if field.help_text %}
      <p class="text-xs text-slate-400">{{ field.help_text }}</p>
    {% endif %}
    {% for error in field.errors %}
      <p class="text-xs text-red-600">{{ error }}</p>
    {% endfor %}
  </div>
{% endfor %}
{% for field in attrs.form.hidden_fields %}{{ field }}{% endfor %}
{% if attrs.form.non_field_errors %}
  <div class="rounded-lg bg-red-50 border border-red-200 p-3">
    {% for error in attrs.form.non_field_errors %}
      <p class="text-sm text-red-700">{{ error }}</p>
    {% endfor %}
  </div>
{% endif %}