{#
  specs/layout.html
  ~~~~~~~~~~~~~~~~~
#}

<!DOCTYPE html>
<html lang="en">
  <head>
    {%- block head %}
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>{{ title }} | {{ docstitle|e }}</title>


      {%- for css in css_files %}
        {%- if css|attr("filename") %}
          {{ css_tag(css) }}
        {%- else %}
          <link rel="stylesheet" href="{{ pathto(css, 1)|e }}" type="text/css" />
        {%- endif %}
      {%- endfor %}
    {%- endblock %}
  </head>
  <body>
    {%- block content %}
      <div class="specs specs-layout mx-5 d-block d-lg-grid">
        <aside class="specs-sidebar text-muted d-none d-lg-block">
          <strong class="d-none d-md-block h6 my-2">
            {%- if builder == 'html' %}
              Contents
            {%- elif builder == 'singlehtml' %}
              On this page
            {%- endif %}
          </strong>
          <hr class="d-none d-md-block my-2">
          <nav class="d-none d-md-block">
            {%- if builder == 'html' %}
              {{ toctree(maxdepth=-1, collapse=False) }}
            {%- elif builder == 'singlehtml' %}
              {{ toc }}
            {%- endif %}
          </nav>
        </aside>

        <main class="specs-main d-block d-lg-grid">
          <div class="specs-resources"></div>
          <div class="specs-content">
            {% block body %} {% endblock %}
          </div>
        </main>
      </div>

      {%- for js in script_files %}
        {{ js_tag(js) }}
      {%- endfor %}
    {%- endblock %}
  </body>
</html>