{% extends "YOUUserBundle::ui.html.twig" %}

{% block content_ui %}

    <div class="row">
        <div class="col-md-4">
            <a href="#" onclick="autoDetectGEO();return false;" class="btn btn-default sep-top1">Detecter ma position</a>
            <div>
                <a href="#" onclick="$('#listeAdresses').toggle();return false;" class="btn btn-default sep-top1">Utiliser une adresse</a>
                <div id="containerListeAddr">
                    <ul id="listeAdresses">
                        {% for addr in adresses %}
                            <li>
                                <a href="#" onclick="getPosFromAddress('{{ addr.adresse }}, {{ addr.ville }}, {{ addr.pays.nomFr }}');">{{ addr.name }}</a>
                            </li>
                        {% endfor %}
                        <li>
                            <a href="#" onclick="openAdresseManager();
                                return false;">Ajouter/Modifier une adresse</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="input-append sep-top1">
                <input class="span2" placeholder="Entrer une ville" id="ville" type="text">
                <button onclick="getPosFromAddress();" class="btn" type="button">ok</button>
            </div>
            <div>
                Rechercher dans :
                <select id="circleSize">
                    <option value="5">Un rayon de 5 km</option>
                    <option value="10">Un rayon de 10 km</option>
                    <option value="15">Un rayon de 15 km</option>
                    <option value="25">Un rayon de 25 km</option>
                    <option value="50">Un rayon de 50 km</option>
                    <option value="75">Un rayon de 75 km</option>
                    <option value="100">Un rayon de 100 km</option>
                    <option value="d">Tout le département</option>
                    <option value="r">Toute la région</option>
                    <option value="p">Tou le pays</option>
                </select>
            </div>

        </div>
        <div class="col-md-8">
            <div>
                <p id="adresse"></p>
            </div>
            <div id="gmaps" style="height: 350px;">

            </div>
        </div>
    </div>
    {% block append_javascript %}
        {{ parent() }}
        {% include 'YOUUserBundle:Geo:js.html.twig' %}
    {% endblock %}
{% endblock %}