{# Sphinx layout template for the manon theme. #}
{%- extends "basic/layout.html" %}

<!-- extra head -->
{%- block extrahead %}
  {{ super() }}
  <link rel="stylesheet" href="{{ pathto('_static/custom.css', resource=True) }}" type="text/css" />
{% endblock %}

<!-- sidebar -->
{%- macro manon_sidebar() %}
  {%- block sidebartoc %}
    <nav
      aria-label="{{ _('Sidebar') }}"
      data-open-label="Zijbalknavigatie"
      data-close-label="Sluit zijbalknavigatie"
    >
      <div class="sticky-container">{{ toctree(includehidden=True) }}</div>
    </nav>
  {%- endblock %}
{% endmacro %}

<!-- relbar -->
{%- macro rellink_markup() %}
  {%- if prev and next %}
    {%- set divlayout = "column-2" %}
  {%- elif next %}
    {%- set divlayout = "next" %}
  {%- else %}
    {%- set divlayout = "" %}
  {%- endif %}

    <section id="relbar" class="related {{ divlayout }}">
      <nav id="rellinks" class="pagination" aria-label="{{ _('Pagination') }}">
        {%- if prev %}
        <div class="previous">
          <a href="{{ prev.link|e }}">
            <span class="visually-hidden">{{ _('Previous') }}</span>
            <span class="icon icon-chevron-left" aria-hidden="true"></span>
            {{ prev.title }}
          </a>
        </div>
        {%- endif %} {%- if next %}
        <div class="next">
          <a href="{{ next.link|e }}">
            <span class="visually-hidden">{{ _('Next') }}</span>
            {{ next.title }}
            <span class="icon icon-chevron-right" aria-hidden="true"></span>
          </a>
        </div>
        {%- endif %}
      </nav>
    </section>
{%- endmacro %}

<!-- header -->
{% block header %}
{%- if pagename != "search" and builder != "singlehtml" %}
  {%- set searchformaction = pathto('search') %}
{%- else %}
  {%- set searchformaction = "" %}
{%- endif %}

<header class="page-header">
  <a href="#main-content" class="button focus-only skip-to-content" >Ga direct naar inhoud</a>
  <nav
    aria-label="{{ _('Main Navigation') }}"
    class="collapsible"
    data-open-label="Menu"
    data-close-label="Sluit menu"
    data-media="(min-width: 48rem)"
  >
    <a href="{{ theme_home_url or pathto(master_doc) }}" class="logo">
      <img src="{{ pathto(theme_logo, 1)|e }}" alt="{{ shorttitle|e }}" />
    </a>

    <div class="collapsing-element">
      <ul>
        <li><a href="{{ theme_home_url or pathto(master_doc) }}">{{ _('Home') }}</a></li>
      </ul>
      <div>
        <form
          name="header_search"
          class="inline"
          action="{{ searchformaction }}"
          method="get"
        >
          <div>
            <div class="combined-field">
              <input
                type="text"
                name="q"
                placeholder="{{ _('Search') }}"
                aria-labelledby="searchlabel"
                autocomplete="off"
                autocapitalize="off"
                spellcheck="false"
              />
              <button type="submit">
                <span class="icon icon-search" aria-hidden="true"></span>
                <span class="visually-hidden">{{ _('Search') }}</span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </nav>
</header>
{% endblock %}

<!-- content -->
{% block content %}
  {% include "breadcrumbs.html" %}

  <main class="sidemenu" id="main-content" role="main">
    {{ manon_sidebar() }}
    {% block document %}
      <article class="page-content">
        <div class="visually-grouped content-wrapper">
          {% block body %}
            {{ body }}
          {% endblock %}
        </div>
    
        {%- block relbar_bottom %}
          {%- if theme_show_relbar_bottom|tobool %}
            {{- rellink_markup () }}
          {%- endif %}
        {% endblock %}
      </article>
      {% endblock %}
  </main>
{% endblock %}

<!-- footer -->
{% block footer %}
<footer>
  <div class="content-wrapper">
    <span class="slogan">
      {% if theme_slogan %}
        {{ theme_slogan }}
      {% endif %}
    </span>

    {%- if theme_show_copyright_privacy_block_footer|tobool %}
    <nav aria-labelledby="footer-nav-1-heading">
      <h2 id="footer-nav-1-heading">{{ _('About this website') }}</h2>
      <ul>
        <li><a href="{{ theme_copyright_url }}">{{ _('Copyright') }}</a></li>
        <li> <a href="{{ theme_privacy_url }}" target="_blank" rel="noopener noreferrer" >{{ _('Privacy') }}</a></li>
      </ul>
    </nav>
    {%- endif %}
  </div>

  {%- if theme_meta_footer %}
  <div class="meta">
    <p>{{ theme_meta_footer }}</p>
  </div>
  {%- endif %}
</footer>
{% endblock %}

<!-- relbar blocks for extensions -->
{% block relbar1 %}{% endblock %}
{% block relbar2 %}{% endblock %}