{% comment %}
Field Success Component
=======================

Displays success message for a validated form field with icon.

Purpose:
    Renders a success indicator when a field passes validation.
    Typically used with HTMX inline validation.

Usage Examples:
    After successful validation:
        {% include 'forms/partials/field_success.html' with message='Username is available' %}

    Simple checkmark (no message):
        {% include 'forms/partials/field_success.html' %}

Parameters:
    Optional:
    - message: Success message text (if empty, shows only icon)
    - show_icon: Show success 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="status" for polite screen reader announcement
    - aria-live="polite" for non-urgent updates
    - Success icon is decorative (aria-hidden)
{% endcomment %}

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

<div class="{% if size == 'lg' %}text-base{% elif size == 'md' %}text-sm{% else %}text-xs{% endif %} text-green-600 dark:text-green-400 flex items-center gap-1.5 {% if animate %}animate-slide-down{% endif %}"
     role="status"
     aria-live="polite">
    {% if show_icon %}
    <i class="fas fa-check-circle flex-shrink-0" aria-hidden="true"></i>
    {% endif %}
    {% if message %}
    <span>{{ message }}</span>
    {% endif %}
</div>

{% endwith %}
