<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">
        {% 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">
        {% 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>

  <div class="navlinks right">
    <div id="docsearch"></div>
    {% set sunIcon %}<svg class="ds-theme-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>{% endset %}
    {% set moonIcon %}<svg class="ds-theme-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>{% endset %}
    <details class="header-dropdown ds-theme-dropdown">
      <summary class="navlink" title="Theme" aria-label="Theme">
        <span data-theme-icon="light">{{ sunIcon | safe }}</span>
        <span data-theme-icon="dark">{{ moonIcon | safe }}</span>
        <span class="icon icon-computer" data-theme-icon="system" aria-hidden="true"></span>
      </summary>
      <div class="dropdown-menu">
        <button type="button" class="dropdown-link" data-theme-option="light" onclick="setTheme('light'); this.closest('details').open = false">{{ sunIcon | safe }}<span>Light</span></button>
        <button type="button" class="dropdown-link" data-theme-option="dark" onclick="setTheme('dark'); this.closest('details').open = false">{{ moonIcon | safe }}<span>Dark</span></button>
        <button type="button" class="dropdown-link" data-theme-option="system" onclick="setTheme('system'); this.closest('details').open = false"><span class="icon icon-computer" aria-hidden="true"></span><span>System</span></button>
      </div>
    </details>
  </div>


</header>

