<!DOCTYPE html>
<html lang="en">
  <head>
    {% include "head.njk" %}
    
    <link rel="stylesheet" href="/static/app.compiled.css" id="cirro-space-stylesheet" title="Cirro Space Design System">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.0/beautify-html.js"></script>
    <script>
      window.onload = () => {
        const previews = document.getElementsByClassName("html-preview");
        for (i = 0; i < previews.length; i++) {
          previews[i].innerText = html_beautify(previews[i].textContent)
        }
      }
    </script>

  </head>
  <body class="app-body">
    <header class="header">
      <div class="navlinks logo-wrapper"><a class="navlink header-logo" href="/"></a></div>
      <div class="navlinks left">
        {% for item in navigation.items %}
          <a href="{{ item.url }}"
              {% if page.url == item.url %} aria-current="page" {% endif %}
              class="navlink
              {% if page.url == item.url %} active {% endif %}">
            {{ item.text }}
          </a>
        {% endfor %}
        <details class="header-dropdown">
          <summary class="navlink">Layouts</summary>
          <div class="dropdown-menu dropdown-projects">
            {% for layout in collections.layouts %}
              <a href="{{ layout.url }}"
                  class="dropdown-link">
                {{ layout.data.title }}
              </a>
            {% endfor %}
          </div>
        </details>
      </div>

    <details class="mobile-links">
        <summary class="mobile-menu-btn">
            <div class="navlink"><span class="sr-only">Open main menu</span><span class="text-icon-default icon icon-menu" aria-hidden="true"></span></div>
        </summary>
        <div class="mobile-menu sidebar z-10">
          {% for item in navigation.items %}
            <a href="{{ item.url }}"
                {% if page.url == item.url %} aria-current="page" {% endif %}
                class="navlink 
                {% if page.url == item.url %} active {% endif %}">
              {{ item.text }}
            </a>
          {% endfor %}
          <details class="header-dropdown">
            <summary class="navlink">Layouts</summary>
            <div class="dropdown-menu">
              {% for layout in collections.layouts %}
                <a href="{{ layout.url }}"
                    class="dropdown-link">
                  {{ layout.data.title }}
                </a>
              {% endfor %}
            </div>
          </details>
        </div>
    </details>
    </header>


    {% block content %}
      <main class="page-example-container">
        <div class="app-body">
          {% include "example-header.njk" %}
          {{ content | safe }}
        </div>
      </main>
    {% endblock %}
  
  </body>
  {% include "footer-scripts.njk" %}
</html>
