{{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>

  <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 style="display:flex; align-items:center; gap:6px; margin-bottom:10px;">
      <div class="fuel-btns" id="cluster-btns" style="margin-bottom:0;">
        <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>
    <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>

  <div id="last-updated" class="map-panel">{{.LastUpdated}}</div>

  <div id="legend" class="map-panel">
    <h3 id="legend-title">Prix régulier (¢/L)</h3>
    <div class="legend-gradient"></div>
    <div class="legend-labels">
      <span id="min-price">-</span>
      <span id="max-price">-</span>
    </div>
    <div id="map-stats">{{.StationCount}} stations</div>
  </div>
</div>

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