<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="{{ page.description | default: site.description }}">
  <meta name="author" content="CodeHalwell">

  <title>{{ page.title | default: site.title }} - Agent-Gantry Documentation</title>

  <!-- SEO -->
  <link rel="canonical" href="{{ page.url | absolute_url }}">
  <meta property="og:title" content="{{ page.title | default: site.title }}">
  <meta property="og:description" content="{{ page.description | default: site.description }}">
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ page.url | absolute_url }}">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">

  <!-- Syntax highlighting -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="{{ '/assets/images/favicon.svg' | relative_url }}">

  <!-- Preload fonts for performance -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
  <!-- Skip to main content for accessibility -->
  <a href="#main-content" class="skip-to-main">Skip to main content</a>

  <!-- Header -->
  <header class="site-header">
    <div class="header-content">
      <a href="{{ '/' | relative_url }}" class="site-logo">
        <svg class="logo-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span>Agent-Gantry</span>
      </a>

      <!-- Search Bar -->
      <div class="search-container">
        <input
          type="search"
          class="search-input"
          placeholder="Search documentation... (Ctrl+K)"
          aria-label="Search documentation"
        >
      </div>

      <!-- Header Actions -->
      <div class="header-actions">
        <a href="https://github.com/CodeHalwell/Agent-Gantry" class="github-link" target="_blank" rel="noopener noreferrer">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 8px;">
            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
          </svg>
          GitHub
        </a>

        <button class="mobile-menu-toggle" aria-label="Toggle navigation menu" aria-expanded="false">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="3" y1="12" x2="21" y2="12"></line>
            <line x1="3" y1="6" x2="21" y2="6"></line>
            <line x1="3" y1="18" x2="21" y2="18"></line>
          </svg>
        </button>
      </div>
    </div>
  </header>

  <div class="site-container">
    <!-- Sidebar Navigation -->
    <nav class="sidebar" role="navigation" aria-label="Main navigation">
      <ul class="sidebar-nav">
        <li class="nav-section">
          <div class="nav-section-title">Getting Started</div>
          <ul class="nav-submenu">
            <li class="nav-item"><a href="{{ '/' | relative_url }}" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="{{ '/getting-started' | relative_url }}" class="nav-link">Quick Start</a></li>
          </ul>
        </li>

        <li class="nav-section">
          <div class="nav-section-title">Guides</div>
          <ul class="nav-submenu">
            <li class="nav-item"><a href="{{ '/guides/semantic_tool_decorator' | relative_url }}" class="nav-link">Semantic Tool Decorator</a></li>
            <li class="nav-item"><a href="{{ '/guides/dynamic_mcp_selection' | relative_url }}" class="nav-link">Dynamic MCP Selection</a></li>
            <li class="nav-item"><a href="{{ '/guides/vector_store_llm_integration' | relative_url }}" class="nav-link">Vector Store & LLM Integration</a></li>
            <li class="nav-item"><a href="{{ '/guides/local_persistence_and_skills' | relative_url }}" class="nav-link">Local Persistence & Skills</a></li>
          </ul>
        </li>

        <li class="nav-section">
          <div class="nav-section-title">Reference</div>
          <ul class="nav-submenu">
            <li class="nav-item"><a href="{{ '/reference/api-reference' | relative_url }}" class="nav-link">API Reference</a></li>
            <li class="nav-item"><a href="{{ '/reference/configuration' | relative_url }}" class="nav-link">Configuration</a></li>
            <li class="nav-item"><a href="{{ '/reference/llm_sdk_compatibility' | relative_url }}" class="nav-link">LLM SDK Compatibility</a></li>
            <li class="nav-item"><a href="{{ '/reference/cli' | relative_url }}" class="nav-link">CLI</a></li>
          </ul>
        </li>

        <li class="nav-section">
          <div class="nav-section-title">Architecture</div>
          <ul class="nav-submenu">
            <li class="nav-item"><a href="{{ '/architecture/overview' | relative_url }}" class="nav-link">System Overview</a></li>
            <li class="nav-item"><a href="{{ '/architecture/best-practices' | relative_url }}" class="nav-link">Best Practices</a></li>
          </ul>
        </li>

        <li class="nav-section">
          <div class="nav-section-title">Help</div>
          <ul class="nav-submenu">
            <li class="nav-item"><a href="{{ '/troubleshooting' | relative_url }}" class="nav-link">Troubleshooting</a></li>
            <li class="nav-item"><a href="https://github.com/CodeHalwell/Agent-Gantry/issues" class="nav-link">Report Issue</a></li>
          </ul>
        </li>
      </ul>
    </nav>

    <!-- Main Content -->
    <main id="main-content" class="main-content" role="main">
      <div class="content-wrapper fade-in">
        {{ content }}
      </div>
    </main>
  </div>

  <!-- Scripts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/yaml.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js"></script>
  <script>hljs.highlightAll();</script>

  <script src="{{ '/assets/js/navigation.js' | relative_url }}"></script>
  <script src="{{ '/assets/js/search.js' | relative_url }}"></script>
</body>
</html>
