<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{% block title %}Fenn Dashboard{% endblock %}</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
  <link rel="icon" type="image/png" href="{{ url_for('static', filename='images/icon.png') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="layout">

  <!-- ── Sidebar ──────────────────────────────────────────────────────── -->
  <aside class="sidebar" id="sidebar">
    <div class="sidebar-header">
      <img src="{{ url_for('static', filename='images/icon.png') }}"
           alt="fenn"
           class="logo-img">
      <div class="logo-text">
        <span class="logo-name"><span class="logo-bracket">[</span>fenn<span class="logo-bracket">]</span></span>
        <span class="logo-sub">/dashboard</span>
      </div>
    </div>

    <div class="sidebar-section">
      <div class="sidebar-section-label">Navigation</div>

      <a href="/" class="nav-item {% if active_page == 'home' %}active{% endif %}">
        <span class="nav-icon">◈</span>
        <span class="nav-label">Overview</span>
      </a>

      {% if projects %}
      <div class="sidebar-section-label" style="margin-top:16px;">Projects</div>
      {% for p in projects %}
      <a href="/project/{{ p.name | urlencode }}"
         class="nav-item {% if active_project == p.name %}active{% endif %}"
         title="{{ p.name }}">
        <span class="nav-icon">◆</span>
        <span class="nav-label">{{ p.name }}</span>
        <span class="nav-badge">{{ p.session_count }}</span>
      </a>
      {% endfor %}
      {% endif %}
    </div>

    <div class="sidebar-footer">
      Scanning {{ projects | length }} project{% if projects | length != 1 %}s{% endif %}
    </div>
  </aside>

  <!-- ── Main ─────────────────────────────────────────────────────────── -->
  <div class="main">

    <header class="topbar">
      <button class="hamburger" id="sidebar-toggle" aria-label="Toggle navigation">
        <span></span><span></span><span></span>
      </button>
      <div class="breadcrumb">
        {% block breadcrumb %}{% endblock %}
      </div>
      {% if current_user %}
      <div class="topbar-user">
        <span class="topbar-user-email">{{ current_user.email }}</span>
        <form method="POST"
              action="{{ url_for('logout') }}"
              class="topbar-logout"
              id="logout-form">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn-ghost" id="logout-trigger">Disconnect</button>
        </form>
      </div>

      <dialog id="logout-dialog"
              class="confirm-dialog"
              aria-labelledby="logout-dialog-title">
        <h2 class="confirm-title" id="logout-dialog-title">Disconnect?</h2>
        <p class="confirm-body">
          You'll need to paste your dashboard token again next launch.
          To just stop using the dashboard, close this tab instead.
        </p>
        <div class="confirm-actions">
          <button type="button" class="btn-ghost" id="logout-cancel">Cancel</button>
          <button type="button" class="btn-danger" id="logout-confirm">Disconnect</button>
        </div>
      </dialog>
      {% endif %}
    </header>

    <div class="page">
      {% block content %}{% endblock %}
    </div>

  </div>
</div>

<script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
</html>
