{#
/**
 * @file
 * Gutenberg Base theme override to display a single page.
 *
 * Uses Gutenberg CSS classes (wp-site-blocks, entry-content, is-layout-constrained)
 * so that globalStyles and preset CSS apply consistently between the editor
 * and the frontend.
 *
 * Available variables:
 *
 * General utility variables:
 * - base_path: The base URL path of the Drupal installation.
 * - is_front: A flag indicating if the current page is the front page.
 * - logged_in: A flag indicating if the user is registered and signed in.
 * - is_admin: A flag indicating if the user has permission to access
 *   administration pages.
 *
 * Site identity:
 * - front_page: The URL of the front page.
 *
 * Regions:
 * - page.header: Items for the header region.
 * - page.primary_menu: Items for the primary menu region.
 * - page.secondary_menu: Items for the secondary menu region.
 * - page.search: Items for the search region.
 * - page.highlighted: Items for the highlighted region.
 * - page.breadcrumb: Items for the breadcrumb region.
 * - page.content_above: Items for the content above region.
 * - page.content: The main content of the current page.
 * - page.sidebar: Items for the sidebar.
 * - page.content_below: Items for the content below region.
 * - page.footer: Items for the footer region.
 *
 * @see \Drupal\Core\Theme\ThemePreprocess::preprocessPage()
 * @see html.html.twig
 */
#}
<div class="page">

  {% if page.header or page.primary_menu or page.secondary_menu or page.search %}
    <header class="site-header" role="banner">
      <div class="site-header__inner">
        {{ page.header }}

        {% if page.primary_menu or page.secondary_menu or page.search %}
          <button class="nav-toggle" aria-controls="site-nav-menus" aria-expanded="false" aria-label="{{ 'Menu'|t }}">
            <span class="nav-toggle__label">{{ 'Menu'|t }}</span>
            <span class="nav-toggle__icon">
              <span></span>
              <span></span>
              <span></span>
            </span>
          </button>

          <div id="site-nav-menus" class="site-nav-menus">
            {% if page.primary_menu %}
              <nav class="primary-nav" role="navigation" aria-label="{{ 'Main navigation'|t }}">
                {{ page.primary_menu }}
              </nav>
            {% endif %}
            {% if page.search %}
              <div class="header-search">
                {{ page.search }}
              </div>
            {% endif %}
            {% if page.secondary_menu %}
              <nav class="secondary-nav" role="navigation" aria-label="{{ 'Secondary navigation'|t }}">
                {{ page.secondary_menu }}
              </nav>
            {% endif %}
          </div>
        {% endif %}

        <button class="dark-mode-toggle" type="button" aria-pressed="false" aria-label="{{ 'Switch to dark mode'|t }}"></button>
      </div>
    </header>
  {% endif %}

  {% if page.highlighted %}
    <div class="highlighted">
      <div class="highlighted__inner">
        {{ page.highlighted }}
      </div>
    </div>
  {% endif %}

  {% if page.breadcrumb %}
    <div class="breadcrumb-region">
      {{ page.breadcrumb }}
    </div>
  {% endif %}

  <main role="main" class="main-content">
    <a id="main-content" tabindex="-1"></a>

    {% if page.content_above %}
      <div class="content-above">
        {{ page.content_above }}
      </div>
    {% endif %}

    {% if page.sidebar %}
      <div class="layout-with-sidebar">
        <div class="layout-main">
          {{ page.content }}
        </div>
        <aside class="layout-sidebar" role="complementary">
          {{ page.sidebar }}
        </aside>
      </div>
    {% else %}
      <div class="layout-no-sidebar">
        {{ page.content }}
      </div>
    {% endif %}

    {% if page.content_below %}
      <div class="content-below">
        {{ page.content_below }}
      </div>
    {% endif %}
  </main>

  {% if page.footer %}
    <footer class="site-footer" role="contentinfo">
      <div class="site-footer__inner">
        {{ page.footer }}
      </div>
    </footer>
  {% endif %}

</div>
