<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Essence Québec</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
  <link rel="stylesheet" href="https://unpkg.com/@knadh/oat/oat.min.css">
  <script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
  <script src="https://unpkg.com/@knadh/oat/oat.min.js"></script>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <div id="app">
    <!-- ── Top nav ── -->
    <header id="topnav">
      <span class="brand">Prix du Gaz</span>
      <nav>
        <a href="/map"
           id="nav-map"
           {{if eq .Page "map"}}aria-current="page"{{end}}
           hx-get="/map"
           hx-target="#content"
           hx-push-url="/map"
           hx-swap="innerHTML"
           hx-on::after-request="window.__onPageSwap && window.__onPageSwap('map')">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/>
            <line x1="9" y1="3" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="21"/>
          </svg>
          Carte
        </a>
        <a href="/stats"
           id="nav-stats"
           {{if eq .Page "stats"}}aria-current="page"{{end}}
           hx-get="/stats"
           hx-target="#content"
           hx-push-url="/stats"
           hx-swap="innerHTML"
           hx-on::after-request="window.__onPageSwap && window.__onPageSwap('stats')">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="20" x2="18" y2="10"/>
            <line x1="12" y1="20" x2="12" y2="4"/>
            <line x1="6"  y1="20" x2="6"  y2="14"/>
          </svg>
          Statistiques
        </a>
      </nav>
    </header>

    <!-- ── Content area (htmx swap target) ── -->
    <div id="content">
      {{if eq .Page "map"}}{{template "map-content" .}}{{end}}
      {{if eq .Page "stats"}}{{template "stats-content-shell" .}}{{end}}
    </div>
  </div>

  <script>
    // Update nav active state after htmx page swaps.
    window.__onPageSwap = function(page) {
      document.querySelectorAll('#topnav nav a').forEach(a => a.removeAttribute('aria-current'));
      const target = document.getElementById('nav-' + page);
      if (target) target.setAttribute('aria-current', 'page');
    };

    // On browser back/forward, trigger the right content reload.
    window.addEventListener('popstate', function() {
      const path = window.location.pathname;
      const page = path === '/stats' ? 'stats' : 'map';
      htmx.ajax('GET', '/' + page, { target: '#content', swap: 'innerHTML' });
      window.__onPageSwap(page);
    });
  </script>
</body>
</html>
