{# templates/admin/website_news/show.html.twig #}
{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Voir l'article : {{ news.titre }}{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    {# En-tête avec actions rapides #}
    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ news.titre }}</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ path('admin_website_news_index') }}">Actualités</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Prévisualisation</li>
                </ol>
            </nav>
        </div>
        <div class="btn-group shadow-sm">
            <a href="{{ path('admin_website_news_edit', {'id': news.id}) }}" class="btn btn-primary">
                <i class="fas fa-edit me-2"></i> Modifier
            </a>
            <a href="{{ path('admin_website_news_index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-list me-2"></i> Liste
            </a>
        </div>
    </div>

    <div class="row">
        {# Colonne principale : Le contenu de l'article #}
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                {# Image de couverture VichUploader #}
                {% if news.image %}
                    <img src="{{ asset('uploads/news/' ~ news.image) }}" class="card-img-top" alt="{{ news.titre }}" style="max-height: 400px; object-fit: cover;">
                {% endif %}

                <div class="card-header py-3 d-flex justify-content-between align-items-center bg-white border-bottom-0">
                    <h6 class="m-0 font-weight-bold text-primary italic">Détails de la publication</h6>
                    {% if news.active %}
                        <span class="badge bg-success"><i class="fas fa-check me-1"></i> Publié</span>
                    {% else %}
                        <span class="badge bg-warning text-dark"><i class="fas fa-pause me-1"></i> Brouillon</span>
                    {% endif %}
                </div>
                
                <div class="card-body">
                    <div class="mb-4">
                        <small class="text-muted"><i class="fas fa-calendar-alt me-1"></i> Date : {{ news.dates ? news.dates|date('d/m/Y') : 'Non planifiée' }}</small>
                    </div>

                    <div class="p-4 bg-light rounded mb-4 border-start border-primary border-5">
                        <h5 class="font-weight-bold">Résumé (Accroche) :</h5>
                        <p class="lead mb-0 text-secondary">{{ news.petiteDescription }}</p>
                    </div>

                    <div class="article-content pt-2">
                        <h5 class="font-weight-bold mb-3 border-bottom pb-2">Corps de l'article :</h5>
                        {# Le filtre raw est indispensable pour l'affichage du HTML de l'éditeur #}
                        {{ news.contenu|raw }}
                    </div>
                </div>
            </div>
        </div>

        {# Colonne latérale : Metadata et SEO #}
        <div class="col-lg-4">
            {# Bloc SEO #}
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-dark text-white">
                    <h6 class="m-0 font-weight-bold"><i class="fas fa-search me-2"></i> Référencement SEO</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="small font-weight-bold text-uppercase text-muted">Titre SEO :</label>
                        <p class="text-info font-weight-bold">{{ news.seoTitre|default('Utilise le titre principal') }}</p>
                    </div>

                    <div class="mb-3">
                        <label class="small font-weight-bold text-uppercase text-muted">Mots-clés :</label>
                        <p class="small">{{ news.seoKeywords|default('Aucun mot-clé') }}</p>
                    </div>

                    <div>
                        <label class="small font-weight-bold text-uppercase text-muted">Meta Description :</label>
                        <p class="small text-muted italic">{{ news.seoDescription|default('Aucune description saisie.') }}</p>
                    </div>
                </div>
            </div>

            {# Bloc Infos techniques #}
            <div class="card shadow mb-4 border-left-info">
                <div class="card-body">
                    <h6 class="font-weight-bold text-info"><i class="fas fa-info-circle me-2"></i>Informations techniques</h6>
                    <hr>
                    <ul class="list-unstyled small mb-0">
                        <li class="mb-2"><strong>ID Doctrine :</strong> <span class="badge bg-light text-dark">#{{ news.id }}</span></li>
                        <li class="mb-2"><strong>Nom du fichier :</strong> <br><code class="text-break">{{ news.image|default('Aucune image') }}</code></li>
                        <li><strong>Dernière mise à jour :</strong> <br>{{ news.updatedAt ? news.updatedAt|date('d/m/Y H:i') : 'Inconnue' }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .article-content {
        line-height: 1.8;
        font-size: 1.05rem;
        color: #2c3e50;
    }
    .article-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 1rem 0;
    }
    /* Pour respecter les sauts de ligne si pas d'éditeur HTML */
    .article-content p {
        margin-bottom: 1.5rem;
    }
</style>
{% endblock %}