{#
  Product Grid
  ============
  Responsive grid layout for product listings.
  Includes loading skeletons and empty state.

  Parameters:
    - products_var: Alpine.js variable containing products array (default: 'products')
    - loading_var: Alpine.js variable for loading state (default: 'loading')
    - columns: Dict with breakpoint column counts (default: {sm: 2, md: 3, lg: 4})
    - gap: Gap size 'sm' | 'md' | 'lg' (default: 'md')
    - card_size: Product card size 'sm' | 'md' | 'lg' (default: 'md')
    - show_rating: Pass to product cards (default: true)
    - show_quick_add: Pass to product cards (default: true)
    - show_wishlist: Pass to product cards (default: true)
    - show_store: Pass to product cards (default: false)
    - empty_title: Title for empty state (default: 'No products found')
    - empty_message: Message for empty state (default: 'Try adjusting your filters')
    - empty_icon: Icon for empty state (default: 'shopping-bag')

  Usage:
    {% from 'shared/macros/storefront/product-grid.html' import product_grid, product_grid_skeleton %}

    {{ product_grid() }}

    {# With custom columns #}
    {{ product_grid(columns={'sm': 1, 'md': 2, 'lg': 3}) }}
#}

{% macro product_grid(
    products_var='products',
    loading_var='loading',
    columns=none,
    gap='md',
    card_size='md',
    show_rating=true,
    show_quick_add=true,
    show_wishlist=true,
    show_store=false,
    empty_title='No products found',
    empty_message='Try adjusting your filters or search terms',
    empty_icon='shopping-bag'
) %}
{% from 'shared/macros/storefront/product-card.html' import product_card %}

{% set cols = columns if columns else {'sm': 2, 'md': 3, 'lg': 4} %}
{% set gaps = {'sm': 'gap-3', 'md': 'gap-4', 'lg': 'gap-6'} %}

{# Loading State #}
<div x-show="{{ loading_var }}" class="grid grid-cols-{{ cols.sm }} md:grid-cols-{{ cols.md }} lg:grid-cols-{{ cols.lg }} {{ gaps[gap] }}">
    <template x-for="i in 8" :key="i">
        {{ product_skeleton(size=card_size) }}
    </template>
</div>

{# Empty State #}
<div
    x-show="!{{ loading_var }} && {{ products_var }}.length === 0"
    class="flex flex-col items-center justify-center py-16 px-4"
>
    <div class="w-16 h-16 mb-4 text-gray-300 dark:text-gray-600">
        <span x-html="$icon('{{ empty_icon }}', 'w-full h-full')"></span>
    </div>
    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">{{ empty_title }}</h3>
    <p class="text-sm text-gray-500 dark:text-gray-400 text-center max-w-sm">{{ empty_message }}</p>
</div>

{# Product Grid #}
<div
    x-show="!{{ loading_var }} && {{ products_var }}.length > 0"
    class="grid grid-cols-{{ cols.sm }} md:grid-cols-{{ cols.md }} lg:grid-cols-{{ cols.lg }} {{ gaps[gap] }}"
>
    <template x-for="product in {{ products_var }}" :key="product.id">
        {{ product_card(
            product_var='product',
            size=card_size,
            show_rating=show_rating,
            show_quick_add=show_quick_add,
            show_wishlist=show_wishlist,
            show_store=show_store
        ) }}
    </template>
</div>
{% endmacro %}


{#
  Product Skeleton
  ================
  Loading skeleton for a single product card.

  Parameters:
    - size: 'sm' | 'md' | 'lg' (default: 'md')

  Usage:
    {{ product_skeleton() }}
#}
{% macro product_skeleton(size='md') %}
{% set sizes = {
    'sm': {'card': 'max-w-[200px]', 'image': 'h-32'},
    'md': {'card': 'max-w-[280px]', 'image': 'h-48'},
    'lg': {'card': 'max-w-[360px]', 'image': 'h-64'}
} %}
{% set s = sizes[size] %}

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden {{ s.card }} animate-pulse">
    {# Image Skeleton #}
    <div class="{{ s.image }} bg-gray-200 dark:bg-gray-700"></div>

    {# Content Skeleton #}
    <div class="p-3 space-y-3">
        {# Title #}
        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>

        {# Rating #}
        <div class="flex gap-1">
            <template x-for="i in 5" :key="i">
                <div class="w-4 h-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
            </template>
        </div>

        {# Price #}
        <div class="h-5 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>

        {# Button #}
        <div class="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
    </div>
</div>
{% endmacro %}


{#
  Product List Item
  =================
  Horizontal product card for list views.

  Parameters:
    - product_var: Alpine.js variable name (default: 'product')
    - show_rating: Show star rating (default: true)
    - show_quick_add: Show add to cart button (default: true)
    - compact: Use compact spacing (default: false)

  Usage:
    <template x-for="product in products" :key="product.id">
        {{ product_list_item() }}
    </template>
#}
{% macro product_list_item(
    product_var='product',
    show_rating=true,
    show_quick_add=true,
    compact=false
) %}
<div class="flex gap-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm p-{{ '3' if compact else '4' }} hover:shadow-md transition-shadow">
    {# Image #}
    <a :href="{{ product_var }}.url" class="flex-shrink-0">
        <img
            :src="{{ product_var }}.image_url"
            :alt="{{ product_var }}.name"
            class="w-{{ '20' if compact else '32' }} h-{{ '20' if compact else '32' }} object-cover rounded-lg"
            loading="lazy"
        >
    </a>

    {# Content #}
    <div class="flex-1 min-w-0">
        <h3 class="font-medium text-gray-900 dark:text-gray-100 truncate">
            <a :href="{{ product_var }}.url" class="hover:text-purple-600 dark:hover:text-purple-400" x-text="{{ product_var }}.name"></a>
        </h3>

        {% if show_rating %}
        <div class="flex items-center gap-1 mt-1" x-show="{{ product_var }}.rating">
            <div class="flex">
                <template x-for="i in 5" :key="i">
                    <span
                        x-html="$icon('star', 'w-3 h-3')"
                        :class="i <= Math.round({{ product_var }}.rating) ? 'text-yellow-400 fill-current' : 'text-gray-300 dark:text-gray-600'"
                    ></span>
                </template>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400" x-text="'(' + {{ product_var }}.review_count + ')'"></span>
        </div>
        {% endif %}

        <div class="flex items-center gap-2 mt-2">
            <span
                class="font-bold"
                :class="{{ product_var }}.sale_price ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'"
                x-text="'€' + ({{ product_var }}.sale_price || {{ product_var }}.price).toFixed(2)"
            ></span>
            <span
                x-show="{{ product_var }}.sale_price"
                class="text-sm text-gray-400 line-through"
                x-text="'€' + {{ product_var }}.price.toFixed(2)"
            ></span>
        </div>
    </div>

    {# Actions #}
    {% if show_quick_add %}
    <div class="flex-shrink-0 self-center">
        <button
            type="button"
            @click="addToCart({{ product_var }})"
            :disabled="{{ product_var }}.stock === 0"
            class="p-2 text-purple-600 hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            :aria-label="'Add ' + {{ product_var }}.name + ' to cart'"
        >
            <span x-html="$icon('shopping-cart', 'w-5 h-5')"></span>
        </button>
    </div>
    {% endif %}
</div>
{% endmacro %}