{% extends "basic/layout.html" %}

{%- block doctype -%}
<!DOCTYPE html>
{%- endblock -%}

{%- block body_tag %}
<body data-effects="{{ 'low' if neonbook_vhs|default('on') == 'off' else 'full' }}" data-perf-log="{{ neonbook_perf_log|default('off') }}" data-perf-sound="{{ neonbook_perf_sound|default('off') }}" data-perf-notify="{{ neonbook_perf_notify|default('off') }}">
{%- endblock %}

{%- block extrahead %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#050508">
<link rel="icon" type="image/svg+xml" href="{{ pathto('favicon.svg', 1) }}">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="{{ pathto('_static/fonts/orbitron.css', 1) }}">
<link rel="stylesheet" href="{{ pathto('_static/fonts/share-tech-mono.css', 1) }}">
<link rel="stylesheet" href="{{ pathto('_static/fonts/intel-one-mono.css', 1) }}">
<link rel="stylesheet" href="{{ pathto('_static/fonts/monoton.css', 1) }}">
<link rel="stylesheet" href="{{ pathto('_static/fonts/audiowide.css', 1) }}">
<link rel="stylesheet" href="{{ pathto('_static/fonts/syncopate.css', 1) }}">
<link rel="stylesheet" href="{{ pathto('_static/fonts/press-start-2p.css', 1) }}">
<link rel="stylesheet" href="{{ pathto('_static/fonts/bungee.css', 1) }}">
<link rel="stylesheet" href="{{ pathto('_static/css/neon-wave.css', 1) }}">
<link rel="stylesheet" href="{{ pathto('_static/css/responsive.css', 1) }}">
<link rel="stylesheet" href="{{ pathto('_static/css/components.css', 1) }}">
<link rel="stylesheet" href="{{ pathto('_static/css/code-blocks.css', 1) }}">
{% endblock %}

{%- block header %}
<header class="synthwave-header">
  <div class="header-inner">
    <button class="sidebar-toggle" aria-label="Toggle sidebar" aria-expanded="false">
      <span class="toggle-icon toggle-open" aria-hidden="true">v</span>
      <span class="toggle-icon toggle-close" aria-hidden="true">&gt;</span>
    </button>

    {% set light_logo = theme_light_logo|default('') %}
    {% set dark_logo = theme_dark_logo|default('') %}
    <a class="header-logo{% if light_logo or dark_logo %} has-logo{% endif %}" href="{{ pathto(master_doc) }}">
      {% if light_logo and dark_logo %}
      <img class="logo-img logo-light" src="{{ pathto('_static/' ~ light_logo, 1) }}" alt="{{ project }}">
      <img class="logo-img logo-dark" src="{{ pathto('_static/' ~ dark_logo, 1) }}" alt="{{ project }}">
      {% elif light_logo %}
      <img class="logo-img logo-single" src="{{ pathto('_static/' ~ light_logo, 1) }}" alt="{{ project }}">
      {% elif dark_logo %}
      <img class="logo-img logo-single" src="{{ pathto('_static/' ~ dark_logo, 1) }}" alt="{{ project }}">
      {% endif %}
      <span class="logo-text">{{ project }}</span>
    </a>

    <div class="header-spacer"></div>
    <div class="header-controls">
      {% include "effects-toggle.html" %}
      {% include "theme-toggle.html" %}
    </div>
  </div>
</header>
{% endblock %}

{%- block relbar1 %}{%- endblock %}
{%- block relbar2 %}{%- endblock %}

{%- block content %}
<div class="synthwave-container">
  <aside class="synthwave-sidebar" id="sidebar">
    <div class="sidebar-inner">
      <div class="sidebar-header">
        <span class="project-name">{{ project }}</span>
        {% if version %}
        <span class="project-version">v{{ version }}</span>
        {% endif %}
      </div>
      <nav class="sidebar-nav" aria-label="Main navigation">
        {{ toctree(maxdepth=theme_show_toc_level|int, titles_only=True, includehidden=True) }}
      </nav>
    </div>
  </aside>

  <main class="synthwave-main">
    <article class="synthwave-article">
      {% if parents %}
      <nav class="breadcrumbs" aria-label="Breadcrumb">
        <ul>
          <li><a href="{{ pathto(master_doc) }}">{{ shorttitle }}</a></li>
          {% for parent in parents %}
          <li><a href="{{ parent.link }}">{{ parent.title }}</a></li>
          {% endfor %}
          <li aria-current="page">{{ title }}</li>
        </ul>
      </nav>
      {% endif %}

      <div class="page-content">
        {% block body %}{% endblock %}
      </div>

      <nav class="page-nav" aria-label="Page navigation">
        {% if prev %}
        <a class="nav-prev" href="{{ prev.link }}">
          <span class="nav-label">Previous</span>
          <span class="nav-title">{{ prev.title }}</span>
        </a>
        {% endif %}
        {% if next %}
        <a class="nav-next" href="{{ next.link }}">
          <span class="nav-label">Next</span>
          <span class="nav-title">{{ next.title }}</span>
        </a>
        {% endif %}
      </nav>
    </article>

    <aside class="synthwave-toc">
      <div class="toc-inner">
        <h4 class="toc-title">On this page</h4>
        {{ toc }}
      </div>
    </aside>
  </main>
</div>
{% endblock %}

{%- block footer %}
<footer class="synthwave-footer">
  <div class="footer-inner">
    <div class="footer-copyright">
      {% trans copyright=copyright|e %}&copy; {{ copyright }}{% endtrans %}
    </div>
    <div class="footer-meta">
      Built with <a href="https://www.sphinx-doc.org/">Sphinx</a>
      using the <a href="https://github.com/nutsloop/neon-wave">Neon Wave Theme</a>
    </div>
  </div>
</footer>
<div class="performance-hint" role="status" aria-live="polite" hidden>
  <div class="performance-hint__content">
    <div class="performance-hint__text">Performance hint: turn off VHS effects if the page feels heavy.</div>
    <div class="performance-hint__actions">
      <button class="performance-hint__action" type="button">Turn off effects</button>
      <button class="performance-hint__dismiss" type="button">Dismiss</button>
    </div>
  </div>
</div>
<button class="back-to-top" type="button" aria-label="Back to top" hidden>Top</button>
<script src="{{ pathto('_static/js/neon-wave.js', 1) }}"></script>
<script src="{{ pathto('_static/js/theme-toggle.js', 1) }}"></script>
{% endblock %}
