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

{% block title %}Nous contacter{% endblock %}

{% block body %}
<div id="navbar-limit"></div>

<section class="my-5 container">
    <p class="text-center">- Nous contacter -</p>
    <div class="row">
        <div class="col-md-4 bg-white text-dark p-5">
            <!--Grid column-->
            <div class="text-center">
                <ul class="list-unstyled mb-0">
                    <li><i class="fas fa-map-marker-alt fa-2x"></i>
                        <p>40400 Tartas, 325 rue Chanzy</p>
                    </li>

                    <li><i class="fas fa-phone mt-4 fa-2x"></i>
                        <p>05 58 73 49 41</p>
                    </li>

                    <li><i class="fas fa-envelope mt-4 fa-2x"></i>
                        <p>clinvet.ville.haute@gmail.com</p>
                    </li>
                </ul>
            </div>
            <!--Grid column-->
        </div>
        <div class="col-md-8 bg-custom-contact">
            <!--Section: Contact v.2-->
            <section class="p-5">
           
                    <!--Grid column-->
           
                        <form id="contact-form" name="contact-form" action="" method="POST">

                            <!--Grid row-->
                            <div class="row">

                                <!--Grid column-->
                                <div class="col-md-6 p-3">
                                    <div class="md-form mb-0">
                                        <label for="name">Votre nom</label>
                                        <input type="text" id="name" name="name" class="form-control">
                                    </div>
                                </div>
                                <!--Grid column-->

                                <!--Grid column-->
                                <div class="col-md-6 p-3">
                                    <div class="md-form mb-0">
                                        <label for="email" class="">Votre adresse mail</label>
                                        <input type="text" id="email" name="email" class="form-control">
                                    </div>
                                </div>
                                <!--Grid column-->

                            </div>
                            <!--Grid row-->

                            <!--Grid row-->
                            <div class="row">
                                <div class="col-md-12 p-3">
                                    <div class="md-form mb-0">
                                        <label for="subject" class="">Sujet</label>
                                        <input type="text" id="subject" name="subject" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <!--Grid row-->

                            <!--Grid row-->
                            <div class="row">

                                <!--Grid column-->
                                <div class="col-md-12 p-3">

                                    <div class="md-form">
                                        <label for="message">Votre message</label>
                                        <textarea type="text" id="message" name="message" rows="3" class="form-control md-textarea"></textarea>
                                    </div>

                                </div>
                            </div>
                            <!--Grid row-->
                            <div class="g-recaptcha" data-sitekey="6LeO4TodAAAAACX3ApQsJSL9cdX-qu-u-1p7TdCx"></div>
                        </form>
                        
                            
                     
                        <div class="text-center mt-5">
                            <a class="btn btn-primary" onclick="">Envoyer</a>
                        </div>
                        <div class="status"></div>

            </section>
            <!--Section: Contact v.2-->
        </div>
    </div>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</section>
{% endblock %}