<!DOCTYPE html>
<html lang="{{ lang }}" data-base-path="{{ site.base_path }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ page.title }} - {{ site.title }}</title>
  {% if page.canonical_url %}<link rel="canonical" href="{{ page.canonical_url | safe }}">
  {% endif %}{% for alt in page.alternate_langs %}<link rel="alternate" hreflang="{{ alt.lang }}" href="{{ alt.url | safe }}">
  {% endfor %}<link rel="icon" type="image/svg+xml" href="{{ site.base_path }}/favicon.svg">
  <link rel="stylesheet" href="{{ site.base_path }}/css/main.css">
  <script>
    (function() {
      var t = localStorage.getItem('preferred-theme');
      if (!t) t = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
      if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
    })();
  </script>
</head>
<body>
  <!-- Header: site title, nav links, search/theme/lang buttons -->
  <header class="header">
    <div class="header-inner">
      {% block sidebar_toggle %}{% endblock %}
      <a href="{{ site.base_path }}{{ lang_prefix }}/" class="header-title"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-1 -1 26 26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-4px;margin-right:6px"><path d="M7.6 12.5H5a2 2 0 0 0-2 2v6.8a2 2 0 0 0 2 2h9.5a2 2 0 0 0 2-2v-5.5" fill="none" transform="translate(-0.5, -1)"/><g transform="translate(3, 1) rotate(-20, 12, 12)"><path d="M7 12l8.5-8.5 6.5 0L16.5 9H10z"/><path d="M7 12L4.5 14.5"/></g></svg>{{ site.title }}{% if site.version %} <span style="font-size:0.75em;font-weight:normal;margin-left:4px">v{{ site.version }}</span>{% endif %}</a>
      <div class="header-spacer"></div>
      <button class="header-menu-toggle" aria-label="Menu">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg>
      </button>
      <div class="header-dropdown">
        <nav class="header-nav">
          <a href="{{ site.base_path }}{{ lang_prefix }}/">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            Home
          </a>
          {% for link in site.nav %}
          {% if link.url %}
          <a href="{{ link.url }}"{% if link.icon_svg %} aria-label="{{ link.label }}"{% endif %}>
            {% if link.icon_svg %}{{ link.icon_svg | safe }}{% endif %}
            {{ link.label }}
          </a>
          {% elif link.path %}
          <a href="{{ site.base_path }}{{ lang_prefix }}/{{ link.path }}">
            {% if link.icon_svg %}{{ link.icon_svg | safe }}{% endif %}
            {{ link.label }}
          </a>
          {% endif %}
          {% endfor %}
        </nav>
        <div class="header-tools">
          <button class="search-btn" aria-label="Search (⌘K)">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          </button>
          <button class="theme-toggle" aria-label="Toggle theme"></button>
          {% if site.langs | length > 1 %}
          <div class="lang-selector">
            <button class="lang-btn" aria-label="Language">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
              {{ lang | upper }}
            </button>
            <ul class="lang-popup">
              {% for l in site.langs %}
              <li><a href="{{ page.url | replace(from=lang_prefix ~ '/', to='/' ~ l ~ '/') }}" data-lang="{{ l }}">{{ l | upper }}</a></li>
              {% endfor %}
            </ul>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </header>

  <!-- Draft banner: shown only when a page's front-matter has `status = "draft"` -->
  {% if page.status == "draft" %}
  <div class="draft-banner">DRAFT</div>
  {% endif %}

  <!-- Main layout: sidebar + content area (or full-width for portal pages) -->
  <div class="layout {% block layout_class %}{% endblock %}">
    {% block body %}{% endblock %}
  </div>

  <!-- Footer -->
  <footer class="footer">
    {{ site.footer_message }}
  </footer>

  <!-- Search modal -->
  <div class="search-overlay" id="search-overlay">
    <div class="search-modal">
      <div class="search-input-wrap">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <input type="text" id="search-input" placeholder="Search..." autocomplete="off" spellcheck="false">
        <kbd class="search-esc">ESC</kbd>
      </div>
      <ul class="search-results" id="search-results"></ul>
    </div>
  </div>

  <script src="{{ site.base_path }}/js/main.js"></script>
</body>
</html>
