{% comment %}
Field Error Component
=====================

Displays error messages for a form field with icon and proper accessibility.

Purpose:
    Renders error messages in a consistent, accessible format with visual
    indicators. Used within form_field.html or standalone.

Usage Examples:
    Within form_field.html (automatic):
        {% include 'forms/partials/field_error.html' with errors=field.errors %}

    Standalone:
        {% include 'forms/partials/field_error.html' with errors=form.email.errors %}

    Non-field errors:
        {% include 'forms/partials/field_error.html' with errors=form.non_field_errors %}

Parameters:
    Required:
    - errors: List of error messages (typically field.errors)

    Optional:
    - show_icon: Show error icon (default: True)
    - animate: Add entrance animation (default: True)
    - size: 'sm', 'md', 'lg' (default: 'sm')

Dependencies:
    - Tailwind CSS for styling
    - Font Awesome icons

Accessibility:
    - Uses role="alert" for immediate screen reader announcement
    - aria-live="assertive" for dynamic error display
    - Error icon is decorative (aria-hidden)
{% endcomment %}

{% with show_icon=show_icon|default:True animate=animate|default:True size=size|default:'sm' %}

{% if errors %}
<ul class="{% if size == 'lg' %}text-base{% elif size == 'md' %}text-sm{% else %}text-xs{% endif %} text-red-600 dark:text-red-400 space-y-1 {% if animate %}animate-slide-down{% endif %}"
    role="alert"
    aria-live="assertive">
    {% for error in errors %}
    <li class="flex items-start gap-1.5">
        {% if show_icon %}
        <i class="fas fa-exclamation-circle mt-0.5 flex-shrink-0" aria-hidden="true"></i>
        {% endif %}
        <span>{{ error }}</span>
    </li>
    {% endfor %}
</ul>
{% endif %}

{% endwith %}
