{% comment %}
Form Skeleton Component
=======================

Animated skeleton placeholder for forms while content loads.

Purpose:
    Displays pulsing skeleton form elements including labels, inputs,
    and action buttons.

Usage Examples:
    Basic form skeleton:
        {% include 'components/skeletons/form_skeleton.html' %}

    Custom field count:
        {% include 'components/skeletons/form_skeleton.html' with fields=6 %}

    Without textarea:
        {% include 'components/skeletons/form_skeleton.html' with show_textarea=False %}

    Compact form:
        {% include 'components/skeletons/form_skeleton.html' with size='sm' %}

Parameters:
    Optional:
    - fields: Number of input fields (default: 4)
    - show_textarea: Show a textarea field (default: True)
    - show_checkbox: Show checkbox fields (default: False)
    - show_select: Show select dropdown (default: True)
    - checkbox_count: Number of checkboxes (default: 3)
    - size: 'sm', 'md', 'lg' for field sizes (default: 'md')
    - animate: Enable pulse animation (default: True)

Dependencies:
    - Tailwind CSS for styling and animation

Accessibility:
    - Uses role="status" and aria-busy="true" for screen readers
{% endcomment %}

{% with fields=fields|default:4 show_textarea=show_textarea|default:True show_checkbox=show_checkbox|default:False show_select=show_select|default:True checkbox_count=checkbox_count|default:3 size=size|default:'md' animate=animate|default:True %}

<div class="skeleton-form space-y-{% if size == 'sm' %}4{% elif size == 'lg' %}8{% else %}6{% endif %}"
     role="status"
     aria-busy="true"
     aria-label="Loading form...">

    {# Regular input fields #}
    {% for i in "12345678"|slice:fields %}
    <div class="skeleton-form-field space-y-{% if size == 'sm' %}1{% elif size == 'lg' %}2{% else %}1.5{% endif %}">
        {# Label #}
        <div class="{% if size == 'sm' %}h-3 w-20{% elif size == 'lg' %}h-5 w-28{% else %}h-4 w-24{% endif %} bg-muted rounded {% if animate %}animate-pulse{% endif %}"
             style="animation-delay: {{ forloop.counter0 }}50ms;">
        </div>

        {# Input #}
        <div class="{% if size == 'sm' %}h-8{% elif size == 'lg' %}h-12{% else %}h-10{% endif %} w-full bg-muted/70 rounded-lg border border-muted {% if animate %}animate-pulse{% endif %}"
             style="animation-delay: {{ forloop.counter0 }}75ms;">
        </div>

        {# Help text (occasionally) #}
        {% if forloop.counter|divisibleby:2 %}
        <div class="{% if size == 'sm' %}h-2 w-48{% elif size == 'lg' %}h-4 w-64{% else %}h-3 w-56{% endif %} bg-muted/50 rounded {% if animate %}animate-pulse{% endif %}"
             style="animation-delay: {{ forloop.counter }}00ms;">
        </div>
        {% endif %}
    </div>
    {% endfor %}

    {# Select dropdown #}
    {% if show_select %}
    <div class="skeleton-form-field space-y-{% if size == 'sm' %}1{% elif size == 'lg' %}2{% else %}1.5{% endif %}">
        <div class="{% if size == 'sm' %}h-3 w-24{% elif size == 'lg' %}h-5 w-32{% else %}h-4 w-28{% endif %} bg-muted rounded {% if animate %}animate-pulse{% endif %}"></div>
        <div class="{% if size == 'sm' %}h-8{% elif size == 'lg' %}h-12{% else %}h-10{% endif %} w-full bg-muted/70 rounded-lg border border-muted {% if animate %}animate-pulse{% endif %} relative">
            {# Dropdown arrow indicator #}
            <div class="absolute right-3 top-1/2 -translate-y-1/2">
                <div class="{% if size == 'sm' %}w-3 h-3{% elif size == 'lg' %}w-5 h-5{% else %}w-4 h-4{% endif %} bg-muted/90 rounded"></div>
            </div>
        </div>
    </div>
    {% endif %}

    {# Textarea #}
    {% if show_textarea %}
    <div class="skeleton-form-field space-y-{% if size == 'sm' %}1{% elif size == 'lg' %}2{% else %}1.5{% endif %}">
        <div class="{% if size == 'sm' %}h-3 w-28{% elif size == 'lg' %}h-5 w-36{% else %}h-4 w-32{% endif %} bg-muted rounded {% if animate %}animate-pulse{% endif %}"></div>
        <div class="{% if size == 'sm' %}h-20{% elif size == 'lg' %}h-40{% else %}h-32{% endif %} w-full bg-muted/70 rounded-lg border border-muted {% if animate %}animate-pulse{% endif %}"></div>
        <div class="{% if size == 'sm' %}h-2 w-40{% elif size == 'lg' %}h-4 w-56{% else %}h-3 w-48{% endif %} bg-muted/50 rounded {% if animate %}animate-pulse{% endif %}"></div>
    </div>
    {% endif %}

    {# Checkboxes #}
    {% if show_checkbox %}
    <div class="skeleton-form-checkboxes space-y-3">
        <div class="{% if size == 'sm' %}h-3 w-32{% elif size == 'lg' %}h-5 w-40{% else %}h-4 w-36{% endif %} bg-muted rounded {% if animate %}animate-pulse{% endif %}"></div>
        {% for c in "12345"|slice:checkbox_count %}
        <div class="flex items-center gap-3">
            <div class="{% if size == 'sm' %}w-4 h-4{% elif size == 'lg' %}w-6 h-6{% else %}w-5 h-5{% endif %} bg-muted/70 rounded border border-muted {% if animate %}animate-pulse{% endif %}"></div>
            <div class="{% if size == 'sm' %}h-3{% elif size == 'lg' %}h-5{% else %}h-4{% endif %} bg-muted/60 rounded {% if animate %}animate-pulse{% endif %}"
                 style="width: {% widthratio forloop.counter0 1 4 %}0%;">
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    {# Form actions #}
    <div class="skeleton-form-actions flex items-center justify-end gap-3 pt-{% if size == 'sm' %}3{% elif size == 'lg' %}6{% else %}4{% endif %} mt-{% if size == 'sm' %}3{% elif size == 'lg' %}6{% else %}4{% endif %} border-t border-border">
        {# Cancel button #}
        <div class="{% if size == 'sm' %}h-8 w-20{% elif size == 'lg' %}h-12 w-28{% else %}h-10 w-24{% endif %} bg-muted/60 rounded-lg {% if animate %}animate-pulse{% endif %}"></div>

        {# Submit button #}
        <div class="{% if size == 'sm' %}h-8 w-24{% elif size == 'lg' %}h-12 w-32{% else %}h-10 w-28{% endif %} bg-muted rounded-lg {% if animate %}animate-pulse{% endif %}"></div>
    </div>

    <span class="sr-only">Loading form, please wait...</span>
</div>

{% endwith %}
