{% from "partials/icons.html" import icon %}
<aside
  class="fixed inset-y-0 left-0 z-40 flex w-64 flex-col border-r border-gray-200 bg-white transition-transform dark:border-gray-800 dark:bg-gray-900 lg:static lg:translate-x-0"
  :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
  aria-label="Main navigation"
>
  <div class="flex h-14 items-center gap-2 border-b border-gray-200 px-4 dark:border-gray-800">
    <a href="/ui/" class="text-lg font-bold tracking-tight text-indigo-600 dark:text-indigo-400">Sraosha</a>
    <span class="rounded-md bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400">v0.1.2</span>
  </div>
  <nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
    <p class="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-gray-400">Main</p>
    {% set main_nav = [
      ("/ui/", "Overview", "home", "Overview"),
      ("/ui/contracts", "Contracts", "document", "Contracts"),
      ("/ui/data-quality", "Data Quality", "chart-bar", "Data Quality"),
      ("/ui/compliance", "Compliance", "shield-check", "Compliance"),
      ("/ui/impact", "Lineage", "arrows-right-left", "Lineage"),
    ] %}
    {% for href, label, iname, ap in main_nav %}
    <a href="{{ href }}"
       class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors
              {% if active_page == ap %}bg-indigo-50 text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-300{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white{% endif %}">
      {{ icon(iname, "w-5 h-5 flex-shrink-0 opacity-80") }}
      {{ label }}
    </a>
    {% endfor %}
    <p class="mb-2 mt-6 px-2 text-xs font-semibold uppercase tracking-wider text-gray-400">Settings</p>
    {% set settings_nav = [
      ("/ui/settings/teams", "Teams", "users", "Teams"),
      ("/ui/settings/alerting", "Alerting", "bell", "Alerting"),
      ("/ui/connections", "Connections", "server", "Connections"),
      ("/ui/schedules", "Schedules", "clock", "Schedules"),
    ] %}
    {% for href, label, iname, ap in settings_nav %}
    <a href="{{ href }}"
       class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors
              {% if active_page == ap %}bg-indigo-50 text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-300{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white{% endif %}">
      {{ icon(iname, "w-5 h-5 flex-shrink-0 opacity-80") }}
      {{ label }}
    </a>
    {% endfor %}
  </nav>
  <div class="border-t border-gray-200 p-3 dark:border-gray-800">
    <a href="/docs" class="block rounded-lg px-3 py-2 text-xs text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">API docs</a>
  </div>
</aside>