{% extends "base.html" %}
{% from "_macros.html" import icon, brandlink %}
{#
  Shared chrome for the admin area: its own narrow nav rather than the chat
  sidebar, so administration is visibly a different place from chatting.
#}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
{% endblock %}

{% block body_attrs %} data-authenticated="true"{% endblock %}

{% block body %}
<div class="shell">
  <aside class="sidebar">
    <div class="sidebar__header">
      {{ brandlink(uid="admin") }}
    </div>

    <nav class="sidebar__scroll" aria-label="Administration">
      <div class="nav-group">
        <div class="nav-group__label">Administration</div>
        <a class="nav-item {{ 'is-active' if section == 'general' }}" href="/admin/general">
          {{ icon("gear", "icon--sm") }}
          <span class="nav-item__label">General</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'customization' }}"
           href="/admin/customization">
          {{ icon("sun", "icon--sm") }}
          <span class="nav-item__label">Customization</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'connections' }}"
           href="/admin/connections">
          {{ icon("server", "icon--sm") }}
          <span class="nav-item__label">Connections</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'models' }}" href="/admin/models">
          {{ icon("sliders", "icon--sm") }}
          <span class="nav-item__label">Models</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'audio' }}" href="/admin/audio">
          {{ icon("speaker", "icon--sm") }}
          <span class="nav-item__label">Audio</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'search' }}" href="/admin/search">
          {{ icon("globe", "icon--sm") }}
          <span class="nav-item__label">Web search</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'images' }}" href="/admin/images">
          {{ icon("image", "icon--sm") }}
          <span class="nav-item__label">Image generation</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'extraction' }}"
           href="/admin/extraction">
          {{ icon("file-text", "icon--sm") }}
          <span class="nav-item__label">Extraction</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'tools' }}" href="/admin/tools">
          {{ icon("link", "icon--sm") }}
          <span class="nav-item__label">Tools</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'agents' }}" href="/admin/agents">
          {{ icon("sparkle", "icon--sm") }}
          <span class="nav-item__label">Agents</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'schedules' }}" href="/admin/schedules">
          {{ icon("clock", "icon--sm") }}
          <span class="nav-item__label">Scheduling</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'mcp' }}" href="/admin/mcp">
          {{ icon("server", "icon--sm") }}
          <span class="nav-item__label">MCP servers</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'prompts' }}" href="/admin/prompts">
          {{ icon("sparkle", "icon--sm") }}
          <span class="nav-item__label">Prompts</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'suggestions' }}"
           href="/admin/suggestions">
          {{ icon("star", "icon--sm") }}
          <span class="nav-item__label">Suggestions</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'users' }}" href="/admin/users">
          {{ icon("user", "icon--sm") }}
          <span class="nav-item__label">Users</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'updates' }}" href="/admin/updates">
          {{ icon("refresh", "icon--sm") }}
          <span class="nav-item__label">Updates</span>
        </a>
        <a class="nav-item {{ 'is-active' if section == 'groups' }}" href="/admin/groups">
          {{ icon("users", "icon--sm") }}
          <span class="nav-item__label">Groups &amp; permissions</span>
        </a>
      </div>

    </nav>

    <div class="sidebar__footer">
      <a class="nav-item" href="/chat">
        {{ icon("chat", "icon--sm") }}
        <span class="nav-item__label">Back to chats</span>
      </a>
    </div>
  </aside>

  <main class="main">
    <header class="topbar">
      <h1 class="topbar__title">{% block heading %}Administration{% endblock %}</h1>
      <button class="btn btn--icon" type="button" data-theme-toggle aria-label="Switch theme">
        <span class="theme-icon theme-icon--dark">{{ icon("moon") }}</span>
        <span class="theme-icon theme-icon--light">{{ icon("sun") }}</span>
      </button>
    </header>

    <div class="admin-scroll">
      <div class="admin-page">
        {% block admin_content %}{% endblock %}
      </div>
    </div>
  </main>
</div>
{% endblock %}