{% extends "base.html" %}

{% block body -%}
{{ super() }}
{% include "partials/icons.html" %}

<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
<label class="overlay sidebar-overlay" for="__navigation">
  <div class="visually-hidden">Hide navigation sidebar</div>
</label>
<label class="overlay toc-overlay" for="__toc">
  <div class="visually-hidden">Hide table of contents sidebar</div>
</label>

{% if theme_announcement -%}
<div class="announcement">
  <aside class="announcement-content">
    {% block announcement %} {{ theme_announcement }} {% endblock announcement %}
  </aside>
</div>
{%- endif %}

<div class="page">
  <header class="mobile-header">
    <div class="header-left">
      <label class="nav-overlay-icon" for="__navigation">
        <div class="visually-hidden">Toggle site navigation sidebar</div>
        <i class="icon"><svg><use href="#svg-menu"></use></svg></i>
      </label>
    </div>
    <div class="header-center">
      <a href="{{ pathto(master_doc) }}"><div class="brand">{{ docstitle if docstitle else project }}</div></a>
    </div>
    <div class="header-right">
      <label class="toc-overlay-icon toc-header-icon{% if furo_hide_toc %} no-toc{% endif %}" for="__toc">
        <div class="visually-hidden">Toggle table of contents sidebar</div>
        <i class="icon"><svg><use href="#svg-toc"></use></svg></i>
      </label>
    </div>
  </header>

  <!-- Left sidebar -->
  <aside class="sidebar-drawer">
    <div class="sidebar-container">
      {% block left_sidebar %}
      <div class="sidebar-sticky">
        {%- for sidebar_section in sidebars %}
          {%- include sidebar_section %}
        {%- endfor %}
      </div>
      {% endblock left_sidebar %}
    </div>
  </aside>

  <!-- Main content -->
  <div class="main">
    <div class="content">
      <div class="article-container">
        <a href="#" class="back-to-top muted-link">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"></path>
          </svg>
          <span>{% trans %}Back to top{% endtrans %}</span>
        </a>
        <div class="content-icon-container">
          <label class="toc-overlay-icon toc-content-icon{% if furo_hide_toc %} no-toc{% endif %}" for="__toc">
            <div class="visually-hidden">Toggle table of contents sidebar</div>
            <i class="icon"><svg><use href="#svg-toc"></use></svg></i>
          </label>
        </div>
        <article role="main">
          {% block content %}{{ body }}{% endblock %}
        </article>
      </div>

      <!-- Footer: Webring links, last updated, view counter -->
      <footer>
        {% block footer %}
        <div class="bottom-of-page">
            <!-- TODO: insert via template variables -->
            <div id="newring">
              <div style="text-align: center;">
                <a href="https://tilde.team/ring/">tilde.team webring</a>
                <br>
              <a title="previous tilde" href="https://tilde.team/ring/?action=prev&me=jwcook"><i class="fa-solid fa-arrow-left-long"></i> prev</a>
              | <a title="random tilde" href="https://tilde.team/ring/?action=random&me=jwcook"><i class="fa-solid fa-shuffle"></i></a> |
              <a title="next tilde" href="https://tilde.team/ring/?action=next&me=jwcook">next <i class="fa-solid fa-right-long"></i></a>
              </div>
            </div>
            <div align="right">
            {%- if last_updated -%}
            <div class="last-updated">Last updated on {{ last_updated }}</div>
            {%- endif %}
            <img alt="Page views" src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Ftilde.team%2F%7Ejwcook%2F&title=views&count_bg=%2383A598&title_bg=%23504945&title=hits&edge_flat=false"/>
            <!-- <img alt="Page views" src="https://hits.sh/tilde.team/~jwcook.svg?style=flat-square&label=views%3A&color=83a598&labelColor=504945"/> -->
            <img src="https://tilde.team/~steph/cgi-bin/pixel.sh" />
          </div>
        </div>
        {% endblock footer %}
      </footer>
    </div>

    <!-- Right sidebar -->
    <aside class="toc-drawer{% if furo_hide_toc %} no-toc{% endif %}">
      {% block right_sidebar %}
      {% if not furo_hide_toc %}
      <div class="toc-sticky toc-scroll">
        <div class="toc-title-container">
          <span class="toc-title">
            {{ _("On this page") }}
          </span>
        </div>
        <div class="toc-tree-container">
          <div class="toc-tree">
            {{ toc }}
          </div>
        </div>
      </div>
      {% endif %}
      {% endblock right_sidebar %}
    </aside>
  </div>
</div>
{%- endblock %}
