{% comment %}
Card Grid Skeleton Component
============================

Animated skeleton placeholder for card grid layouts while content loads.

Purpose:
    Displays pulsing skeleton cards in a grid layout for pages like
    parks list, rides list, and search results.

Usage Examples:
    Basic card grid:
        {% include 'components/skeletons/card_grid_skeleton.html' %}

    Custom card count:
        {% include 'components/skeletons/card_grid_skeleton.html' with cards=8 %}

    Horizontal cards:
        {% include 'components/skeletons/card_grid_skeleton.html' with layout='horizontal' %}

    Custom columns:
        {% include 'components/skeletons/card_grid_skeleton.html' with cols='4' %}

Parameters:
    Optional:
    - cards: Number of skeleton cards to display (default: 6)
    - cols: Grid columns ('2', '3', '4', 'auto') (default: 'auto')
    - layout: Card layout ('vertical', 'horizontal') (default: 'vertical')
    - show_image: Show image placeholder (default: True)
    - show_badge: Show badge placeholder (default: True)
    - show_footer: Show footer with stats (default: True)
    - image_aspect: Image aspect ratio ('video', 'square', 'portrait') (default: 'video')
    - 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 cards=cards|default:6 cols=cols|default:'auto' layout=layout|default:'vertical' show_image=show_image|default:True show_badge=show_badge|default:True show_footer=show_footer|default:True image_aspect=image_aspect|default:'video' animate=animate|default:True %}

<div class="skeleton-card-grid grid gap-4 sm:gap-6
            {% if cols == '2' %}grid-cols-1 sm:grid-cols-2
            {% elif cols == '3' %}grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
            {% elif cols == '4' %}grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4
            {% else %}grid-cols-1 sm:grid-cols-2 lg:grid-cols-3{% endif %}"
     role="status"
     aria-busy="true"
     aria-label="Loading cards...">

    {% for i in "123456789012"|slice:cards %}
    <div class="skeleton-card bg-card rounded-xl border border-border overflow-hidden
                {% if layout == 'horizontal' %}flex flex-row{% else %}flex flex-col{% endif %}">

        {# Image placeholder #}
        {% if show_image %}
        <div class="{% if layout == 'horizontal' %}w-1/3 flex-shrink-0{% else %}w-full{% endif %}">
            <div class="{% if image_aspect == 'square' %}aspect-square{% elif image_aspect == 'portrait' %}aspect-[3/4]{% else %}aspect-video{% endif %} bg-muted {% if animate %}animate-pulse{% endif %}"
                 style="animation-delay: {{ forloop.counter0 }}50ms;">
            </div>
        </div>
        {% endif %}

        {# Content area #}
        <div class="flex-1 p-4 space-y-3">
            {# Badge placeholder #}
            {% if show_badge %}
            <div class="flex items-center gap-2">
                <div class="h-5 w-16 bg-muted rounded-full {% if animate %}animate-pulse{% endif %}" style="animation-delay: {{ forloop.counter0 }}75ms;"></div>
            </div>
            {% endif %}

            {# Title #}
            <div class="space-y-2">
                <div class="h-5 bg-muted rounded {% if animate %}animate-pulse{% endif %}"
                     style="width: {% widthratio forloop.counter0 1 3 %}5%; animation-delay: {{ forloop.counter }}00ms;">
                </div>
                <div class="h-4 w-3/4 bg-muted/70 rounded {% if animate %}animate-pulse{% endif %}"
                     style="animation-delay: {{ forloop.counter }}25ms;">
                </div>
            </div>

            {# Description lines #}
            <div class="space-y-2 pt-2">
                <div class="h-3 bg-muted/60 rounded {% if animate %}animate-pulse{% endif %}" style="animation-delay: {{ forloop.counter }}50ms;"></div>
                <div class="h-3 w-5/6 bg-muted/60 rounded {% if animate %}animate-pulse{% endif %}" style="animation-delay: {{ forloop.counter }}75ms;"></div>
            </div>

            {# Footer with stats #}
            {% if show_footer %}
            <div class="flex items-center justify-between pt-3 mt-auto border-t border-border">
                <div class="flex items-center gap-4">
                    <div class="h-4 w-16 bg-muted/50 rounded {% if animate %}animate-pulse{% endif %}"></div>
                    <div class="h-4 w-12 bg-muted/50 rounded {% if animate %}animate-pulse{% endif %}"></div>
                </div>
                <div class="h-4 w-20 bg-muted/50 rounded {% if animate %}animate-pulse{% endif %}"></div>
            </div>
            {% endif %}
        </div>
    </div>
    {% endfor %}

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

{% endwith %}
