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

{% block title %}Contact - E-Ticket{% endblock %}
{% block description %}Contactez l'equipe E-Ticket pour toute question sur la plateforme de billetterie associative{% endblock %}

{% block body %}
<div class="page-container">
    <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Contact</h1>
    <p class="font-bold text-gray-600 italic mb-8">Une question, une demande ? Ecrivez-nous.</p>

    {% for message in app.flashes('success') %}
        <div class="flash-success mb-8"><p class="font-black text-sm">{{ message }}</p></div>
    {% endfor %}

    {% for message in app.flashes('error') %}
        <div class="flash-error mb-8"><p class="font-black text-sm">{{ message }}</p></div>
    {% endfor %}

    <form method="post" action="{{ path('app_contact') }}" class="form-col">
        <div class="form-row">
            <div class="form-group">
                <label for="contact_name" class="text-xs font-black uppercase tracking-widest form-label">Nom</label>
                <input type="text" id="contact_name" name="name" required class="form-input focus:border-indigo-600" placeholder="Dupont">
            </div>
            <div class="form-group">
                <label for="contact_surname" class="text-xs font-black uppercase tracking-widest form-label">Prenom</label>
                <input type="text" id="contact_surname" name="surname" required class="form-input focus:border-indigo-600" placeholder="Jean">
            </div>
        </div>

        <div>
            <label for="contact_email" class="text-xs font-black uppercase tracking-widest form-label">Email</label>
            <input type="email" id="contact_email" name="email" required class="form-input focus:border-indigo-600" placeholder="jean.dupont@exemple.fr">
        </div>

        <div>
            <label for="contact_message" class="text-xs font-black uppercase tracking-widest form-label">Message</label>
            <textarea id="contact_message" name="message" required rows="6" class="form-textarea focus:border-indigo-600" placeholder="Votre message..."></textarea>
        </div>

        <div>
            <button type="submit" class="btn-brutal bg-yellow-400 font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                Envoyer
            </button>
        </div>
    </form>

    <div class="card-brutal-info mt-12">
        <h2 class="text-lg font-black uppercase mb-2">Autres moyens de contact</h2>
        <ul class="list-disc pl-6 text-sm font-bold text-gray-700">
            <li>Email : <a href="mailto:contact@e-cosplay.fr" class="text-indigo-800 underline hover:text-indigo-950">contact@e-cosplay.fr</a></li>
            <li>Adresse : 42 rue de Saint-Quentin, 02800 Beautor, France</li>
        </ul>
    </div>
</div>
{% endblock %}