{# Widget Boutique - Catalogue de produits intégré #}
<div class="shop-widget-catalog" data-widget="shop-catalog">
    <div class="shop-container">
        {# Header avec filtres et recherche #}
        {% if config.showFilters or config.showSearch %}
            <div class="shop-filters-bar">
                <div class="shop-filters-wrapper">
                    {# Filtres de catégories #}
                    {% if config.showFilters and categories|length > 0 %}
                        <div class="shop-categories-filter">
                            <button class="shop-filter-btn {% if not selectedCategory %}active{% endif %}"
                                    data-category="all">
                                <i class="fas fa-th"></i> Tous les produits
                            </button>
                            {% for category in categories %}
                                <button class="shop-filter-btn {% if selectedCategory and selectedCategory.id == category.id %}active{% endif %}"
                                        data-category="{{ category.id }}">
                                    {{ category.name }}
                                </button>
                            {% endfor %}
                        </div>
                    {% endif %}

                    {# Barre de recherche #}
                    {% if config.showSearch %}
                        <div class="shop-search-box">
                            <input type="text"
                                   class="shop-search-input"
                                   placeholder="Rechercher un produit..."
                                   id="shop-search-{{ site.id }}">
                            <i class="fas fa-search"></i>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endif %}

        {# Grille de produits #}
        <div class="shop-products-grid"
             data-layout="{{ config.layout }}"
             data-columns="{{ config.columns }}"
             style="--shop-columns: {{ config.columns }};">

            {% if products|length == 0 %}
                <div class="shop-empty-state">
                    <div class="shop-empty-icon">
                        <i class="fas fa-shopping-bag fa-4x"></i>
                    </div>
                    <h3>Aucun produit disponible</h3>
                    <p>{% if selectedCategory %}Cette catégorie ne contient pas encore de produits.{% else %}La boutique est en cours de préparation.{% endif %}</p>
                </div>
            {% else %}
                {% for product in products %}
                    <div class="shop-product-card"
                         data-product-id="{{ product.id }}"
                         data-category="{{ product.category ? product.category.id : '' }}"
                         data-price="{{ product.price }}"
                         data-name="{{ product.name|lower }}">

                        {# Image du produit #}
                        <div class="shop-product-image" style="height: {{ config.imageHeight }};">
                            {% if product.image %}
                                <img src="{{ asset('uploads/shop/' ~ product.image) }}"
                                     alt="{{ product.name }}"
                                     loading="lazy">
                            {% else %}
                                <div class="shop-product-no-image">
                                    <i class="fas fa-image fa-3x"></i>
                                </div>
                            {% endif %}

                            {# Badge stock #}
                            {% if config.showStock %}
                                {% if product.isInStock %}
                                    <span class="shop-stock-badge shop-stock-available">
                                        <i class="fas fa-check-circle"></i> En stock
                                    </span>
                                {% else %}
                                    <span class="shop-stock-badge shop-stock-unavailable">
                                        <i class="fas fa-times-circle"></i> Épuisé
                                    </span>
                                {% endif %}
                            {% endif %}

                            {# Quick view button #}
                            {% if config.enableQuickView %}
                                <button class="shop-quick-view-btn"
                                        data-product="{{ product.id }}"
                                        title="Aperçu rapide">
                                    <i class="fas fa-eye"></i>
                                </button>
                            {% endif %}
                        </div>

                        {# Informations produit #}
                        <div class="shop-product-info">
                            {# Catégorie #}
                            {% if product.category %}
                                <span class="shop-product-category">{{ product.category.name }}</span>
                            {% endif %}

                            {# Nom du produit #}
                            <h3 class="shop-product-name">{{ product.name }}</h3>

                            {# Description courte #}
                            {% if product.description %}
                                <p class="shop-product-description">
                                    {{ product.description|length > 100 ? product.description|slice(0, 100) ~ '...' : product.description }}
                                </p>
                            {% endif %}

                            {# Prix et actions #}
                            <div class="shop-product-footer">
                                <div class="shop-product-price">
                                    {{ product.formattedPrice }}
                                </div>

                                <button class="shop-add-to-cart-btn"
                                        data-product-id="{{ product.id }}"
                                        data-product-name="{{ product.name }}"
                                        data-product-price="{{ product.price }}"
                                        {% if not product.isInStock %}disabled{% endif %}>
                                    <i class="fas fa-shopping-cart"></i>
                                    {% if product.isInStock %}Ajouter{% else %}Indisponible{% endif %}
                                </button>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
        </div>
    </div>
</div>

<style>
/* Shop Widget Catalog Styles - Intégré au design du site */
.shop-widget-catalog {
    width: 100%;
    padding: 2rem 0;
}

.shop-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Barre de filtres */
.shop-filters-bar {
    margin-bottom: 2rem;
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
}

.shop-filters-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.shop-categories-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.shop-filter-btn {
    padding: 0.5rem 1rem;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    white-space: nowrap;
}

.shop-filter-btn:hover {
    border-color: var(--site-primary-color, #667eea);
    color: var(--site-primary-color, #667eea);
}

.shop-filter-btn.active {
    background: var(--site-primary-color, #667eea);
    color: white;
    border-color: var(--site-primary-color, #667eea);
}

.shop-search-box {
    position: relative;
    flex: 0 0 auto;
    min-width: 250px;
}

.shop-search-input {
    width: 100%;
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 20px;
    font-size: 0.9rem;
}

.shop-search-input:focus {
    outline: none;
    border-color: var(--site-primary-color, #667eea);
}

.shop-search-box i {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

/* Grille de produits */
.shop-products-grid {
    display: grid;
    grid-template-columns: repeat(var(--shop-columns, 3), 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

@media (max-width: 992px) {
    .shop-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .shop-products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Carte produit */
.shop-product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.shop-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.shop-product-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f5f5f5;
}

.shop-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.shop-product-card:hover .shop-product-image img {
    transform: scale(1.05);
}

.shop-product-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}

/* Badge stock */
.shop-stock-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.shop-stock-available {
    background: #4caf50;
    color: white;
}

.shop-stock-unavailable {
    background: #f44336;
    color: white;
}

/* Quick view button */
.shop-quick-view-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(50px);
    background: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
}

.shop-product-card:hover .shop-quick-view-btn {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.shop-quick-view-btn:hover {
    background: var(--site-primary-color, #667eea);
    color: white;
}

/* Info produit */
.shop-product-info {
    padding: 1.2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.shop-product-category {
    color: var(--site-primary-color, #667eea);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.shop-product-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: #1e293b;
}

.shop-product-description {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 1rem;
    flex: 1;
}

.shop-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.shop-product-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--site-primary-color, #667eea);
}

.shop-add-to-cart-btn {
    padding: 0.6rem 1.2rem;
    background: var(--site-primary-color, #667eea);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shop-add-to-cart-btn:hover:not(:disabled) {
    background: var(--site-primary-color-dark, #5568d3);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.shop-add-to-cart-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* État vide */
.shop-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
}

.shop-empty-icon {
    color: #ccc;
    margin-bottom: 1rem;
}

.shop-empty-state h3 {
    font-size: 1.5rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.shop-empty-state p {
    color: #94a3b8;
}
</style>