<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>{% block title %}{{ brand }}{% endblock %}</title>

  <link rel="icon" href="{{ url_for('favicon') }}">
  <script src="https://cdn.tailwindcss.com"></script>

  <style>
    :root {
      --bt-accent: {{ accent|default('#9b5cf6') }};
    }
  </style>
</head>

<body class="bg-[#080812] text-white min-h-screen flex flex-col">

  <!-- NAVBAR -->
  <header class="sticky top-0 z-40 backdrop-blur-md bg-[#0a0a15]/80 border-b border-white/10">
    <div class="max-w-7xl mx-auto px-4 md:px-6">
      <div class="h-16 flex items-center justify-between gap-4">

        <!-- Brand -->
        <a href="{{ url_for('dashboard') }}"
           class="shrink-0 text-lg md:text-xl font-bold tracking-tight flex items-center gap-1">
          <span>Buff</span>
          <span style="color:var(--bt-accent)">TEKS</span>
        </a>

        {% set u = session.get('discord_user') %}

        <!-- Desktop Nav -->
        <nav class="hidden md:flex items-center gap-3">

          <a href="{{ url_for('dashboard') }}"
             class="text-white/80 text-sm font-medium px-3 py-2 rounded-lg transition hover:text-white hover:bg-white/10
                    {% if request.endpoint == 'dashboard' %}text-white bg-white/10{% endif %}">
            Dashboard
          </a>


          {% if u %}
            <span class="text-white/60 text-sm px-1 md:px-2">
              Signed in as
              <b class="font-semibold" style="color:var(--bt-accent)">
                {{ u.username }}
              </b>
            </span>

            <a href="{{ url_for('logout') }}"
               class="text-white/80 text-sm font-medium px-3 py-2 rounded-lg transition hover:text-white hover:bg-white/10">
              Log out
            </a>
          {% else %}
            <a href="{{ url_for('discord_login') }}"
               class="font-semibold text-black px-3 py-2 rounded-lg"
               style="background:var(--bt-accent)">
              Sign in
            </a>
          {% endif %}
        </nav>

        <!-- Mobile Toggle -->
        <button id="navToggle"
          class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg
                 text-white hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/20"
          aria-label="Toggle menu"
          aria-expanded="false">

          <svg id="iconOpen" xmlns="http://www.w3.org/2000/svg"
               class="h-6 w-6" fill="none" viewBox="0 0 24 24"
               stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M4 6h16M4 12h16M4 18h16" />
          </svg>

          <svg id="iconClose" xmlns="http://www.w3.org/2000/svg"
               class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24"
               stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Mobile Menu -->
    <div id="mobileMenu"
         class="hidden md:hidden border-t border-white/10 bg-[#0b0b17]/95 shadow-2xl transition-all duration-200">
      <div class="max-w-7xl mx-auto px-4 md:px-6 py-4 flex flex-col gap-2">

        <a href="{{ url_for('dashboard') }}"
           class="text-white/80 text-sm font-medium px-3 py-2 rounded-lg transition hover:text-white hover:bg-white/10
                  {% if request.endpoint == 'dashboard' %}text-white bg-white/10{% endif %}">
          Dashboard
        </a>


        <span class="h-px bg-white/10 my-1"></span>

        {% if u %}
          <div class="px-3 text-sm text-white/60">
            Signed in as <b class="text-white">{{ u.username }}</b>
          </div>

          <a href="{{ url_for('logout') }}"
             class="text-white/80 text-sm font-medium px-3 py-2 rounded-lg transition hover:text-white hover:bg-white/10">
            Log out
          </a>
        {% else %}
          <a href="{{ url_for('discord_login') }}"
             class="font-semibold text-black px-3 py-2 rounded-lg w-fit"
             style="background:var(--bt-accent)">
            Sign in
          </a>
        {% endif %}
      </div>
    </div>
  </header>

  <!-- MAIN -->
  <main class="flex-1 max-w-7xl w-full mx-auto px-4 md:px-6 py-10">
    {% block content %}{% endblock %}
  </main>

  <!-- FOOTER -->
  <footer class="text-center py-6 text-white/40 text-sm border-t border-white/10">
    &copy; {{ brand }} · Built in-house by student engineers
  </footer>

  <!-- Mobile Nav Script -->
  <script>
    const toggle = document.getElementById('navToggle');
    const menu = document.getElementById('mobileMenu');
    const openIcon = document.getElementById('iconOpen');
    const closeIcon = document.getElementById('iconClose');

    toggle?.addEventListener('click', () => {
      menu.classList.toggle('hidden');

      const expanded = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', (!expanded).toString());

      openIcon.classList.toggle('hidden');
      closeIcon.classList.toggle('hidden');
    });
  </script>

</body>
</html>

