{% if field.autocomplete is not empty %}
    <script>
        var autocompleteFieldnames = {
            postalCode: "{{ field.autocomplete|split(',')|first }}",
            town: "{{ field.autocomplete|split(',')[1:1]|first }}"
        }
    </script>
    {{ include_javascript('tools/bazar/presentation/javascripts/inputs/map-autocomplete.js') }}
{% endif %}

{{ include_css('styles/vendor/leaflet/leaflet.css') }}
{{ include_javascript('tools/bazar/presentation/javascripts/inputs/map-geolocation-helper.js') }}
{{ include_javascript('javascripts/vendor/leaflet/leaflet.min.js') }}
{{ include_javascript('javascripts/vendor/leaflet-providers/leaflet-providers.js') }}

<script>
    var mapFieldData = {{ mapFieldData|json_encode|raw }}
</script>

{{ include_javascript('tools/bazar/presentation/javascripts/inputs/map-leaflet.js') }}

<div class="control-group form-group geocode-input {% if field.required %}required{% endif %}" data-field-names="{{ field.autocompleteFieldNames|merge({latitude:field.latitudeField,longitude:field.longitudeField})|json_encode }}">
    <label class="col-sm-3"></label>
    <div class="controls col-sm-9">
        {% if field.geolocate %}
            <a class="btn btn-primary btn-geolocate">
                {{ _t('BAZ_GEOLOCATE') }}
            </a>
        {% endif %}
        <a class="btn btn-primary btn-geolocate-address">
            {{ _t('BAZ_VERIFIER_MON_ADRESSE') }}
        </a>
        <input type="hidden" value="{{ latitude }}" id="{{ field.latitudeField }}" name="{{ field.latitudeField }}">
        <input type="hidden" value="{{ longitude }}" id="{{ field.longitudeField }}" name="{{ field.longitudeField }}">
        <div id="osmmapform" style="margin-top:5px; width:{{ config.baz_map_width }}; height:{{ config.baz_map_height }};"></div>
    </div>
</div>