<!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>
      <a href="https://github.com/Polensky/prixdugaz" target="_blank" rel="noopener noreferrer" class="github-link" aria-label="GitHub">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.342-3.369-1.342-.454-1.154-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.744 0 .267.18.579.688.481C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
        </svg>
      </a>
    </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>
