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

{% block title %}{{ post.title }}{% endblock %}

{% block body %}
<div class="container my-5 post-detail-page">

    <div class="post-detail card shadow-sm mb-4" itemscope itemtype="https://schema.org/Article">
        {% if post.image %}
            <img src="{{ asset('uploads/images/' ~ post.image) }}" 
                 alt="{{ post.title|default('Image article') }}" 
                 class="post-image" 
                 itemprop="image">
        {% endif %}
        <div class="card-body">
            <h1 class="post-title" itemprop="headline">{{ post.title }}</h1>
            <p class="post-content" itemprop="articleBody">{{ post.content|raw }}</p>
            <div class="post-meta text-muted">
                Publié le <span itemprop="datePublished">{{ post.createdAtPost|date('d/m/Y H:i') }}</span>
                par <strong itemprop="author">{{ post.auteur.pseudo }}</strong>
            </div>
        </div>
    </div>

    <div class="comments-section card shadow-sm mb-4">
        <div class="card-body">
            <h2 class="comments-title">💬 Commentaires ({{ comments|length }})</h2>

            {% if comments is not empty %}
                {% for comment in comments %}
                    <div class="comment d-flex mb-3 p-3" itemscope itemtype="https://schema.org/Comment">
                        <div class="comment-avatar me-3">
                            {% if comment.user.avatar is defined and comment.user.avatar %}
                                <img src="{{ asset('uploads/images/' ~ comment.user.avatar) }}" 
                                     alt="avatar de {{ comment.user.pseudo }}" 
                                     class="avatar-img" 
                                     itemprop="image">
                            {% else %}
                                <i class="fa-solid fa-user fa-2x default-avatar"></i>
                            {% endif %}
                        </div>
                        <div class="comment-body">
                            <strong class="comment-author" itemprop="author">{{ comment.user.pseudo }}</strong>
                            <small class="text-muted"> — 
                                <time itemprop="datePublished">{{ comment.createdAtComment|date('d/m/Y H:i') }}</time>
                            </small>
                            <p class="comment-text" itemprop="text">{{ comment.commentText }}</p>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <p class="no-comments">Encore aucun commentaire. Soyez le premier !</p>
            {% endif %}
        </div>
    </div>

    <div class="add-comment card shadow-sm">
        <div class="card-body">
            <h2 class="add-comment-title">➕ Ajouter un commentaire</h2>
            {{ form_start(form) }}
                {{ form_row(form.comment_text, {'label': 'Votre commentaire'}) }}
            {{ form_end(form) }}
        </div>
    </div>

</div>
{% endblock %}