<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
  <title>Fisheries Dashboard — FLÓ</title>

  <script>
    (function () {
      var stored = localStorage.getItem('poc-theme');
      var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      var theme = stored || (prefersDark ? 'tokyo' : 'light');
      document.documentElement.setAttribute('data-theme', theme);
    })();
  </script>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

  <link rel="stylesheet" href="/static/style.css">
</head>
<body>

  <nav>
    <a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
    <a href="/" class="nav-brand">
      FLÓ <span class="brand-sep">/</span> <span class="brand-sub">HAGFISH</span>
    </a>
  </nav>

  <main class="page-body">
    <div class="dashboard">
      <div id="loading-overlay" class="loading-overlay">
        <span>Loading fisheries data…</span>
      </div>

      <div class="filters">
        <div class="filter-group">
          <label for="species">Species</label>
          <select id="species"><option value="">All</option></select>
        </div>
        <div class="filter-group">
          <label for="zone">Zone</label>
          <select id="zone"><option value="">All</option></select>
        </div>
        <div class="filter-group">
          <label for="gear">Gear</label>
          <select id="gear"><option value="">All</option></select>
        </div>
        <div class="filter-group">
          <label for="month_from">From</label>
          <select id="month_from"><option value="">All</option></select>
        </div>
        <div class="filter-group">
          <label for="month_to">To</label>
          <select id="month_to"><option value="">All</option></select>
        </div>
        <button class="apply-btn" id="apply-filters">Apply</button>
      </div>

      <div id="empty-state" class="empty-state" style="display:none;">
        <p>No data available for the selected filters.</p>
        <p>Try adjusting your filters or running an ingestion.</p>
      </div>

      <div id="charts-grid" class="charts-grid" style="display:none;">
        <div class="chart-container full-width">
          <div class="chart-title">Total Landings (Mass & Value)</div>
          <div id="chart-line" style="width:100%; height:300px;"></div>
        </div>
        <div class="chart-container">
          <div class="chart-title">Top Species by Value</div>
          <div id="chart-donut" style="width:100%; height:300px;"></div>
        </div>
        <div class="chart-container">
          <div class="chart-title">Landings by Month (Stacked by Species)</div>
          <div id="chart-bar" style="width:100%; height:300px;"></div>
        </div>
      </div>
    </div>
  </main>

  <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>

  <script src="/static/app.js"></script>
</body>
</html>
