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

{% block page_title %}
	{{ article.title }} | BO
{% endblock %}

{% block name_title_page_top %}
	<i class="fa-solid fa-newspaper"></i> {{ article.title }}
{% endblock %}

{% block real_page_content %}

{% block body %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-10 offset-md-1">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <a href="{{ ea_url().setRoute('article_index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left"></i> Retour à la liste
                </a>
                <div class="btn-group">
                    <a href="{{ ea_url().setRoute('article_preview', {slug: article.slug}) }}" class="btn btn-outline-info">
                        <i class="fas fa-search"></i> Prévisualiser
                    </a>
                    <a href="{{ ea_url().setRoute('article_edit', {slug: article.slug}) }}" class="btn btn-outline-primary">
                        <i class="fas fa-edit"></i> Éditer
                    </a>
                </div>
            </div>

            {% for message in app.flashes('success') %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}

            <article class="card">
                {% if article.image is defined and article.image is not null %}
                    <img src="{{ article.image }}" class="card-img-top" alt="{{ article.titre }}" style="max-height: 400px; object-fit: cover;">
                {% endif %}
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <h1 class="card-title">{{ article.titre }}</h1>
                            <p class="text-muted">
                                <i class="fas fa-calendar"></i> Créé le {{ article.createdAt|date('d/m/Y à H:i') }}
                                {% if article.updatedAt > article.createdAt %}
                                    <br><i class="fas fa-edit"></i> Modifié le {{ article.updatedAt|date('d/m/Y à H:i') }}
                                {% endif %}
                            </p>
                        </div>
                        <div>
                            {% if article.published %}
                                <span class="badge bg-success">Publié</span>
                            {% else %}
                                <span class="badge bg-warning">Brouillon</span>
                            {% endif %}
                        </div>
                    </div>

                    <div class="alert alert-info">
                        <strong>Slug:</strong> {{ article.slug }}
                    </div>

                    <hr>

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

            <div class="mt-3 d-flex justify-content-between">
                <form method="post" action="{{ ea_url().setRoute('article_delete', {slug: article.slug}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cet article ?');">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ article.id) }}">
                    <button class="btn btn-danger">
                        <i class="fas fa-trash"></i> Supprimer l'article
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}