<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>8mem</title>
    <link rel="stylesheet" href="/static/styles.css" />
  </head>
  <body>
    <div class="shell">
      <aside class="sidebar">
        <div class="brand">
          <img class="brand-logo" src="/static/logo.svg" alt="8mem logo" />
          <p>The memory your AI never had.</p>
        </div>
        <nav class="nav">
          <a class="{% if active_page == 'overview' %}active{% endif %}" href="/overview{{ active_scope.query_suffix }}">Overview</a>
          <a class="{% if active_page == 'chat' %}active{% endif %}" href="/chat{{ active_scope.query_suffix }}">Test Chat</a>
          <a class="{% if active_page == 'dashboard' %}active{% endif %}" href="/{{ active_scope.query_suffix }}">Your AI Memory</a>
          <a class="{% if active_page == 'import' %}active{% endif %}" href="/import{{ active_scope.query_suffix }}">Import Conversations</a>
          <a class="{% if active_page == 'mirror' %}active{% endif %}" href="/mirror{{ active_scope.query_suffix }}">Memory Mirror</a>
          <a class="{% if active_page == 'inbox' %}active{% endif %}" href="/inbox{{ active_scope.query_suffix }}">Memory Inbox</a>
          <a class="{% if active_page == 'files' %}active{% endif %}" href="/files{{ active_scope.query_suffix }}">Memory Files</a>
          <a class="{% if active_page == 'editor' %}active{% endif %}" href="/editor{{ active_scope.query_suffix }}">Edit Memory</a>
          <a class="{% if active_page == 'export' %}active{% endif %}" href="/export{{ active_scope.query_suffix }}">Export Memory</a>
          <a class="{% if active_page == 'everywhere' %}active{% endif %}" href="/everywhere{{ active_scope.query_suffix }}">Use Everywhere</a>
        </nav>
        <div class="sidebox">
          <div class="badge blue">Active scope</div>
          <p style="margin-top:10px"><strong>{{ active_scope.pill }}</strong></p>
          <p class="small" style="margin-top:6px">{{ active_scope.label }}</p>
          <p class="small" style="margin-top:6px">{{ active_scope.note }}</p>
        </div>
        <div class="sidebox">
          <div class="badge gold">Positioning</div>
          <p style="margin-top:10px">
            8mem is a <strong>memory layer for AI</strong>, not another agent.
            It stores portable AI memory in Markdown and lets any assistant reuse it.
          </p>
        </div>
      </aside>
      <main class="main">{% block content %}{% endblock %}</main>
    </div>
  </body>
</html>
