{{define "map-content"}}
<!-- Loading overlay -->
<div id="loading">
  <div aria-busy="true"></div>
  <span>Chargement des données...</span>
</div>

<!-- ── MAP PAGE ── -->
<div id="page-map">
  <div id="map"></div>

  <button id="filter-toggle" class="map-panel" aria-label="Filtres">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
    <span>Filtres</span>
  </button>

  <div id="slider-panel" class="map-panel">
    <select id="region-select">
      <option value="">Toutes les régions</option>
      {{range .Regions}}
      <option value="{{.}}">{{.}}</option>
      {{end}}
    </select>
    <div class="fuel-btns">
      <button class="fuel-btn active" data-fuel="regular">Régulier</button>
      <button class="fuel-btn" data-fuel="super">Super</button>
      <button class="fuel-btn" data-fuel="diesel">Diesel</button>
    </div>
    <div class="cluster-row" style="display:flex; align-items:center; gap:6px; margin-bottom:10px;">
      <div class="fuel-btns" id="cluster-btns" style="margin-bottom:0; flex:1;">
        <button class="fuel-btn cluster-btn" data-mode="min">Min</button>
        <button class="fuel-btn cluster-btn active" data-mode="avg">Moy</button>
        <button class="fuel-btn cluster-btn" data-mode="max">Max</button>
      </div>
      <div class="cluster-info-tip">
        ?
        <div class="cluster-info-tooltip">
          Prix affiché sur chaque groupe de stations :<br><br>
          <strong>Min</strong> — prix le plus bas du groupe<br>
          <strong>Moy</strong> — prix moyen du groupe<br>
          <strong>Max</strong> — prix le plus élevé du groupe<br><br>
          La couleur reflète également la valeur affichée.
        </div>
      </div>
    </div>
    <div class="cluster-hint">Prix affiché sur chaque groupe de stations.</div>
    <label style="display:flex; align-items:center; gap:6px; margin-bottom:10px; font-size:14px; cursor:pointer;">
      <input type="checkbox" role="switch" id="costco-toggle" checked>
      Costco
    </label>
    <label for="price-slider">Prix max: <span id="slider-label">-</span></label>
    <input type="range" id="price-slider" min="0" max="300" step="0.5" value="300">
    <div id="slider-value">
      <span id="slider-min">-</span>
      <span id="slider-max">-</span>
    </div>
    <div id="visible-count"></div>
    <div id="last-updated-mobile"></div>
    <div id="legend">
      <div class="legend-header" id="legend-title">Régulier (¢/L)</div>
      <div class="legend-gradient"></div>
      <div class="legend-labels">
        <span id="min-price">-</span>
        <span id="max-price">-</span>
      </div>
    </div>
  </div>

  <div id="filter-backdrop"></div>
  <button id="locate-btn" aria-label="Ma position" title="Ma position">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>
  </button>
  <div id="last-updated" hidden>{{.LastUpdated}}</div>
</div>

<script>
  window.__stations = {{.StationsJSON}};
  window.__deltas   = {{.DeltasJSON}};
</script>
<script src="/map.js"></script>
{{end}}