{#- TEMPLATE VAR SETTINGS #}
{%- set url_root = pathto('', 1) %}
{%- if url_root == '#' %}
  {%- set url_root = '' %}
{%- endif %}
{%- if not embedded and docstitle %}
  {%- set titlesuffix = " &mdash; "|safe + docstitle|e %}
{%- else %}
  {%- set titlesuffix = "" %}
{%- endif %}
{%- set lang_attr = 'en' if language == None else (language | replace('_', '-')) %}

{#- DOCUMENT -#}
<!DOCTYPE html>
<html class="{{ theme_default_palette ~ '-palette' }}">

{#- HEAD #}
<head>
  {#- METADATA #}
  <meta charset="utf-8">
  {{ metatags }}
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {%- block htmltitle %}
  <title>{{ title|striptags|e }}{{ titlesuffix }}</title>
  {%- endblock %}

  {#- FAVICON -#}
  {%- if favicon_url %}
  <link rel="shortcut icon" href="{{ favicon_url }}"/>
  {%- endif %}
  {#- CANONICAL URL #}
  {%- if pageurl %}
  <link rel="canonical" href="{{ pageurl|e }}" />
  {%- endif %}

  {#- CSS -#}
  {%- for css in css_files %}
    {%- if css|attr("rel") %}
      <link rel="{{ css.rel }}" href="{{ pathto(css.filename, 1) }}" type="text/css"
            {%- if css.title is not none %}title="{{ css.title }}"{% endif %}/>
    {%- else %}
      <link rel="stylesheet" href="{{ pathto(css, 1) }}" type="text/css"/>
    {%- endif -%}
  {% endfor -%}
  {%- for cssfile in extra_css_files %}
    <link rel="stylesheet" href="{{ pathto(cssfile, 1) }}" type="text/css"/>
  {% endfor -%}
  <style>
    :root {
      --primary: {{ '#' ~ theme_primary }};
      --primary-invert: {{ '#' ~ theme_primary_invert }};
    }
  </style>

  {#- OPENSEARCH #}
  {%- if use_opensearch %}
    <link rel="search" type="application/opensearchdescription+xml"
          title="{% trans docstitle=docstitle|e %}Search within {{ docstitle }}{% endtrans %}"
          href="{{ pathto('_static/opensearch.xml', 1) }}"/>
  {%- endif %}

  {%- block linktags %}
    {%- if hasdoc('about') %}
      <link rel="author" title="{{ _('About these documents') }}" href="{{ pathto('about') }}"/>
    {%- endif %}
    {%- if hasdoc('genindex') %}
      <link rel="index" title="{{ _('Index') }}" href="{{ pathto('genindex') }}"/>
    {%- endif %}
    {%- if hasdoc('search') %}
      <link rel="search" title="{{ _('Search') }}" href="{{ pathto('search') }}"/>
    {%- endif %}
    {%- if hasdoc('copyright') %}
      <link rel="copyright" title="{{ _('Copyright') }}" href="{{ pathto('copyright') }}"/>
    {%- endif %}
    {%- if next %}
      <link rel="next" title="{{ next.title|striptags|e }}" href="{{ next.link|e }}"/>
    {%- endif %}
    {%- if prev %}
      <link rel="prev" title="{{ prev.title|striptags|e }}" href="{{ prev.link|e }}"/>
    {%- endif %}
  {%- endblock %}
  {%- block extrahead %}
    {% for scriptfile in script_files -%} 
      {{ js_tag(scriptfile) }} 
    {% endfor -%}
  {%- endblock %}
</head>

{#- BODY #}
<body>

{%- block header %}
<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
  <div class="navbar-menu container">
    <div class="navbar-start">
      <button id="light-switch" class="button is-light is-rounded is-small is-outlined">
        <span class="icon is-small" aria-hidden="true">
          <i class="icon"></i>
        </span>
        <span>Palette</span>
      </button>
    </div>
    <div class="navbar-end">
      <div class="navbar-brand">
        <a class="navbar-item logo" href="{{ pathto('index') }}">
        {%- if logo_url %}
          <img src="{{ logo_url }}" alt="Project logo">
        {%- else %}
          <span>{{ project }}</span>
        {%- endif %}
        </a>
      </div>
    </div>
  </div>
</nav>
{%- endblock %}

{#- BREADCRUMBS #}
<nav class="container breadcrumb has-arrow-separator is-right is-small" aria-label="breadcrumbs">
  {% include "breadcrumbs.html" %}
</nav>

{%- block content -%}
<main>
  <div class="container">
    <div class="columns">
      {%- if theme_sidebar %}
      <div class="column is-three-quarters">
      {%- else %}
      <div class="column is-full">
      {%- endif %}
        <div class="document content">
          {% block body %} {% endblock %}
          {% block document %} {% endblock%}
        </div>
      </div>
      {%- if theme_sidebar %}
      <div class="column is-flex is-flex-direction-column is-one-quarter">
        {% include "searchbox.html" %}
        <aside class="menu is-align-self-flex-end has-text-right">
        {%- block menu -%}
          {%- set global_toc = toctree(
            maxdepth=theme_navigation_depth|int,
            collapse=False,
            includehidden=theme_includehidden|tobool,
            titles_only=theme_titles_only|tobool
          ) -%}
          {%- if global_toc -%}
            {{ global_toc }}
          {%- else %}
            {{ toc }}
          {%- endif %}
        {%- endblock %}
        </aside>
      </div>
      {%- endif %}
    </div>
  </div>
</main> 
{%- endblock %}

{#- JAVASCRIPT #}
{%- if not embedded %}
  <script type="text/javascript" src="{{ pathto('_static/js/theme.js', 1) }}"></script>
{%- endif %}

{#- FOOTER #}
{%- block footer %}
<footer class="footer">
  <div class="container content has-text-right">
    <div class="columns">
      <div class="column is-three-quarters"></div>
      <div class="column is-one-quarter is-size-7">
        {%- if show_copyright %}
        <p>
          {%- if hasdoc('copyright') %}
            {% trans path=pathto('copyright'), copyright=copyright|e %}&#169; <a href="{{ path }}">Copyright</a> {{ copyright }}{% endtrans %}
          {%- else %}
            {% trans copyright=copyright|e %}&#169; Copyright {{ copyright }}{% endtrans %}
          {%- endif %}
        </p>
        {%- endif %}
        {%- if show_sphinx %}
        {%- trans sphinx_version=sphinx_version|e %}
        <div class="field is-grouped is-pulled-right">
          <span class="control">
            <a class="tags has-addons" href="http://sphinx-doc.org/">
              <span class="tag is-dark is-normal">
                <span class="icon is-small">
                  <i class="icon-sphinx" aria-hidden="true"></i>
                </span>
                <span>Sphinx</span>
              </span>
              <span class="tag is-primary is-normal">{{ sphinx_version }}</span>
            </a>
          </span>
          <span class="control">
            <a class="tags has-addons" href="https://bulma.io">
              <span class="tag is-dark is-normal">
                <span class="icon is-small">
                  <i class="icon-bulma" aria-hidden="true"></i>
                </span>
                <span>Bulma</span>
              </span>
              <span class="tag is-primary is-normal">0.9.3</span>
            </a>
          </span>
        </div>
        {%- endtrans %}
        {%- endif %}
      </div>
    </div>
  </div>
</footer>
{%- endblock %}  

</body>
</html>
