{% extends "default/module.html.jinja2" %}

{% block favicon %}
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,{%- filter urlencode %}{% include "favicon.svg" %}{% endfilter %}"/>
{% endblock favicon %}

{% block nav_title %}
    <a href="https://www.perforatedai.com" target="_blank" id="nav-wordmark">
        <img alt="Perforated AI" src="data:image/svg+xml,{%- filter urlencode %}{% include "wordmark.svg" %}{% endfilter %}"/>
    </a>
{% endblock nav_title %}

{% block nav_footer %}
    <button id="theme-toggle" onclick="toggleTheme()" role="switch" aria-label="Toggle dark mode" title="Toggle dark mode">
        <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
        </svg>
        <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="4"></circle>
            <path d="M12 2v2"></path><path d="M12 20v2"></path>
            <path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path>
            <path d="M2 12h2"></path><path d="M20 12h2"></path>
            <path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path>
        </svg>
    </button>
    <script>
        (function () {
            const stored = localStorage.getItem('pdoc-theme');
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            const dark = stored ? stored === 'dark' : prefersDark;
            if (dark) applyDark();

            function applyDark() {
                document.documentElement.setAttribute('data-theme', 'dark');
                document.getElementById('theme-toggle').setAttribute('aria-checked', 'true');
            }
            function applyLight() {
                document.documentElement.removeAttribute('data-theme');
                document.getElementById('theme-toggle').setAttribute('aria-checked', 'false');
            }
            window.toggleTheme = function () {
                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
                if (isDark) { applyLight(); localStorage.setItem('pdoc-theme', 'light'); }
                else         { applyDark();  localStorage.setItem('pdoc-theme', 'dark');  }
            };
        })();
    </script>
    {{ super() }}
{% endblock nav_footer %}

{% block attribution %}{% endblock %}