index.html.twig (Galerie)

{# On inclut Bootstrap et le CSS perso #}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="{{ asset('css/galerie.css') }}" rel="stylesheet" />

<div class="container mt-5">
    <div class="text-center mb-5">
        <h1 class="display-4">Ma Galerie d'images</h1>
        <p class="lead text-muted">Page {{ page }}</p>
    </div>

    <div class="row">
        {% for uneImage in images %}
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="card h-100 shadow-sm hover-effect">
                    
                    <img src="{{ asset('images/' ~ uneImage.url) }}" 
                         class="card-img-top" 
                         alt="{{ uneImage.titre }}" 
                         style="height: 225px; object-fit: cover;">
                    
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title text-center">{{ uneImage.titre }}</h5>
                        
                        {# Affichage de l'auteur via la relation #}
                        <p class="card-text text-center text-muted small mt-auto">
                            <i class="bi bi-person"></i> Par : <strong>{{ uneImage.auteur.nom }}</strong>
                        </p>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="col-12">
                <div class="alert alert-warning text-center" role="alert">
                    Aucune image trouvée dans la base de données. 
                    <br>Commence par <a href="{{ path('ajout_image') }}">ajouter une image</a>.
                </div>
            </div>
        {% endfor %}
    </div>

    {# Navigation / Pagination #}
    <div class="d-flex justify-content-between align-items-center mt-4 mb-5 p-3 bg-light rounded shadow-sm">
        
        {% if page > 1 %}
            <a href="{{ path('accueil_galerie', {'page': page - 1}) }}" class="btn btn-outline-secondary">
                &larr; Précédent
            </a>
        {% else %}
            <span class="text-muted disabled">&larr; Précédent</span>
        {% endif %}

        <a href="{{ path('accueil_galerie', {'page': page + 1}) }}" class="btn btn-outline-primary">
            Suivant &rarr;
        </a>
        
        <a href="{{ path('ajout_image') }}" class="btn btn-success">
            + Ajouter une image
        </a>

        <a href="{{ path('ajout_auteur') }}" class="btn btn-outline-dark ms-2">
            + Nouvel Auteur
        </a>
    </div>
</div>