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

{% block title %}Détail de l'article : {{ article.title }}{% endblock %}

{% block body %}
    <header>
        <h1>{{ article.title }}</h1>
        <a href={{ path('blog') }} class="btn-link">retour a la liste des articles</a>
        {% if app.user %}
            <div class="mb-3">
                You are logged in as
                {{ app.user.userIdentifier }},
                <a href="{{ logout_path() }}">Logout</a>
            </div>
        {% endif %}
        <button type="button" class="btn" id="loginBtn" onclick="event.preventDefault(); window.location.href='{{ path('app_login') }}';">
            <img class="img-fluid" src={{ asset('image/login.png') }} alt="logo de connexion" height="30" width="30">
        </button>
    </header>

    <div class="container mt-5">
        <div class="row">
            <section>
                <h1>{{ article.title }}</h1>
                <small>Par: {{ article.author ?? 'Anonyme' }} | Date: {{ article.createdAt ? article.createdAt|date('d/m/Y H:i:s') : '' }}</small>
                <div>
                    {{ article.content|raw }}
                </div>

                <h3 class="mt-5">Commentaires</h3>
                {% if comments %}
                    <article>
                        {% for comment in comments %}
                            <section>
                                <h3>{{ comment.author }}</h3>
                                <small class="text-muted">{{ comment.createdAt ? comment.createdAt|date('d/m/Y H:i:s') : '' }}</small>
                                <p>{{ comment.content }}</p>
                            </section>
                        {% endfor %}
                    </article>
                {% else %}
                    <p class="text-muted">Aucun commentaire pour le moment.</p>
                {% endif %}

                <h4 class="mt-5">Ajouter un commentaire</h4>
                {{ form_start(form) }}
                {{ form_row(form.author) }}
                {{ form_row(form.content) }}
                {{ form_row(form.save) }}
                {{ form_end(form) }}
            </section>
        </div>
    </div>
{% endblock %}