{% load i18n %}
{% comment %}
  Reusable map location picker component.
  Renders a MapLibre map. Address search is provided by AddressSearchControl
  (address_search_control.js), which is added to the map programmatically.
  Clicking the map places a draggable marker that writes back to id_lat / id_lon.

  Required context: form (must have lat and lon fields)
  JS initialisation: call window.initLocationPickerMap() after injecting this
  HTML into the DOM (handled by location_edit_modals.html).
{% endcomment %}

{# Hidden lat/lon inputs – submitted with the form; JS writes to them. #}
<div class="d-none">
    {{ form.lat }}
    {{ form.lon }}
</div>

<hr class="mt-3">

<div class="d-flex align-items-center justify-content-between mb-1">
    <span class="fw-semibold">
        {% translate "Position géographique" %}
        <small class="text-muted fw-normal">({% translate "facultatif" %})</small>
    </span>
    <div class="d-flex gap-1">
        <button type="button" id="locPickerGeoBtn"
                class="btn btn-sm btn-outline-primary"
                title="{% translate 'Utiliser ma position' %}">
            <i class="bi bi-geo-alt"></i>
        </button>
        <button type="button" id="locPickerClearBtn"
                class="btn btn-sm btn-outline-danger"
                title="{% translate 'Effacer le marqueur' %}">
            <i class="bi bi-x-circle"></i>
        </button>
    </div>
</div>

{# Map container – AddressSearchControl renders the search box inside the map. #}
<div id="locPickerMap"
     style="height:280px; border-radius:0.375rem; border:1px solid #dee2e6;">
</div>
<small class="text-muted">
    {% translate "Cliquez sur la carte pour positionner le marqueur, ou glissez-le pour l'ajuster." %}
</small>