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

{% block title %}Contact - 2KBES{% endblock %}

{% block body %}
    <div class="page-title-container">
        <div class="container">
            <div class="page-title pull-left">
                <h2 class="entry-title">Contactez-Nous</h2>
            </div>
            <ul class="breadcrumbs pull-right">
                <li><a href="{{ path('accueil') }}">Accueil</a></li>
                <li class="active">Contactez-Nous</li>
            </ul>
        </div>
    </div>

    <section id="content">
        <div class="container">
            <div id="main">
                <div class="row">
                    <div class="col-sm-4 col-md-3">
                        <div class="travelo-box contact-us-box">
                            <h4>Contactez-Nous</h4>
                            <ul class="contact-address">
                                <li class="address">
                                    <i class="soap-icon-address circle"></i>
                                    <h5 class="title">{{ container["addresse"]["titre"] }}</h5>
                                    {{ container["addresse"]["contenu"] | raw }}
                                </li>
                                <li class="phone">
                                    <i class="soap-icon-phone circle"></i>
                                    <h5 class="title">{{ container["telephones"]["titre"] }}</h5>
                                    {{ container["telephones"]["contenu"] | raw }}
                                </li>
                                <li class="email">
                                    <i class="soap-icon-message circle"></i>
                                    <h5 class="title">{{ container["email"]["titre"] }}</h5>
                                    {{ container["email"]["contenu"] | raw }}
                                </li>
                            </ul>
                            {#<ul class="social-icons full-width">#}
                                {#<li><a href="#" data-toggle="tooltip" title="" data-original-title="Twitter"><i class="soap-icon-twitter"></i></a></li>#}
                                {#<li><a href="#" data-toggle="tooltip" title="" data-original-title="GooglePlus"><i class="soap-icon-googleplus"></i></a></li>#}
                                {#<li><a href="#" data-toggle="tooltip" title="" data-original-title="Facebook"><i class="soap-icon-facebook"></i></a></li>#}
                                {#<li><a href="#" data-toggle="tooltip" title="" data-original-title="Linkedin"><i class="soap-icon-linkedin"></i></a></li>#}
                                {#<li><a href="#" data-toggle="tooltip" title="" data-original-title="Vimeo"><i class="soap-icon-vimeo"></i></a></li>#}
                            {#</ul>#}
                        </div>
                    </div>
                    <div class="col-sm-8 col-md-9">
                        <div class="travelo-box">
                            <form class="comment-form" action="/contact" method="post">
                                <h4 class="box-title">Laissez-nous un message</h4>

                                <div class="alert small-box" style="display: none;">

                                </div>
                                <div class="row form-group">
                                    <div class="col-xs-6">
                                        <label for="message_name" class="required">VOTRE NOM</label>

                                        <input id="message_name" name="message[name]" required="required" placeholder="Nom" class="input-text full-width" type="text">
                                    </div>
                                    <div class="col-xs-6">
                                        <label for="message_email" class="required">VOTRE EMAIL</label>

                                        <input id="message_email" name="message[email]" required="required" placeholder="Email" class="input-text full-width" type="text">
                                        <input name="email" class="input-text full-width" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="message_message" class="required">VOTRE MESSAGE </label>

                                    <textarea id="message_message" name="message[message]" required="required" placeholder="Ecrivez ici votre message" rows="10" cols="10" class="input-text full-width" row="6"></textarea>
                                </div>
                                <button type="submit" class="btn-large full-width">ENVOYER LE MESSAGE</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script type='text/javascript' src="{{ asset('http://maps.google.com/maps/api/js?sensor=false&amp;language=en')}}"></script>
    <script type="text/javascript">
        tjq(".travelo-google-map").gmap3({
            map: {
                options: {
                    center: [48.85661, 2.35222],
                    zoom: 12
                }
            },
            marker:{
                values: [
                    {latLng:[48.85661, 2.35222], data:"Paris"}

                ],
                options: {
                    draggable: false
                },
            }
        });
    </script>
{% endblock %}