{# Widget Blog - Affiche les articles de blog #}
{% if posts is defined and posts|length > 0 %}
<div class="blog-widget" style="margin: 40px 0;">
    {% set layoutStyle = layout == 'list' ? 'display: flex; flex-direction: column;' : (layout == 'masonry' ? 'column-count: ' ~ columns ~ '; column-gap: 30px;' : 'display: grid; grid-template-columns: repeat(' ~ columns ~ ', 1fr); gap: 30px;') %}
    <div class="blog-posts blog-layout-{{ layout }}" style="{{ layoutStyle }}">
        {% for post in posts %}
        <article class="blog-post-card" style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: all 0.3s ease;">
            {% if showImage and post.image %}
            <div class="post-image" style="width: 100%; height: 240px; overflow: hidden;">
                <img src="{{ asset('uploads/' ~ post.image) }}"
                     alt="{{ post.title }}"
                     style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;">
            </div>
            {% endif %}

            <div class="post-content" style="padding: 24px;">
                <div style="display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; align-items: center;">
                    {% if showDate %}
                    <time style="display: inline-block; color: #64748b; font-size: 14px;">
                        <i class="far fa-calendar"></i> {{ post.creationDate|date('d M Y') }}
                    </time>
                    {% endif %}

                    {% if showCategory and post.category %}
                    <span class="post-category" style="display: inline-block; background: var(--primary-color); color: var(--primary-contrast); padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600;">
                        {{ post.category.name }}
                    </span>
                    {% endif %}
                </div>

                <h3 style="margin: 0 0 12px 0; font-size: 20px; font-weight: 700; color: var(--color-text, #1e293b);">
                    {% if site and page %}
                        <a href="{{ site_url(site, 'site_page_blog_detail', {siteName: site.internalName, name: page.nameMenuUrl, post: post.id, postTitle: post.title|lower|replace({' ': '-', '/': '-', '.': '', 'é': 'e', 'è': 'e', 'ê': 'e', 'à': 'a', 'ù': 'u', 'ô': 'o', 'î': 'i', 'ç': 'c', '(': '', ')': '', '\'': ''})}) }}"
                           style="color: inherit; text-decoration: none; transition: color 0.3s ease;">
                            {{ post.title }}
                        </a>
                    {% else %}
                        {{ post.title }}
                    {% endif %}
                </h3>

                {% if showExcerpt and post.introduction %}
                <p style="color: #475569; line-height: 1.6; margin-bottom: 16px;">
                    {{ post.introduction|length > 150 ? post.introduction|slice(0, 150) ~ '...' : post.introduction }}
                </p>
                {% endif %}

                {% if site and page %}
                <a href="{{ site_url(site, 'site_page_blog_detail', {siteName: site.internalName, name: page.nameMenuUrl, post: post.id, postTitle: post.title|lower|replace({' ': '-', '/': '-', 'é': 'e', 'è': 'e', 'ê': 'e', 'à': 'a', 'ù': 'u', 'ô': 'o', 'î': 'i', 'ç': 'c', '(': '', ')': '', '\'': ''})}) }}"
                   style="display: inline-flex; align-items: center; color: var(--primary-color); text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.3s ease;">
                    Lire la suite
                    <i class="fas fa-arrow-right" style="margin-left: 8px; font-size: 12px;"></i>
                </a>
                {% endif %}
            </div>
        </article>
        {% endfor %}
    </div>

    {# Pagination #}
    {% if totalPages > 1 %}
    <div class="blog-pagination" style="margin-top: 60px; display: flex; justify-content: center; align-items: center; gap: 8px;">
        {% if currentPage > 1 %}
        <a href="?page={{ currentPage - 1 }}" class="pagination-btn pagination-prev"
           style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: white; border: 1px solid #e2e8f0; border-radius: 8px; color: #64748b; text-decoration: none; transition: all 0.3s ease; font-weight: 600;">
            <i class="fas fa-chevron-left"></i>
        </a>
        {% endif %}

        {% for page in 1..totalPages %}
            {% if page == currentPage %}
                <span class="pagination-btn pagination-current"
                      style="display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; background: var(--primary-color); border: none; border-radius: 8px; color: var(--primary-contrast); text-decoration: none; font-weight: 700; cursor: default;">
                    {{ page }}
                </span>
            {% elseif page == 1 or page == totalPages or (page >= currentPage - 2 and page <= currentPage + 2) %}
                <a href="?page={{ page }}" class="pagination-btn"
                   style="display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; background: white; border: 1px solid #e2e8f0; border-radius: 8px; color: #64748b; text-decoration: none; transition: all 0.3s ease; font-weight: 600;">
                    {{ page }}
                </a>
            {% elseif page == currentPage - 3 or page == currentPage + 3 %}
                <span style="display: inline-flex; align-items: center; color: #cbd5e1; font-weight: 600;">...</span>
            {% endif %}
        {% endfor %}

        {% if currentPage < totalPages %}
        <a href="?page={{ currentPage + 1 }}" class="pagination-btn pagination-next"
           style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: white; border: 1px solid #e2e8f0; border-radius: 8px; color: #64748b; text-decoration: none; transition: all 0.3s ease; font-weight: 600;">
            <i class="fas fa-chevron-right"></i>
        </a>
        {% endif %}
    </div>

    <div class="blog-pagination-info" style="text-align: center; margin-top: 20px; color: #64748b; font-size: 14px;">
        Page {{ currentPage }} sur {{ totalPages }} ({{ totalPosts }} article{{ totalPosts > 1 ? 's' : '' }})
    </div>
    {% endif %}
</div>

<style>
    .blog-post-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }

    .blog-post-card:hover .post-image img {
        transform: scale(1.05);
    }

    .blog-post-card h3 a:hover {
        color: var(--primary-hover);
    }

    /* Mode liste */
    .blog-layout-list .blog-post-card {
        display: flex;
        flex-direction: row;
        margin-bottom: 30px;
        max-width: 100%;
    }

    .blog-layout-list .post-image {
        width: 300px !important;
        height: 200px !important;
        flex-shrink: 0;
    }

    .blog-layout-list .post-content {
        flex: 1;
    }

    /* Mode mosaïque */
    .blog-layout-masonry .blog-post-card {
        display: inline-block;
        width: 100%;
        margin-bottom: 30px;
        break-inside: avoid;
    }

    /* Responsive - Mode grille */
    @media (max-width: 992px) {
        .blog-layout-grid {
            grid-template-columns: repeat(2, 1fr) !important;
        }

        .blog-layout-masonry {
            column-count: 2 !important;
        }
    }

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

        .blog-layout-list .blog-post-card {
            flex-direction: column;
        }

        .blog-layout-list .post-image {
            width: 100% !important;
            height: 240px !important;
        }

        .blog-layout-masonry {
            column-count: 1 !important;
        }
    }

    .pagination-btn:hover {
        background: var(--primary-color) !important;
        color: var(--primary-contrast) !important;
        border-color: var(--primary-color) !important;
        transform: translateY(-2px);
    }

    .pagination-current {
        cursor: default !important;
    }

    @media (max-width: 576px) {
        .blog-pagination {
            gap: 4px !important;
        }

        .pagination-btn {
            min-width: 36px !important;
            height: 36px !important;
            font-size: 14px;
        }
    }
</style>
{% else %}
<div style="text-align: center; padding: 60px 20px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;">
    <i class="fas fa-blog" style="font-size: 48px; color: #cbd5e1; margin-bottom: 16px;"></i>
    <p style="color: #64748b; font-size: 16px; margin: 0;">Aucun article publié pour le moment.</p>
</div>
{% endif %}