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

{% block title %}Contact{% endblock %}

{% block body %}
    <div class="divide80"></div>
    <div class="container">
        <div class="v-gmap-widget fullscreen-map col-sm-12">
            <div class="v-wrapper">
                <!-- Full Width -->
                <gmp-map center="44.86139839343168, -0.5588372333247466" zoom="14" map-id="DEMO_MAP_ID">
                    <gmp-advanced-marker position="44.86139839343168, -0.5588372333247466" title=Atelier 71"></gmp-advanced-marker>
                </gmp-map>
            </div>
        </div>
    </div><!--.container-->
    <div class="divide60"></div>
    {% if send == 1 %}
        <div class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>Information!</strong> Votre message a été envoyé.
        </div>
    {% endif %}
    {% if send == 2 %}
        <div class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>Erreur!</strong> Veuillez remplir tous les champs.
        </div>
    {% endif %}
    <div class="container">
        <div class="row">
            <div class="col-md-8 margin30">
                <h3 class="heading">Me contacter</h3>
                <p>
                    Si vous souhaitez me contacter...
                </p>
                <div class="divide30"></div>
                <div class="form-contact">
                    <div class="required">
                        <p>( <span>*</span> champs obligatoires )</p>
                    </div>

                    <form action="/contact" name="sentMessage" id="contactForm" method="post" novalidate>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row control-group">
                                    <div class="form-group col-xs-12 controls">
                                        <label>Nom<span>*</span></label>
                                        <input type="text" class="form-control" placeholder="Votre nom" name="name"
                                               id="name" required
                                               data-validation-required-message="Veuillez renseigner votre nom.">
                                        <p class="help-block"></p>
                                    </div>
                                </div>

                            </div>

                            <div class="col-md-6">
                                <div class="row control-group">
                                    <div class="form-group col-xs-12 controls">
                                        <label>Email<span>*</span></label>
                                        <input type="email" class="form-control" placeholder="Votre email" name="email"
                                               id="email" required
                                               data-validation-required-message="Veuillez renseigner votre adresse e-mail.">
                                        <p class="help-block"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row control-group">
                            <div class="form-group col-xs-12  controls">
                                <label>Numéro de téléphone</label>
                                <input type="tel" class="form-control" placeholder="Numéro de téléphone" name="phone"
                                       id="phone">
                                <p class="help-block"></p>
                            </div>
                        </div>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 controls">
                                <label>Message<span>*</span></label>
                                <textarea rows="5" class="form-control" placeholder="Message" name="message"
                                          id="message"
                                          required data-validation-required-message="Votre message."></textarea>
                                <p class="help-block"></p>
                            </div>
                        </div>
                        <br>
                        <div id="success"></div>
                        <div class="row">
                            <div class="form-group col-xs-12">
                                <button type="submit" class="btn btn-theme-bg btn-lg">Envoyer</button>
                            </div>
                        </div>
                    </form>

                </div><!--contact form-->
            </div>
            <div class="col-md-4">
                <h3 class="heading">Informations</h3>
                <ul class="list-unstyled contact contact-info">
                    <li><p><strong><i class="fa fa-map-marker"></i> Adresse:</strong><br/>71 cours Edouard Vaillant<br/>
                            33300 Bordeaux<br/>
                            France</p></li>
                    <li><p><strong><i class="fa fa-envelope"></i> Adresse email:</strong><br/>
                            <a href="#">lionel.tritschler@hotmail.com</a></p></li>
                    <!-- <li> <p><strong><i class="fa fa-phone"></i> Phone:</strong> +91 1800 2345 2132</p></li>
                    <li> <p><strong><i class="fa fa-print"></i> Fax:</strong> +91 2345 2132</p></li> -->
                </ul>
                <div class="divide40"></div>
                <h4 class="contact">Réseaux sociaux</h4>
                <div class=" margin10">
                    <a href="https://www.facebook.com/Lionel-Tritschler-2302408060015156/" target="blank"
                       class="social-icon si-dark si-colored-facebook">
                        <i class="fa fa-facebook"></i>
                        <i class="fa fa-facebook"></i>
                    </a>
                    <a href="https://www.linkedin.com/in/lionel-tritschler-86587061?trk=hp-identity-name" target="blank"
                       class="social-icon si-dark si-colored-linkedin">
                        <i class="fa fa-linkedin"></i>
                        <i class="fa fa-linkedin"></i>
                    </a>
                    <a href="https://vimeo.com/user25407774/videos" target="blank"
                       class="social-icon si-dark si-colored-vimeo">
                        <i class="fa fa-vimeo"></i>
                        <i class="fa fa-vimeo"></i>
                    </a>
                    <a href="https://www.instagram.com/lioneltritschler/" target="blank"
                       class="social-icon si-dark si-colored-instagram">
                        <i class="fa fa-instagram"></i>
                        <i class="fa fa-instagram"></i>
                    </a>
                </div><!--socials-->
            </div>
        </div>
    </div>
    <div class="divide40"></div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/js/jquery.gmap.js') }}"></script>
    <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnNvgpUXD0CPVUBJjjX7Hr3U6wB1k_1xE&callback=console.debug&libraries=maps,marker&v=beta">
        <script type="text/javascript">
            jQuery(document).ready(function ($) {
            jQuery('.minimize-section').click(function (e) {
                e.preventDefault();
                jQuery('.map-info-section').toggleClass('minimized');
            });
        });
    </script>
{% endblock %}