{% extends '@SyliusShop/layout.html.twig' %}

{% block title %}
Actualités - {{ parent() }}
{% endblock %}

{% block content %}
<!-- Page wrapper for sticky footer -->
<!-- Wraps everything except footer to push footer to the bottom of the page if there is little content -->
<!-- Breadcrumb -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ path('sylius_shop_homepage') }}">Accueil</a></li>
        <li class="breadcrumb-item active" aria-current="page">Blog</li>
    </ol>
</nav>
<!-- Page content -->
<section class="position-relative overflow-hidden pb-3 ">
    <div class="container mt-4 mb-lg-5 pt-lg-2 pb-5">

        <!-- Page title + Layout switcher + Search form -->
        <div class="row align-items-end gy-3 mb-4 pb-lg-3 pb-1">
            <div class="col-lg-5 col-md-4">
                <h1 class="mb-2 mb-md-0">{{ pageTitle|default('Actualités') }}</h1>
            </div>
        </div>

        <!-- post grid -->
        <div class="row row-cols-lg-3 row-cols-sm-2 row-cols-1 gy-md-4 gy-2">
            {% for post in articles %}
            <!-- Item -->
            <div class="col pb-3">
                <article class="card border-0 shadow-sm h-100">
                    <div class="position-relative">
                        <a href="{{ path('article_show', {'slug': post.slug}) }}" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
                        {% set img = post.image is defined and post.image ? post.image : asset('build/app/shop/images/01.jpg', 'app.shop') %}
                        <img src="{{ img }}" class="card-img-top" alt="Image" style="height: 220px; width:100%; object-fit :cover">
                    </div>
                    <div class="card-body pb-4">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            {% if post.category is defined and post.category.name is defined %}
                                <a href="{{ path('article_show', {'slug': post.slug}) }}" class="badge fs-sm text-nav bg-secondary text-decoration-none">{{ post.category.name }}</a>
                            {% endif %}
                            {% if post.created_at is defined %}
                                <span class="fs-sm text-muted">{{ post.created_at|date_fr }}</span>
                            {% endif %}
                        </div>
                        <h3 class="h5 mb-0">
                            <a href="{{ path('article_show', {'slug': post.slug}) }}">{{ post.title }}</a>
                        </h3>
                        {% if post.excerpt is defined and post.excerpt %}
                            <div>{{ post.excerpt|html_unescape }}</div>
                        {% endif %}
                    </div>
                </article>
            </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% set routeName = (archive is defined and archive) ? 'article_archive' : 'article_index' %}
        <div class="pagination mt-4">
            <!-- Bouton précédent -->
            <a href="{{ path(routeName, {'page': current_page - 1}) }}" class="btn btn-primary {% if current_page == 1 %}disabled{% endif %}">
                <i class="bi bi-chevron-compact-left"></i>
            </a>

            <!-- Pages -->
            {% for i in 1..total_pages %}
            <a href="{{ path(routeName, {'page': i}) }}" class="btn btn-link {% if i == current_page %}active{% endif %}">
                {{ i }}
            </a>
            {% endfor %}

            <!-- Bouton suivant -->
            <a href="{{ path(routeName, {'page': current_page + 1}) }}" class="btn btn-primary {% if current_page == total_pages %}disabled{% endif %}">
                <i class="bi bi-chevron-compact-right"></i>
            </a>
        </div>
        
        <!-- Lien vers les archives / actualités -->
        <div class="mt-4 d-flex justify-content-center">
            {% if archive is defined and archive %}
                <a class="btn btn-outline-primary" href="{{ path('article_index', {'page': 1}) }}">Retour aux actualités</a>
            {% else %}
                <a class="btn btn-outline-secondary" href="{{ path('article_archive', {'page': 1}) }}">Voir les archives</a>
            {% endif %}
        </div>

    </div>
</section>
{% endblock %}