{% import 'macros/layout.html' as layout %}
{% from '_types/root/header/_oob.html' import root_header_start, root_header_end with context %}
{% from '_types/root/_oob_menu.html' import mobile_menu with context %}

<!doctype html>
<html lang="en">
  <head>

    {% block meta %}
      {% include 'social/meta_site.html' %}
    {% endblock %}

    {% if og_meta is defined and og_meta %}
      {% for prop, content in og_meta %}
        <meta property="{{ prop }}" content="{{ content }}">
      {% endfor %}
    {% endif %}
    {% if oembed_link is defined and oembed_link %}
      {{ oembed_link }}
    {% endif %}

    {% include '_types/root/_head.html' %}
  </head>
  <body class="bg-stone-50 text-stone-900">
    <div class="max-w-screen-2xl mx-auto py-1 px-1">
    {% block header %}
    {% from '_types/root/_n/macros.html' import header with context %}
    {% call header() %}
        {% call layout.details('/root-header') %}
          {% call layout.summary(
              'root-header-summary',
              _class='flex items-start gap-2 p-1 + bg-' + menu_colour + '-' + (500-(level()*100))|string,
              )
          %}
            <div class="flex flex-col w-full items-center">

              {% from '_types/root/header/_header.html' import header_row with context %}
              {{ header_row() }}
              <div id="root-header-child" class="flex flex-col w-full items-center">
                {% block root_header_child %}
                {% endblock %}
              </div>
            </div>
            
          {% endcall %}
            {% call layout.menu('root-menu', 'md:hidden bg-yellow-100') %}
            {% block main_mobile_menu %}
            {% endblock %}
          {% endcall %}
        {% endcall %}


       
    {% endcall %}
    {% endblock %}


    <div
        id="filter"
    >
      {% block filter %}
      {% endblock %}
    </div>
    <main
      id="root-panel"
      class="max-w-full">
      <div class="md:min-h-0">
        <div class="flex flex-row md:h-full md:min-h-0">
          <aside
            id="aside"
            class="hidden md:flex md:flex-col max-w-xs md:h-full md:min-h-0 mr-3"
          >
            {% block aside %}
            {% endblock %}
          </aside>
            
            <section
              id="main-panel"
                class="flex-1 md:h-full md:min-h-0 overflow-y-auto overscroll-contain js-grid-viewport"
            >
              {% block content %}
              {% endblock %}
              <div class="pb-8"></div>
            </section>
          
        </div>
      </div>
    </main>

    </div>
    <script src="{{asset_url('scripts/body.js')}}"></script>
  </body>
</html>
