{% import "partials/icons.html" as ic %}
{# How many lanelets a field's constraints match, beside the map in the picker
   that is already drawing them.

   The count comes from the sweeper's own constraint engine, so it cannot
   disagree with an actual sweep, and the ids go to the open map through
   `data-picker-highlight` -- there is no second drawing of the same map here,
   and no server-rendered fallback under it: the page fetches htmx from a CDN,
   so an editor with no network has no working controls at all. #}
<div class="ed-picker-matches"
     data-picker-highlight="{{ preview.highlight_ids|join(',') }}">
  <div class="ed-preview-head">
    <div>
      {% if preview.map_loaded %}
        <div class="ed-preview-count">
          {{ preview.matched_ids|length }} matched
          <span class="of">of {{ preview.total }} lanelets</span>
        </div>
      {% else %}
        <div class="ed-preview-count">
          {{ preview.constraint_count }} constraint{{ '' if preview.constraint_count == 1 else 's' }}
        </div>
        <div class="ed-preview-sub">Not evaluated yet</div>
      {% endif %}
    </div>
    <button class="ed-btn-sm"
            hx-post="/draft/{{ draft.id }}/lanelet-preview"
            hx-vals='{"slot": "{{ slot_key }}", "load_map": "1"}'
            hx-target="#{{ picker_matches_id(slot_key) }}" hx-swap="innerHTML"
            hx-indicator="#{{ picker_matches_id(slot_key) }}-spinner">
      <span id="{{ picker_matches_id(slot_key) }}-spinner" class="htmx-indicator ed-spinner"></span>
      {{ 'Refresh' if preview.map_loaded else 'Preview matches' }}
    </button>
  </div>
  {% if preview.error %}
    <div class="ed-notice ed-notice-warn" style="margin-top:8px; padding:8px 10px; font-size:12px">
      {{ ic.icon('alert', 14) }}<div>{{ preview.error }}</div>
    </div>
  {% endif %}
  {% if preview.map_loaded %}
    <p class="ed-map-key">Outlined on the map: the matching lanelets.</p>
  {% endif %}
  {% if preview.matched_ids %}
    <details style="margin-top:8px">
      <summary>Matched IDs</summary>
      <p class="ed-id-list">{{ preview.matched_ids|join(', ') }}</p>
    </details>
  {% endif %}
</div>