{% extends 'base.html.twig' %}
{% block title %}SARAH BESSIERE - KINÉSIOLOGUE - TÉMOGNAGES{% endblock %}

{% block style %}
{{ encore_entry_link_tags('app') }}
<link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
{% endblock %}


{% block body %}

    <section class="comments-header bg-copper-150 text-center mb-24 py-24">        
        <h1 class="comments-title lg:text-6xl md:text-5xl max-md:text-4xl text-copper-100">Témoignages</h1>
    </section>

    {{ include('_partials/_flash_message.html.twig') }}

    {% if comments | length > 0%}
    <section class="customer-comments w-[70%] m-auto pb-16">
        {% for comment in comments %}
            <div class="customer-comment my-8">
                <h2 class="header-title max-md:text-xl  md:text-2xl lg:text-3xl text-copper-600 mt-5">{{ comment.firstName }} {{ comment.lastName }}</h2>
                <span class="text-sm text-copper-300">Posté le {{ comment.createdAt | date('d/m/Y') }}</span>
                <p class="text-lg mt-5">{{ comment.content }}</p>
            </div>
        {% endfor %}
    </section>
    {% else %}

    <section class="customer-comments w-[70%] m-auto pb-16">
        <p class="text-lg">Aucun avis pour le moment. Soyez le premier à ajouter un avis.</p>
    </section>

    {% endif %}

    <hr class="w-[70%] m-auto mb-10 border-1 border-copper-200" />

    <section class="comments-form w-[70%] m-auto text-copper-600">
        <h2 class="header-title max-md:text-xl  md:text-2xl lg:text-3xl text-copper-600 my-5">Laisser un avis</h2>
        <div class="comments-form w-full md:w-[50%]">
            {{ form_start(form) }}
                <div class="md:flex mb-">
                    <div class="lastName grow md:mr-5">
                        {{ form_label(form.lastName, 'Nom') }}
                        {{ form_widget(form.lastName, { 'attr': { 'class': 'block w-full px-4 py-2 mt-2 text-gray-700 bg-white border-2 border-gray-200 focus:bg-grey-100 focus:border-copper-600' } }) }}
                        {{ form_errors(form.lastName) }}
                    </div>
                    <div class="firstName grow mb-5">
                        {{ form_label(form.firstName, 'Prénom') }}
                        {{ form_widget(form.firstName, { 'attr': { 'class': 'block w-full px-4 py-2 mt-2 text-gray-700 bg-white border-2 border-gray-200 focus:bg-grey-100 focus:border-copper-600' } }) }}
                        {{ form_errors(form.firstName) }}
                    </div>
                </div>
                <div class="content mb-5">
                    {{ form_label(form.content, 'Votre avis') }}
                    <span class="text-sm">(Nombre de caractères restants : </span><span class="text-sm" id="counter">250</span>)
                    {{ form_widget(form.content, { 'attr': { 'class': 'block w-full px-4 py-2 mt-2 text-gray-700 bg-white border-2 border-gray-200 focus:bg-grey-100 focus:border-copper-600', 'rows': '5', 'cols': '50' } }) }}
                    {{ form_errors(form.content) }}
                </div>
                <div class="submit mb-5">
                    {{ form_row(form.submit,{'label': 'Soumettre', 'attr': { 'class': 'block w-32 px-4 py-2 mt-2 text-copper-100 bg-copper-600 hover:bg-copper-800 border-2 border-gray-200 focus:bg-grey-100 focus:border-copper-600', 'value': 'Envoyer' }} ) }}
                </div>  
            {{ form_end(form) }}

        </div>
    </section>


<script>

    const comment = document.getElementById('comment_content');
    const counter = document.getElementById('counter');

    comment.addEventListener('input', (event) => {
        counter.innerText = Math.max(0, 250 - event.target.value.length);
    })
</script>
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
{% endblock %}