<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{% block title %}{{ page_title }} · Foodlinkk{% endblock %}</title>
  <link rel="stylesheet" href="/static/css/palantir-theme.css" />
  <link rel="stylesheet" href="/static/css/pulse-theme.css" />
  <link rel="stylesheet" href="/static/css/topnav-neo.css?v=2" />
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
  <script defer src="https://unpkg.com/htmx.org@2.0.4"></script>
  {% block extra_head %}{% endblock %}
</head>
<body x-data="{ drawerOpen: false }" :class="{ 'drawer-open': drawerOpen }">
  <header class="topbar">
    <div class="topbar-brand">
      <p class="brand-title">Foodlinkk</p>
      <p class="brand-name">Command Center</p>
    </div>

    <nav class="topnav">
      <a href="/" class="nav-pill nav-pill-herman topnav-herman {% if request.url.path == '/' %}active{% endif %}">
        Herman
      </a>

      <div class="topnav-group topnav-group-crm">
        <span class="topnav-label">CRM</span>
        <a href="/clients" class="nav-pill nav-pill-clients {% if request.url.path.startswith('/clients') %}active{% endif %}">Clients</a>
        <a href="/deals" class="nav-pill nav-pill-deals {% if request.url.path.startswith('/deals') %}active{% endif %}">Deals</a>
        <a href="/products" class="nav-pill nav-pill-products {% if request.url.path.startswith('/products') %}active{% endif %}">Products</a>
        <a href="/suppliers" class="nav-pill nav-pill-suppliers {% if request.url.path.startswith('/suppliers') %}active{% endif %}">Suppliers</a>
      </div>

      <div class="topnav-group topnav-group-intel">
        <span class="topnav-label">Intel</span>
        <a href="/beurs" class="nav-pill nav-pill-beurs {% if request.url.path.startswith('/beurs') %}active{% endif %}">Beurs Live</a>
        <a href="/retail" class="nav-pill nav-pill-retail {% if request.url.path.startswith('/retail') %}active{% endif %}">Retail</a>
        <a href="/browser" class="nav-pill nav-pill-browser {% if request.url.path.startswith('/browser') or request.url.path.startswith('/monitor') %}active{% endif %}">Browser &amp; Monitor</a>
        <a href="/documents" class="nav-pill nav-pill-documents {% if request.url.path.startswith('/documents') %}active{% endif %}">Documents</a>
      </div>

      <div class="topnav-group topnav-group-hermes">
        <span class="topnav-label">Hermes</span>
        <a href="/hermes" class="nav-pill nav-pill-telegram {% if request.url.path.startswith('/hermes') %}active{% endif %}">Telegram</a>
      </div>

      <div class="topnav-group topnav-group-agents">
        <span class="topnav-label">Agents</span>
        <a href="/agents" class="nav-pill nav-pill-agents {% if request.url.path.startswith('/agents') %}active{% endif %}">Agents</a>
        <a href="/marketing" class="nav-pill nav-pill-marketing {% if request.url.path.startswith('/marketing') %}active{% endif %}">Marketing</a>
        <a href="/herman" class="nav-pill nav-pill-chat {% if request.url.path.startswith('/herman') %}active{% endif %}">Chat</a>
        <a href="/studio" class="nav-pill nav-pill-studio {% if request.url.path.startswith('/studio') %}active{% endif %}">Studio</a>
        <a href="/reports" class="nav-pill nav-pill-reports {% if request.url.path.startswith('/reports') %}active{% endif %}">Reports</a>
      </div>

      <div class="topnav-group topnav-group-system">
        <a href="/analytics" class="nav-pill nav-pill-analytics {% if request.url.path.startswith('/analytics') %}active{% endif %}">Analytics</a>
        <a href="/voice" class="nav-pill nav-pill-voice {% if request.url.path.startswith('/voice') %}active{% endif %}">Voice</a>
        <a href="/settings" class="nav-pill nav-pill-settings {% if request.url.path.startswith('/settings') %}active{% endif %}">Settings</a>
      </div>
    </nav>
  </header>

  <main class="main-topnav">{% block content %}{% endblock %}</main>

  <script src="/static/js/cockpit.js"></script>
  {% block scripts %}{% endblock %}
</body>
</html>
