{% extends 'layout/default.html.twig' %}


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

{% block description %}{{post.description}}{% endblock %}

{% block main %}
    
    <div class="app-banner">

        <img src="/uploads/post/lexique-libertin.jpg" alt="Illustration d'un lexique du libertinage avec des silhouettes de couples et individus couleurs pastel.">
        
        <h1 class="contain:md">{{post.h1}}</h1>
    </div>

    <div class="contain:md my-2">

        <p class="nl2br">{{post.intro}}</p>

        {% block content %}{% endblock %}

        <h2 class="my-1 t-color">Plus d'articles</h2>




        <zb-accordion class="naked my-1">

            <div class="flex group fit">

                <h2 class="my-1 t-color">Comments</h2>
                <button class="cta color:1 center t-bold px-25"><span class="s4">+</span> Ajouter un commentaire</button>
            </div>

            {{ form_start(form, { 
                    'attr' : { 
                        'class': 'w-55 left py-30' 
                    } 
                }) 
            }}

                {% if not app.user or not app.user.pseudo %}

                    <zb-input
                        name="{{ field_name(form.pseudo) }}" 
                        value="{{ field_value(form.pseudo) }}"
                        type="text"
                        max="64"
                        required
                        placeholder="Pseudo"
                        message="{
                            required: 'Quelle est votre adresse pseudo ?',
                        }"
                    ></zb-input>

                {% endif %}

                {% if not app.user %}

                    <zb-input
                        name="{{ field_name(form.email) }}" 
                        value="{{ field_value(form.email) }}"
                        type="email"
                        max="180"
                        required
                        placeholder="E-mail"
                        message="{
                            error: 'Oups, le format de l’adresse e-mail est invalide.',
                            required: 'Quelle est votre adresse e-mail ?',
                        }"
                    ></zb-input>

                {% endif %}
                

                <zb-textarea
                    name="{{ field_name(form.comment) }}" 
                    value="{{ field_value(form.comment) }}"
                    type="text"
                    placeholder="Commentaire"
                    required
                    {# pattern="^[A-Za-zÀ-ÖØ-öø-ž0-9\.\,\-\'\’\=\“\«\»\^\°\$\£\!\@\:\/\#\s²€_\–\*\%\(\)\&\+ᵉ;]+$" #}
                    {# e-text-counter="{{ field_value(form.comment)|length}}/2000" #}
                    max="2000"
                    message="{
                        error: 'Oups, le format de l’adresse e-mail est invalide.',
                        required: 'Vous n'avez pas écrit de commentaire',
                    }"
                ></zb-textarea>

                <div class="right">
                    <button class="cta color:1" type="submit">Commenter</button>
                </div>

            {{ form_widget(form._token) }}
            {{ form_end(form, {'render_rest': false}) }}
        </zb-accordion>

        <ul class="naked">
            {% for comment in post.comments %}
                {% if comment.status == 1 and comment.published %}
                    <li>
                        <h4 class="pl-15">{{comment.pseudo}} </h4>
                        <div class="radius light p-10">
                            {{comment.comment}}
                        </div>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>

    </div>

{% endblock %}