{{define "stats-content-shell"}}
<!-- ── STATS PAGE ── -->
<div id="page-stats">
  <h2>Statistiques des prix</h2>

  <!-- Region filter -->
  <div style="margin-bottom: 20px;">
    <select id="stats-region-select"
            style="padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--secondary); color: var(--secondary-foreground); cursor: pointer; min-width: 220px;"
            hx-get="/stats/content"
            hx-target="#stats-content"
            hx-include="#stats-days"
            hx-trigger="change"
            name="region">
      <option value="">Toutes les régions</option>
      {{range .Regions}}
      <option value="{{.}}">{{.}}</option>
      {{end}}
    </select>
    <!-- Hidden input tracks current days selection for region changes -->
    <input type="hidden" id="stats-days" name="days" value="7">
  </div>

  <!-- Dynamic content: cards + chart + table -->
  <div id="stats-content"
       hx-get="/stats/content?days=7"
       hx-trigger="load"
       hx-swap="innerHTML">
    <div style="text-align:center; color:var(--muted-foreground); padding:40px 0;">Chargement...</div>
  </div>
</div>

<script src="/stats.js"></script>
{{end}}