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

{% block page_title %}
	Prévisualisation d'article | BO
{% endblock %}

{% block name_title_page_top %}
	<i class="fa-solid fa-newspaper"></i> Prévisualisation d'article
{% endblock %}

{% block real_page_content %}

<div class="container py-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            {# Barre d'actions #}
            <div class="alert alert-info d-flex justify-content-between align-items-center mb-4">
                <span>
                    <i class="fas fa-eye"></i> Mode prévisualisation
                    {% if not article.published %}
                        <span class="badge bg-warning ms-2">Brouillon</span>
                    {% endif %}
                </span>
                <a href="{{ ea_url().setRoute('article_edit', {id: article.id}) }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-edit"></i> Modifier
                </a>
            </div>

            {# Article #}
            <article class="article-preview">
                {# Image de couverture #}
                {% if article.image is defined and article.image is not null %}
                    <div class="article-featured-image mb-4">
                        <img src="{{ article.image }}" 
                             alt="{{ article.title }}"
                             class="img-fluid rounded shadow">
                    </div>
                {% endif %}

                {# Titre #}
                <h1 class="article-title mb-3">{{ article.title }}</h1>

                {# Métadonnées #}
                <div class="article-meta mb-4 text-muted">
                    <i class="fas fa-calendar"></i> 
                    Publié le {{ article.createdAt|date('d/m/Y à H:i') }}
                    {% if article.updatedAt is defined and article.updatedAt is not null %}
                        <span class="ms-3">
                            <i class="fas fa-edit"></i>
                            Modifié le {{ article.updatedAt|date('d/m/Y à H:i') }}
                        </span>
                    {% endif %}
                </div>

                <hr class="mb-4">

                {# Contenu #}
                <div class="article-body">
                    {{ article.body|raw }}
                </div>
            </article>

            {# Actions en bas #}
            <div class="mt-5 pt-4 border-top d-flex justify-content-between">
                <a href="{{ ea_url().setRoute('article_index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Retour à la liste
                </a>
                <a href="{{ ea_url().setRoute('article_edit', {id: article.id}) }}" class="btn btn-primary">
                    <i class="fas fa-edit"></i> Modifier cet article
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .article-preview {
            font-family: Georgia, 'Times New Roman', serif;
        }

        .article-title {
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1.2;
            color: #1a1a1a;
        }

        .article-meta {
            font-size: 0.95rem;
            padding-bottom: 1rem;
        }

        .article-featured-image img {
            width: 100%;
            height: auto;
            max-height: 500px;
            object-fit: cover;
        }

        .article-body {
            font-size: 1.125rem;
            line-height: 1.8;
            color: #333;
        }

        .article-body p {
            margin-bottom: 1.5rem;
        }

        .article-body h2 {
            font-size: 1.875rem;
            font-weight: 600;
            margin-top: 2.5rem;
            margin-bottom: 1rem;
        }

        .article-body h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        .article-body ul,
        .article-body ol {
            margin-bottom: 1.5rem;
            padding-left: 2rem;
        }

        .article-body li {
            margin-bottom: 0.5rem;
        }

        .article-body blockquote {
            border-left: 4px solid #007bff;
            padding-left: 1.5rem;
            margin: 2rem 0;
            font-style: italic;
            color: #555;
        }

        .article-body img {
            max-width: 100%;
            height: auto;
            margin: 1.5rem 0;
            border-radius: 0.25rem;
        }

        .article-body code {
            background-color: #f4f4f4;
            padding: 0.2rem 0.4rem;
            border-radius: 0.25rem;
            font-family: 'Courier New', monospace;
        }

        .article-body pre {
            background-color: #f4f4f4;
            padding: 1rem;
            border-radius: 0.25rem;
            overflow-x: auto;
        }

        .article-body pre code {
            background-color: transparent;
            padding: 0;
        }

        .article-body a {
            color: #007bff;
            text-decoration: underline;
        }

        .article-body a:hover {
            color: #0056b3;
        }
    </style>
{% endblock %}