{% include 'partial/home/search.html.twig' %}
 



<!-- Hero Start -->
<div class="container-fluid pt-5 bg-dark-cyber hero-header-alt mb-5">
    <div class="container pt-5">
        <div class="row g-5 pt-5">
            <div class="align-self-center text-center text-lg-center mb-lg-5">
                <h1 class="display-4 text-white mb-4 animated slideInRight shine-text" >Contactez nous maintenant</h1>
            </div>
         
            
        </div>
    </div>
</div>
<!-- Hero End -->



<!-- Modal Video -->
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content rounded-0">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Présentation de Perfitcom</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 16:9 aspect ratio -->
                <div class="ratio ratio-16x9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=ArGYvw3T8dM" id="video" allowfullscreen allowscriptaccess="always"
                        allow="autoplay"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Hero End -->



{% block body %}
<div class="container-fluid py-3" id="contact">
    <div class="container">
        <div class="mx-auto text-center" style="max-width: 500px;">
            <div class="btn btn-sm border rounded-pill text-dark px-3 mb-3">Nous contacter</div>
            <h1 class="mb-4">Si vous avez une question, n'hésitez pas à nous écrire</h1>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-7">
                {% for message in app.flashes('success') %}
                    <div class="alert alert-success">{{ message }}</div>
                {% endfor %}
                {% include 'partial/flash/flash.html.twig' %}
                {% include 'partial/flash/form_errors.html.twig' with { 'errors': form.vars.errors } %}


                {{ form_start(form) }}
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="form-floating">
                            {{ form_widget(form.name)}}
                            <label for="contact_form_name">Votre nom</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating">
                            {{ form_widget(form.email, {'attr': {'class': 'form-control', 'placeholder': 'Votre e-mail'}}) }}
                            <label for="contact_form_email">Votre e-mail</label>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-floating">
                            {{ form_widget(form.subject, {'attr': {'class': 'form-control', 'placeholder': 'Sujet'}}) }}
                            <label for="contact_form_subject">Sujet</label>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-floating">
                            {{ form_widget(form.message, {'attr': {'class': 'form-control', 'style': 'height:150px', 'placeholder': 'Votre message'}}) }}
                            <label for="contact_form_message">Message</label>
                        </div>
                    </div>
                    <div class="col-12">
                        <button class="btn bg-dark-cyber-secondary text-light w-100 py-3" type="submit">Envoyer le message</button>
                    </div>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
</div>
{% endblock %}



<!-- Back to Top -->
<a href="#" class="btn btn-lg text-light bg-cyber-red btn-lg-square back-to-top pt-2"><i class="bi bi-arrow-up"></i></a>