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


{% block body %}
<div class="w-full flex flex-col min-h-full overflow-y-auto">
    <div class="flex flex-row w-full p-3 border-b items-center justify-between text-white bg-bungalow-yellow">
        <span class="text-white text-lg">
            <i class="{{ icon.get('email') }}" style="color: #FFFF;"></i>
            Contactez-nous
        </span>
    </div>
    <div class="mt-5 px-10">
        {% include "./layouts/message_flash.html.twig" %}
        <form action="{{ path('contact_maintenance') }}" method="POST" class="w-full h-full flex flex-col">
            <div class="h-fit pb-6 grid grid-cols-2 gap-6">
                <!-- Champ Email -->
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2 required">Email</label>
                    <input type="email" id="email" name="email" required class="block w-full px-4 py-2 border-2 border-bungalow-yellow rounded-lg shadow-sm focus:outline-none" placeholder="Votre adresse email"/>
                </div>

                <!-- Champ Objet -->
                <div>
                    <label for="object" class="block text-sm font-medium text-gray-700 mb-2 required">Objet</label>
                    <input type="text" id="object" name="object" required class="block w-full px-4 py-2 border-2 border-bungalow-yellow rounded-lg shadow-sm focus:outline-none" placeholder="L'objet de votre message"/>
                </div>
            </div>


            <div class="pb-5 quill-wrapper">
                <label for="message" class="block text-sm font-medium text-gray-700 mb-2 required">Message</label>
                <div class="quill-editor h-fit bg-white border-bungalow-yellow rounded-lg shadow-sm"></div>
                <!-- Champ caché pour stocker le contenu HTML -->
                <textarea id="message" name="message" required class="hidden"></textarea>
            </div>

            <div class="h-fit z-50 text-center">
                <button type="submit" class="bg-bungalow-yellow text-white px-4 py-2 rounded hover:bg-bungalow-blue transition duration-200">
                    Envoyer
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}