{% set initial_comments = comments|default([]) %}

<section id="recipe-comments"
         data-recipe-id="{{ recipe.recipeId }}"
         data-comments-next-offset="{{ initial_comments|length }}"

class="mx-auto max-w-4xl px-6 pb-16 pt-2 text-[#30422e]"
>

    <h2 class="mb-10 border-b border-[#b68d32]
               pb-5 text-center font-serif text-4xl">
        Commentaires
    </h2>

    {# FORMULAIRE : UTILISATEUR CONNECTE #}
    <form id="comment-form"
          action="?pg=api-comment-add"
          method="post"
          class="mb-12 hidden space-y-5
                 rounded-lg bg-[#d7d5c2] p-6 md:p-8">

        <h3 class="font-serif text-2xl">
            Laissez votre commentaire
        </h3>

        <input type="hidden" name="_csrf" value="">

        <input type="hidden"
               name="recipe_id"
               value="{{ recipe.recipeId }}">

        <div>
            <label for="comment-subject"
                   class="mb-2 block">
                Sujet (facultatif)
            </label>

            <input id="comment-subject"
                   type="text"
                   name="comment_subject"
                   maxlength="120"
                   class="w-full rounded border
                          border-[#b68d32] bg-white p-3">
        </div>

        <div>
            <label for="comment-message"
                   class="mb-2 block">
                Votre commentaire
            </label>

            <textarea id="comment-message"
                      name="comment_message"
                      minlength="3"
                      maxlength="500"
                      rows="5"
                      required
                      class="w-full rounded border
                             border-[#b68d32] bg-white p-3"></textarea>

            <p class="mt-2 text-sm">
                Entre 3 et 500 caractères.
            </p>
        </div>

        <p id="comment-form-status"
           role="status"
           aria-live="polite"
           class="text-sm"></p>

        <button type="submit"
                class="rounded-full bg-[#481915]
                       px-8 py-3 text-white
                       hover:bg-[#6b2923]
                       disabled:opacity-50">
            Publier mon commentaire
        </button>
    </form>


{# Élément conservé pour la compatibilité avec comments.js.
   L'invitation à se connecter est déjà dans rating.html.twig. #}
<div id="comments-guest" hidden aria-hidden="true"></div>


    {# LISTE DES COMMENTAIRES #}
    <div id="comments-list" class="space-y-6">

        {% for comment in initial_comments %}
            <article
                data-comment-id="{{ comment.idComment }}"
                data-comment-user-id="{{ comment.userId }}"
                class="rounded-lg border border-[#b68d32]/40
                       bg-[#eae6d8] p-6">

                <div class="flex flex-wrap items-center
                            justify-between gap-3">

                    <div>
                        <h3 class="font-serif text-xl">
                            {{ comment.user.userLogin }}
                        </h3>

                        <time class="text-sm opacity-70"
                              datetime="{{ comment.commentDate|date('Y-m-d') }}">
                            {{ comment.commentDate|date('d/m/Y') }}
                        </time>
                    </div>

                    {# Affiché par JS après contrôle des droits #}
                    <button type="button"
                            data-comment-delete
                            class="hidden text-sm
                                   text-[#8c352d] underline">
                        Supprimer
                    </button>
                </div>

                {% if comment.commentSubject %}
                    <h4 class="mt-4 font-semibold">
                        {{ comment.commentSubject }}
                    </h4>
                {% endif %}

                <p class="mt-3 whitespace-pre-line leading-relaxed">
                    {{ comment.commentMessage }}
                </p>
            </article>
        {% endfor %}
    </div>

    {# AUCUN COMMENTAIRE #}
    <p id="comments-empty"
       class="mt-8 text-center italic
              {{ initial_comments|length > 0 ? 'hidden' : '' }}">
        Aucun commentaire pour le moment.
        Soyez le premier à donner votre avis !
    </p>

    {# PAGINATION #}
    <div class="mt-10 text-center">

        <button id="comments-load-more"
                type="button"
                class="rounded-full border border-[#b68d32]
                       px-8 py-3 hover:bg-[#d7d5c2]
                       disabled:opacity-50
                       {{ initial_comments|length < 10 ? 'hidden' : '' }}">
            Afficher plus de commentaires
        </button>

        <p id="comments-list-status"
           role="status"
           aria-live="polite"
           class="mt-4 text-sm"></p>
    </div>
</section>