{% extends 'manager/manager_base.html.twig' %}

{% block title %}Détails de l'article de présentation{% endblock %}

{% block content %}
    <div class="container-fluid">
        {# Utilisation de H3 pour une meilleure cohérence avec le style de la page de liste #}
        <h3 class="mb-5">Détails de l'article de présentation</h3>

        {# Section : Affichage des messages flash (Réutilisé de votre code précédent pour les labels dynamiques) #}
        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    {# Utilisation de la classe moderne pour le bouton de fermeture (Bootstrap 5) #}
                    <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endfor %}

        {% if presentation is defined and presentation %}
            {# Conteneur principal - Carte ombrée #}
            <div class="card shadow mb-4">
                
                {# En-tête de la carte : Titre et Bouton Modifier #}
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    {# Amélioration du titre de la carte (H4 est plus approprié que H6) #}
                    <h4 class="text-body mb-0"><i class="fas fa-file-alt me-2"></i> {{ presentation.titre }}</h4>
                    
                    {# Bouton d'édition #}
                    <a href="{{ path('app_manager_presentation_edit', {'idPresentation': presentation.idPresentation}) }}" class="btn btn-warning btn-sm">
                        <i class="fas fa-edit"></i> Modifier l'article
                    </a>
                </div>
                
                <div class="card-body">
                    
                    {# Section 1 : Métadonnées rapides (ID, Statut, Dates) #}
                    <div class="row mb-4 border-bottom pb-3">
                        
                        {# Métadonnées gauche #}
                        <div class="col-md-6">
                            <dl class="row mb-0">
                                <dt class="col-sm-4 text-muted small">Identifiant (ID)</dt>
                                <dd class="col-sm-8 small">#{{ presentation.idPresentation }}</dd>

                                <dt class="col-sm-4 text-muted small">Titre</dt>
                                <dd class="col-sm-8"><strong>{{ presentation.titre }}</strong></dd>
                            </dl>
                        </div>
                        
                        {# Métadonnées droite #}
                        <div class="col-md-6">
                            <dl class="row mb-0">
                                <dt class="col-sm-4 text-muted small">Statut</dt>
                                <dd class="col-sm-8">
                                    {# Affichage du statut avec badge coloré pour l'harmonisation #}
                                    {% if presentation.statut %}
                                        <span class="badge bg-success text-white">
                                            <i class="fas fa-check-circle"></i> Publié
                                        </span>
                                    {% else %}
                                        <span class="badge bg-danger text-white">
                                            <i class="fas fa-minus-circle"></i> Brouillon
                                        </span>
                                    {% endif %}
                                </dd>

                                {# Utilisation de 'updatedAt' comme "Date de création" (selon votre code original) #}
                                <dt class="col-sm-4 text-muted small">Date de Création</dt>
                                <dd class="col-sm-8 small">{{ presentation.updatedAt|date('d/m/Y H:i') }}</dd>
                                
                                <dt class="col-sm-4 text-muted small">Dernière MàJ</dt>
                                <dd class="col-sm-8 small">{{ presentation.updatedAt ? presentation.updatedAt|date('d/m/Y H:i') : 'N/A' }}</dd>
                            </dl>
                        </div>
                    </div>
                    
                    <h5 class="text-primary mb-3"><i class="fas fa-align-left me-2"></i> Contenu de l'article</h5>
                    
                    {# Section 2 : Contenu (Description et Corps) #}
                    <div class="row mb-4">
                        <dl class="row">
                            <dt class="col-sm-2 text-muted">Description courte</dt>
                            <dd class="col-sm-10">
                                <p class="lead small">{{ presentation.petiteDescription|nl2br }}</p>
                            </dd>
                            
                            <dt class="col-sm-2 text-muted">Contenu détaillé</dt>
                            <dd class="col-sm-10">
                                {# Encadré scrollable pour le contenu long #}
                                <div class="border p-3 bg-light rounded" style="max-height: 400px; overflow-y: auto;">
                                    {{ presentation.contenu|raw }}
                                </div>
                            </dd>
                        </dl>
                    </div>
                    
                    <hr>
                    
                    {# Section 3 : Image #}
                    <h5 class="text-primary mb-3"><i class="fas fa-image me-2"></i> Image de couverture</h5>
                    
                    <div class="row mb-4">
                        <dl class="row">
                            <dt class="col-sm-2 text-muted">Aperçu</dt>
                            <dd class="col-sm-10">
                                {% if presentation.image %}
                                    <p class="text-dark fw-bold small mb-2">{{ presentation.image }}</p>
                                    {# Ajout de classes Bootstrap pour un meilleur affichage #}
                                    <img src="{{ asset('uploads/images/' ~ presentation.image) }}" alt="Image de l'article" class="img-fluid rounded shadow-sm border p-1" style="max-height: 300px; width: auto;">
                                {% else %}
                                    <span class="text-danger"><i class="fas fa-times-circle me-1"></i> Aucune image fournie pour cet article.</span>
                                {% endif %}
                            </dd>
                        </dl>
                    </div>
                    
                    <hr>
                    
                    {# Bouton de retour #}
                    <a href="{{ path('app_manager_presentation_index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Retour à la liste
                    </a>
                </div>
            </div>
        {% else %}
            {# Message d'erreur harmonisé #}
            <div class="alert alert-danger shadow">
                <i class="fas fa-exclamation-triangle me-2"></i> L'article demandé n'a pas été trouvé. Veuillez vérifier l'identifiant.
            </div>
        {% endif %}
    </div>
{% endblock %}