{% load agentfeed_extras %}
<header class="topbar">
  <div class="brandline">
    <a class="brand-link" href="{% url 'feed' %}"><img class="brand-logo" src="/static/logo.png" alt=""><h1>AgentFeed</h1></a>
  </div>
  <div class="toolbar">
    {% if topbar_toolbar %}{% include topbar_toolbar %}{% endif %}
  </div>
  <div class="topbar-actions">
    <button class="avatar-button" type="button" data-user-menu-toggle aria-haspopup="true" aria-expanded="false" title="{{ request.user.username }}" aria-label="{{ request.user.username }} menu">
      <span class="avatar" style="background: {{ request.user.username|avatar_color }};">{{ request.user.username|avatar_initial }}</span>
    </button>
    <div class="user-menu-dropdown" hidden data-user-menu>
      <div class="user-menu-name">{{ request.user.username }}</div>
      <a href="{% url 'settings-account' %}">Settings</a>
      <a href="{% url 'settings-about' %}">About</a>
      <button type="button" data-theme-toggle>Dark mode</button>
      <form method="post" action="{% url 'logout' %}">{% csrf_token %}<button type="submit">Log out</button></form>
    </div>
  </div>
</header>
<script>
  (() => {
    const toggle = document.querySelector("[data-user-menu-toggle]");
    const menu = document.querySelector("[data-user-menu]");
    if (!toggle || !menu) return;
    toggle.addEventListener("click", (event) => {
      event.stopPropagation();
      const isHidden = menu.hidden;
      menu.hidden = !isHidden;
      toggle.setAttribute("aria-expanded", String(isHidden));
    });
    document.addEventListener("click", (event) => {
      if (!menu.hidden && !menu.contains(event.target) && event.target !== toggle) {
        menu.hidden = true;
        toggle.setAttribute("aria-expanded", "false");
      }
    });

    const themeToggle = document.querySelector("[data-theme-toggle]");
    if (themeToggle) {
      const syncLabel = () => {
        const isDark = document.documentElement.getAttribute("data-theme") === "dark";
        themeToggle.textContent = isDark ? "Light mode" : "Dark mode";
      };
      syncLabel();
      themeToggle.addEventListener("click", () => {
        const isDark = document.documentElement.getAttribute("data-theme") === "dark";
        if (isDark) {
          document.documentElement.removeAttribute("data-theme");
          try { localStorage.setItem("agentfeed.theme", "light"); } catch (e) {}
        } else {
          document.documentElement.setAttribute("data-theme", "dark");
          try { localStorage.setItem("agentfeed.theme", "dark"); } catch (e) {}
        }
        syncLabel();
      });
    }
  })();
</script>