{%- extends "basic/layout.html" %}
{#- The Sphinx pages share the top bar, the footer, the fonts and the tokens with the landing page and
    the benchmark report: libstb-docs.css (docs/assets/) is the one stylesheet, copied into _static/
    by html_static_path in conf.py. Only the fonts come from Google Fonts. -#}

{%- block htmltitle %}
<title>{{ title|striptags|e }} - libstb</title>
{% endblock %}

{%- block extrahead %}
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=JetBrains+Mono:wght@400;600&display=swap">
<link rel="icon" href="{{ pathto('_static/libstb-sq.svg', 1) }}" type="image/svg+xml">
<script>
(function () {
  var t = 'light';
  try {
    var s = JSON.parse(localStorage.getItem('libstb-docs') || '{}');
    if (s.theme) t = s.theme; else if (matchMedia('(prefers-color-scheme: dark)').matches) t = 'dark';
  } catch (e) {}
  document.documentElement.setAttribute('data-theme', t);
})();
</script>
{% endblock %}

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

{%- block header %}
<header class="topbar">
    <a class="topbar-brand" href="../../index.html">
        <span class="topbar-logo"><img src="{{ pathto('_static/libstb-sq.svg', 1) }}" alt="" width="30" height="30"></span>
        <span class="topbar-name">libstb</span>
        <span class="topbar-sep"></span><span class="topbar-sub">Documentation</span>
    </a>
    <nav class="topbar-nav" aria-label="Sections">
        <a class="topbar-link current" href="{{ pathto(root_doc) }}" aria-current="page">Python</a>
        <a class="topbar-link" href="../../cpp/html/index.html">C++</a>
        <a class="topbar-link" href="../../benchmarks/index.html">Benchmarks</a>
    </nav>
    <div class="topbar-actions">
        {%- if builder != 'dirhtml' %}
        <div class="topbar-search">
            {%- block sidebarsearch %}
            {%- include "searchbox.html" %}
            {%- endblock %}
        </div>
        {%- endif %}
        <span class="topbar-version">v{{ version }}</span>
        <a class="topbar-gh" href="https://github.com/MohammadRaziei/libstb" target="_blank" rel="noopener">GitHub</a>
        <button class="theme-toggle" type="button" onclick="toggleTheme()" aria-label="Toggle theme">
            <svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/></svg>
            <svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"/></svg>
        </button>
    </div>
</header>
{% endblock %}

{%- block content %}
{%- if parents %}
<nav class="page-breadcrumb">
    <a href="{{ pathto(root_doc) }}">{{ shorttitle }}</a>
    {%- for parent in parents %}
    <span class="page-breadcrumb-sep">/</span>
    <a href="{{ parent.link|e }}">{{ parent.title }}</a>
    {%- endfor %}
    <span class="page-breadcrumb-sep">/</span>
    <span>{{ title|striptags }}</span>
</nav>
{%- endif %}

<div class="section-layout">
    <aside class="section-sidebar">
        <div class="section-nav-title">Python API</div>
        <nav class="section-nav-list" id="section-nav-list">
            {%- include "libstb-nav.html" %}
        </nav>
    </aside>

    <article class="page-article" id="page-article" role="main">
        {%- block document %}
        {{ body }}
        {%- endblock %}

        <nav class="page-nav">
            {%- if prev %}
            <a href="{{ prev.link|e }}" class="page-nav-btn page-nav-prev">
                <span class="page-nav-direction">&larr; Previous</span>
                <span class="page-nav-label">{{ prev.title }}</span>
            </a>
            {%- else %}<div class="page-nav-btn page-nav-empty"></div>{%- endif %}
            {%- if next %}
            <a href="{{ next.link|e }}" class="page-nav-btn page-nav-next">
                <span class="page-nav-direction">Next &rarr;</span>
                <span class="page-nav-label">{{ next.title }}</span>
            </a>
            {%- else %}<div class="page-nav-btn page-nav-empty"></div>{%- endif %}
        </nav>
    </article>

    <aside class="page-toc" id="page-toc">
        <div class="page-toc-title">On this page</div>
        <ul id="toc-list"></ul>
    </aside>
</div>
{%- endblock %}

{%- block footer %}
<footer class="footer">
    <div class="footer-inner">
        <div>
            <div class="footer-brand"><img src="{{ pathto('_static/libstb-sq.svg', 1) }}" alt="" width="34" height="34"><span>libstb</span></div>
            <p>Image I/O, resizing and font rendering on top of the stb single-header libraries, with a binding for Python and a C++17 core. MIT license. v{{ version }}</p>
        </div>
        <div class="footer-links">
            <a href="{{ pathto(root_doc) }}">Python reference</a>
            <a href="../../cpp/html/index.html">C++ reference</a>
            <a href="../../benchmarks/index.html">Benchmarks</a>
            <a href="https://github.com/MohammadRaziei/libstb">GitHub</a>
            {%- if show_source and has_source and sourcename %}
            <a href="{{ pathto('_sources/' + sourcename, 1)|e }}">View page source</a>
            {%- endif %}
        </div>
    </div>
</footer>
<script>
    function toggleTheme() {
        var t = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
        document.documentElement.setAttribute('data-theme', t);
        try { var s = JSON.parse(localStorage.getItem('libstb-docs') || '{}'); s.theme = t; localStorage.setItem('libstb-docs', JSON.stringify(s)); } catch (e) {}
    }
    document.addEventListener('DOMContentLoaded', function () {
        var article = document.getElementById('page-article'), tocList = document.getElementById('toc-list');
        if (!article || !tocList) return;
        var headings = article.querySelectorAll('h2, h3');
        if (!headings.length) { var toc = document.getElementById('page-toc'); if (toc) toc.style.display = 'none'; return; }
        headings.forEach(function (h, i) {
            if (!h.id) h.id = 'heading-' + i;
            var li = document.createElement('li');
            li.className = h.tagName === 'H3' ? 'toc-h3' : 'toc-h2';
            var a = document.createElement('a'); a.href = '#' + h.id; a.textContent = h.textContent.replace(/\u00b6$/, '');
            li.appendChild(a); tocList.appendChild(li);
        });
        var io = new IntersectionObserver(function (entries) {
            entries.forEach(function (e) {
                if (!e.isIntersecting) return;
                tocList.querySelectorAll('a').forEach(function (a) { a.classList.remove('active'); });
                var active = tocList.querySelector('a[href="#' + e.target.id + '"]');
                if (active) active.classList.add('active');
            });
        }, { rootMargin: '-20% 0px -70% 0px' });
        headings.forEach(function (h) { io.observe(h); });
    });
</script>
{% endblock %}