{% extends "/layout/master.html.twig" %}

{% block title %}Support{% endblock %}

{% block body %}
<div class="container mt-5">
    <div class="col-lg-6 mx-auto">
        <!-- Afficher les messages de succès ou d'erreur -->
        {% for message in app.flashes('success') %}
            <div class="alert alert-success">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('error') %}
            <div class="alert alert-danger">
                {{ message }}
            </div>
        {% endfor %}
        
        <div class="card">
            <div class="card-header">
                <h5>Contacter le support</h5>
                <span class="badge text-bg-light"><i class="ph-fill ph-detective"></i> Si tu y tiens, vas y hein...</span><br><br>
            </div>
            <div class="card-body">
                {{ form_start(form, { 'attr': { 'class': 'app-form' } }) }}
                <div class="row">
                    <!-- Champ Email -->
                    <div class="col-sm-12">
                        <div class="mb-3">
                            <label class="form-label">{{ form_label(form.email) }}</label>
                            <div class="icon-form">
                                <i class="ti ti-mail"></i>
                                {{ form_widget(form.email, { 'attr': {'class': 'form-control pa-s-34', 'placeholder': 'Votre e-mail'} }) }}
                            </div>
                            {{ form_errors(form.email) }}
                        </div>
                    </div>

                    <!-- Champ Pseudo -->
                    <div class="col-sm-12">
                        <div class="mb-3">
                            <label class="form-label">{{ form_label(form.pseudo) }}</label>
                            <div class="icon-form">
                                <i class="ti ti-user"></i>
                                {{ form_widget(form.pseudo, { 'attr': {'class': 'form-control pa-s-34', 'placeholder': 'Votre pseudo'} }) }}
                            </div>
                            {{ form_errors(form.pseudo) }}
                        </div>
                    </div>

                    <!-- Champ Thème -->
                    <div class="col-sm-12">
                        <div class="mb-3">
                            <label class="form-label">{{ form_label(form.theme) }}</label>
                            <div class="icon-form">
                                <i class="ti ti-tag"></i>
                                {{ form_widget(form.theme, { 'attr': {'class': 'form-control pa-s-34'} }) }}
                            </div>
                            {{ form_errors(form.theme) }}
                        </div>
                    </div>

                    <!-- Champ Objet -->
                    <div class="col-sm-12">
                        <div class="mb-3">
                            <label class="form-label">{{ form_label(form.subject) }}</label>
                            <div class="icon-form">
                                <i class="ti ti-comment"></i>
                                {{ form_widget(form.subject, { 'attr': {'class': 'form-control pa-s-34', 'placeholder': 'Objet du message'} }) }}
                            </div>
                            {{ form_errors(form.subject) }}
                        </div>
                    </div>

                    <!-- Champ Message -->
                    <div class="col-sm-12">
                        <div class="mb-3">
                            <label class="form-label">{{ form_label(form.message) }}</label>
                            <div class="icon-form">
                                <i class="ti ti-pencil"></i>
                                {{ form_widget(form.message, { 'attr': {'class': 'form-control pa-s-34', 'placeholder': 'Votre message'} }) }}
                            </div>
                            {{ form_errors(form.message) }}
                        </div>
                    </div>

                    <!-- Bouton de soumission -->
                    <div class="col-12 text-end">
                        <button type="submit" class="btn btn-primary">Envoyer</button>
                    </div>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
</div>
{% endblock %}