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

{% block title 'Test comment on page' %}

{% block body %}
    <main>
        <div class="comment-page">
            <div class="container">
                <h1>Test comment on page 2</h1>

                <div class="comment">
                    {% for message in app.flashes('success') %}
                        <div class="alert alert-success">
                            {{ message }}
                        </div>
                    {% endfor %}
                    <div class="title">
                        <span class="title-comment">Ajouter un commentaire</span>
                        <div class="more" id="more" onclick="toggleComment()">
                            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                                <g>
                                    <g>
                                        <path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
                                            v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z"/>
                                    </g>
                                </g>
                            </svg>
                        </div>
                    </div>
                    <div class="content-comment" id="content-comment">
                        {% include "pages/form/_formComment.html.twig" with {form: form} only %}
                        <div class="trait"></div>
                        <div class="liste-comment">
                            <span class="title-comment">Liste commentaire</span>
                            {% for comment in comments %}
                                <div class="c">
                                    <form action="{{ path('comment.delete', {id: comment.id}) }}" method="post" class="form-delete" onsubmit="return confirm('Êtes vous sur de vouloir supprimer ce commentaire')">
                                        <input type="hidden" name="_method" value="DELETE">
                                        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ comment.id) }}">
                                        <button class="picto">
                                            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                                viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
                                                <g>
                                                    <g>
                                                        <path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717
                                                            L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859
                                                            c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287
                                                            l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285
                                                            L284.286,256.002z"/>
                                                    </g>
                                                </g>
                                            </svg>
                                        </button>
                                    </form>
                                    <span>{{ comment.comment|nl2br }}</span>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="partie-deux">
            <div class="container">
                <h2>Partie 2 - page 2</h2>
            </div>
        </div>
    </main>
{% endblock %}