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

{% block title %}Forum - {{ topic.name }}{% endblock %}

{% block customNavigation %}
    {% include "base/nav-customer.html.twig" %}
{% endblock %}

{% block customStyle %}
    {% include 'forum/_styles.html.twig' %}
{% endblock %}

{% block body %}
    <div class="cba-forum-page">
        <section class="cba-forum-hero">
            <div class="container">
                <span class="cba-forum-badge">
                    <i class="fas fa-comments"></i>
                    Forum
                </span>

                <h1 class="cba-forum-title">{{ topic.name }}</h1>

                <p class="cba-forum-lead">
                    Un espace pour poser tes questions, partager ton expérience et lire les échanges des autres parents.
                </p>
            </div>
        </section>

        <section class="cba-forum-feed">
            <div class="container">
                <div class="cba-forum-topic-summary">
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                        <div>
                            <h2>{{ topic.name }}</h2>
                            <p>
                                Retrouve ici tous les messages liés à cette thématique et participe à la discussion à ton rythme.
                            </p>
                        </div>

                        <div class="d-flex flex-wrap gap-2">
                            <a href="{{ path('app_forum') }}" class="cba-btn-ghost">
                                <i class="fas fa-arrow-left"></i>
                                Retour aux thèmes
                            </a>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-4 mb-4">
                        <div class="cba-forum-composer-card">
                            <h3>Poster un message</h3>
                            <p>
                                Pose ta question ou partage ton retour d’expérience sur cette thématique.
                            </p>

                            {{ form_start(messageForm, {'attr': {'class': 'cba-forum-composer-form'}}) }}
                                {% if messageForm.message is defined %}
                                    {{ form_row(messageForm.message, {
                                        'label': 'Ton message',
                                        'attr': {
                                            'rows': 6,
                                            'placeholder': 'Écris ton message ici...'
                                        }
                                    }) }}
                                {% else %}
                                    {{ form_widget(messageForm) }}
                                {% endif %}

                                
                            {{ form_end(messageForm) }}
                        </div>
                    </div>

                    <div class="col-lg-8">
                        {% if messages|length > 0 %}
                            <div class="cba-forum-message-list">
                                {% for message in messages %}
                                    {% include 'forum/_message_card.html.twig' with {
                                        message: message,
                                        likedMessageIds: likedMessageIds
                                    } only %}
                                {% endfor %}
                            </div>

                            <div class="cba-forum-pagination d-flex justify-content-center">
                                {% do messages.setPageRange(2) %}
                                {{ knp_pagination_render(messages, 'base/pagination.html.twig') }}
                            </div>
                        {% else %}
                            <div class="cba-forum-empty-card">
                                <i class="fas fa-comment-dots"></i>
                                <h3>Aucun message pour le moment</h3>
                                <p>
                                    Sois la première à lancer la discussion dans cette thématique.
                                </p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </section>
    </div>
{% endblock %}