{% comment %}
List Skeleton Component
=======================

Animated skeleton placeholder for list items while content loads.

Purpose:
    Displays pulsing skeleton rows to indicate loading state for list views,
    reducing perceived loading time and preventing layout shift.

Usage Examples:
    Basic list skeleton:
        {% include 'components/skeletons/list_skeleton.html' %}

    Custom row count:
        {% include 'components/skeletons/list_skeleton.html' with rows=10 %}

    With avatar placeholder:
        {% include 'components/skeletons/list_skeleton.html' with show_avatar=True %}

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

Parameters:
    Optional:
    - rows: Number of skeleton rows to display (default: 5)
    - show_avatar: Show circular avatar placeholder (default: False)
    - show_meta: Show metadata line below title (default: True)
    - show_action: Show action button placeholder (default: False)
    - size: 'sm', 'md', 'lg' for padding/spacing (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
    - aria-label describes loading state
{% endcomment %}

{% with rows=rows|default:5 show_avatar=show_avatar|default:False show_meta=show_meta|default:True show_action=show_action|default:False size=size|default:'md' animate=animate|default:True %}

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

    {% for i in "12345678901234567890"|slice:rows %}
    <div class="skeleton-list-item flex items-center gap-{% if size == 'sm' %}2{% elif size == 'lg' %}4{% else %}3{% endif %} {% if size == 'sm' %}p-2{% elif size == 'lg' %}p-5{% else %}p-4{% endif %} bg-card rounded-lg border border-border">

        {# Avatar placeholder #}
        {% if show_avatar %}
        <div class="flex-shrink-0">
            <div class="{% if size == 'sm' %}w-8 h-8{% elif size == 'lg' %}w-14 h-14{% else %}w-10 h-10{% endif %} rounded-full bg-muted {% if animate %}animate-pulse{% endif %}"></div>
        </div>
        {% endif %}

        {# Content area #}
        <div class="flex-1 min-w-0 space-y-{% if size == 'sm' %}1{% elif size == 'lg' %}3{% else %}2{% endif %}">
            {# Title line #}
            <div class="{% if size == 'sm' %}h-3{% elif size == 'lg' %}h-5{% else %}h-4{% endif %} bg-muted rounded {% if animate %}animate-pulse{% endif %}"
                 style="width: {% widthratio forloop.counter0 1 7 %}0%;">
            </div>

            {# Meta line #}
            {% if show_meta %}
            <div class="{% if size == 'sm' %}h-2{% elif size == 'lg' %}h-4{% else %}h-3{% endif %} bg-muted/70 rounded {% if animate %}animate-pulse{% endif %}"
                 style="width: {% widthratio forloop.counter0 1 5 %}0%; animation-delay: {{ forloop.counter0 }}00ms;">
            </div>
            {% endif %}
        </div>

        {# Action button placeholder #}
        {% if show_action %}
        <div class="flex-shrink-0">
            <div class="{% if size == 'sm' %}w-16 h-6{% elif size == 'lg' %}w-24 h-10{% else %}w-20 h-8{% endif %} bg-muted rounded {% if animate %}animate-pulse{% endif %}"></div>
        </div>
        {% endif %}
    </div>
    {% endfor %}

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

{% endwith %}
