{% extends 'base.html.twig' %}

{% block title %}Accueil - Derniers articles{% endblock %}

{% block body %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-10 col-12">

<div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
                 <img src="https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80" 
                 class="d-block w-100" alt="AI Technology" style="height: 450px; object-fit: cover;">
            <div class="carousel-caption d-none d-md-block">
                <h3>L'avenir de l'informatique 2025</h3>
                <p>Découvrez les formations qui recrutent en Développement web et Mobile </p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80" 
                 class="d-block w-100" alt="Robotics" style="height: 450px; object-fit: cover;">
            <div class="carousel-caption d-none d-md-block">
                <h3>Robotique et Automatisation</h3>
                <p>Comment les robots modernes changent l'industrie</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://images.unsplash.com/photo-1534723328310-e82dad3ee43f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80" 
                 class="d-block w-100" alt="Machine Learning" style="height: 450px; object-fit: cover;">
            <div class="carousel-caption d-none d-md-block">
                <h3>Machine Learning avancé</h3>
                <p>Les nouvelles techniques d'apprentissage automatique</p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        <span class="visually-hidden">Précédent</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
        <span class="visually-hidden">Suivant</span>
    </button>
</div>

<style>
    .carousel {
        margin: 20px 0 40px 0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .carousel-caption {
        background: rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        padding: 20px;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }
    
    .carousel-control-prev, .carousel-control-next {
        width: 5%;
    }
</style>

            <h1 class="mb-4 text-center">📰 Derniers articles</h1>

            {# First row: one big post left, two stacked posts right #}
            <div class="row mb-4">
                <div class="col-lg-8 col-12 mb-3 mb-lg-0">
                    {% if posts[0] is defined %}
                        <article class="card shadow-sm" itemscope itemtype="https://schema.org/Article">
                            {% if posts[0].image %}
                                <img src="{{ asset('uploads/images/' ~ posts[0].image) }}" 
                                     class="card-img-top"
                                     alt="{{ posts[0].title|default('Article image') }}"
                                     loading="eager" 
                                     itemprop="image">
                            {% endif %}
                            <div class="card-body">
                                <div class="post-meta">
                                    <i class="fa-solid fa-user"></i> 
                                    <span class="author" itemprop="author">{{ posts[0].auteur.pseudo }}</span><br>
                                    <i class="fa-solid fa-newspaper"></i> 
                                    <span class="category" itemprop="articleSection">{{ posts[0].category.nameCategory }}</span>
                                </div>
                                <h2 itemprop="headline">{{ posts[0].title }}</h2>
                                <p itemprop="description">{{ posts[0].subtitle }}</p>
                                <div class="mt-3">
                                    <a href="{{ path('app_posts_show_user', {'id': posts[0].id}) }}" 
                                       class="btn btn-primary">
                                        <i class="fa-solid fa-circle-info"></i> Voir les détails
                                    </a>
                                </div>
                            </div>
                        </article>
                    {% endif %}
                </div>

                <div class="col-lg-4 col-12">
                    <div class="row">
                        {% for i in 1..2 %}
                            {% if posts[i] is defined %}
                                <article class="col-12 mb-3">
                                    <div class="card shadow-sm" itemscope itemtype="https://schema.org/Article">
                                        {% if posts[i].image %}
                                            <img src="{{ asset('uploads/images/' ~ posts[i].image) }}" 
                                                class="card-img-top"
                                                 alt="{{ posts[i].title|default('Article image') }}"
                                                 width="300" height="150"
                                                 sizes="(max-width: 768px) 100vw, 50vw"
                                                 loading="lazy"
                                                 itemprop="image">
                                        {% endif %}
                                        <div class="card-body">
                                            <div class="post-meta">
                                                <i class="fa-solid fa-user"></i> 
                                                <span class="author" itemprop="author">{{ posts[i].auteur.pseudo }}</span><br>
                                                <i class="fa-solid fa-newspaper"></i> 
                                                <span class="category" itemprop="articleSection">{{ posts[i].category.nameCategory }}</span>
                                            </div>
                                            <h3 itemprop="headline">{{ posts[i].title|slice(0,40) ~ '...'  }}</h3>
                                            <p itemprop="description">{{ posts[i].subtitle|slice(0,80) ~ '...' }}</p>
                                            <div class="mt-3">
                                                <a href="{{ path('app_posts_show_user', {'id': posts[i].id}) }}" 
                                                   class="btn btn-sm btn-outline-primary">
                                                   <i class="fa-solid fa-circle-info"></i> Voir les détails
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>

            {# Second row: two small posts left, one big post right #}
            <div class="row">
                <div class="col-lg-4 col-12 order-lg-1 order-2">
                    <div class="row">
                        {% for i in 3..4 %}
                            {% if posts[i] is defined %}
                                <article class="col-12 mb-3">
                                    <div class="card shadow-sm" itemscope itemtype="https://schema.org/Article">
                                        {% if posts[i].image %}
                                            <img src="{{ asset('uploads/images/' ~ posts[i].image) }}" 
                                                 class="side-card-img"
                                                 alt="{{ posts[i].title|default('Article image') }}"
                                                 loading="lazy"
                                                 itemprop="image">
                                        {% endif %}
                                        <div class="card-body">
                                            <div class="post-meta">
                                                <i class="fa-solid fa-user"></i> 
                                                <span class="author" itemprop="author">{{ posts[i].auteur.pseudo }}</span><br>
                                                <i class="fa-solid fa-newspaper"></i> 
                                                <span class="category" itemprop="articleSection">{{ posts[i].category.nameCategory }}</span>
                                            </div>
                                            <h3 itemprop="headline">{{ posts[i].title }}</h3>
                                            <p itemprop="description">{{ posts[i].subtitle|slice(0,80) ~ '...' }}</p>
                                            <div class="mt-3">
                                                <a href="{{ path('app_posts_show_user', {'id': posts[i].id}) }}" 
                                                   class="btn btn-sm btn-outline-primary">
                                                   <i class="fa-solid fa-circle-info"></i> Voir les détails
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>

                <div class="col-lg-8 col-12 order-lg-2 order-1 mb-3 mb-lg-0">
                    {% if posts[5] is defined %}
                        <article class="card shadow-sm" itemscope itemtype="https://schema.org/Article">
                            {% if posts[5].image %}
                                <img src="{{ asset('uploads/images/' ~ posts[5].image) }}" 
                                     class="card-img-top"
                                     alt="{{ posts[5].title|default('Article image') }}"
                                     loading="eager"   
                                     itemprop="image">
                            {% endif %}
                            <div class="card-body">
                                <div class="post-meta">
                                    <i class="fa-solid fa-user"></i> 
                                    <span class="author" itemprop="author">{{ posts[5].auteur.pseudo }}</span><br>
                                    <i class="fa-solid fa-newspaper"></i> 
                                    <span class="category" itemprop="articleSection">{{ posts[5].category.nameCategory }}</span>
                                </div>
                                <h2 itemprop="headline">{{ posts[5].title }}</h2>
                                <p itemprop="description">{{ posts[5].subtitle }}</p>
                                <div class="mt-3">
                                    <a href="{{ path('app_posts_show_user', {'id': posts[5].id}) }}" 
                                       class="btn btn-primary">
                                       <i class="fa-solid fa-circle-info"></i> Voir les détails
                                    </a>
                                </div>
                            </div>
                        </article>
                    {% endif %}
                </div>
            </div>

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