{% load i18n %}
{% comment %}
  Reusable polygon picker component.
  Renders a MapLibre map with a simple click-to-draw polygon tool.
  Each click adds a vertex; clicking the first vertex (or the Finish button)
  closes the polygon.  The resulting GeoJSON is written to id_geom_geojson.

  If the form already has a geometry (edit mode), it is displayed on the map
  and the user can redraw it.

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

{# Hidden geom_geojson input – submitted with the form; JS writes to it. #}
<div class="d-none">
    {{ form.geom_geojson }}
</div>

<hr class="mt-3">

<div class="d-flex align-items-center justify-content-between mb-1">
    <span class="fw-semibold">
        {% translate "Géométrie (polygone)" %}
        <small class="text-muted fw-normal">({% translate "facultatif" %})</small>
    </span>
    <div class="d-flex gap-1">
        <button type="button" id="polyPickerDrawBtn"
                class="btn btn-sm btn-outline-success"
                title="{% translate 'Dessiner un polygone' %}">
            <i class="bi bi-pentagon"></i> {% translate "Dessiner" %}
        </button>
        <button type="button" id="polyPickerFinishBtn"
                class="btn btn-sm btn-success d-none"
                title="{% translate 'Terminer le polygone' %}">
            <i class="bi bi-check-circle"></i> {% translate "Terminer" %}
        </button>
        <button type="button" id="polyPickerClearBtn"
                class="btn btn-sm btn-outline-danger"
                title="{% translate 'Effacer le polygone' %}">
            <i class="bi bi-x-circle"></i>
        </button>
    </div>
</div>

<div id="locPickerMap"
     style="height:280px; border-radius:0.375rem; border:1px solid #dee2e6; cursor:default;">
</div>
<small class="text-muted" id="polyPickerHint">
    {% translate "Cliquez sur « Dessiner » pour commencer à tracer un polygone sur la carte." %}
</small>