{#
/**
 * @file
 * Theme override to display a single page.
 *
 * The doctype, html, head and body tags are not in this template. Instead they
 * can be found in the html.html.twig template in this directory.
 *
 * Available variables:
 *
 * General utility variables:
 * - base_path: The base URL path of the Drupal installation. Will usually be
 *   "/" unless you have installed Drupal in a sub-directory.
 * - 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. Use this instead of base_path when
 *   linking to the front page. This includes the language domain or prefix.
 *
 * Page content (in order of occurrence in the default page.html.twig):
 * - node: Fully loaded node, if there is an automatically-loaded node
 *   associated with the page and the node ID is the second argument in the
 *   page's path (e.g. node/12345 and node/12345/revisions, but not
 *   comment/reply/12345).
 *
 * Regions:
 * branding: 'Branding (used for logo and slogan of the website)'
 * utilities_links: 'Utilities (next to burger button)'
 * offcanvas_menu: 'Burger menu (only visible with opened burger menu)'
 * highlights_menu: 'Highlights menu'
 * header_intro: 'Header intro (for images, sliders, heroes)'
 * pagetitle: 'Page title'
 * content: 'Main content'
 * footer: 'Footer'
 *
 * @see template_preprocess_page()
 * @see html.html.twig
 */
#}

{% if mood_image_bg is not empty %}
  <div class="layout-background" style="background-image: url('{{ mood_image_bg }}');"></div>
{% else %}
  <div class="layout-background-empty"></div>
{% endif %}


<div class="layout-container">
  <header role="banner" class="header">
    {% if page.branding %}
    <div class="header__branding">
      {{ page.branding }}
    </div>
    {% endif %}
    {% if page.utilities_links %}
    <div class="header__utilities">
      {{ page.utilities_links }}
    </div>
    {% endif %}
    {% if page.highlights_menu %}
    <div class="header__highlights-menu">
      {{ page.highlights_menu }}
    </div>
    {% endif %}
    {% if page.offcanvas_menu %}
    <div class="header__burger">
      <button
        id="button-offcanvas-open"
        class="header__burger--buttons"
        aria-controls="offcanvas_menu"
        aria-expanded="false"
        aria-label="{{ 'Menu'|t }}">
      </button>
    </div>
    <dialog id="offcanvas_menu_dialog">
      <div class="header__offcanvas-menu"  aria-hidden="true" id="offcanvas_menu">
        <div class="header__offcanvas-menu--grid">
          <div class="header__offcanvas-menu--heading">
            {% if page.branding %}
              <div class="header__offcanvas-menu__branding">
                {{ page.branding }}
              </div>
            {% endif %}
            <div class="header__offcanvas-menu--toggle">
              <button
                id="button-offcanvas-close"
                class="header__burger--buttons header__offcanvas-menu--burger"
                aria-controls="offcanvas_menu"
                aria-expanded="false"
                aria-label="{{ 'Close'|t }}">
              </button>
            </div>
          </div>
          <div class="header__offcanvas-menu--content">
            {{ page.offcanvas_menu }}
          </div>
        </div>
      </div>
    </dialog>
    {% endif %}
  </header>
  {% if page.breadcrumbs %}
    <div class="breadcrumbs">
      {{ page.breadcrumbs }}
    </div>
  {% endif %}

  {% if page.header_intro %}
  <div class="hero-intro">
    {{ page.header_intro }}
  </div>
  {% endif %}

  <main role="main" class="main content">
    <a id="main-content" class="visually-hidden"></a>

    <div class="main__page-title">
      {{ page.pagetitle }}
    </div>
    <div class="main__content">
      {{ page.content }}
    </div>
  </main>

</div>

{% if page.footer %}
  <footer role="contentinfo" class="footer content inverted">
    <h2 class="visually-hidden">{{ 'Page footer'|t }}</h2>
    <div class="footer--container">
      {{ page.footer }}
      <a href="#top" class="scroll-to-top" title="{{ 'Back to top'|t }}">
        <span class="visually-hidden">
          {{ 'Back to top'|t }}
        </span>
      </a>
    </div>
  </footer>
{% endif %}

{% if page.below_footer %}
  <div class="below-footer--container">
    {{ page.below_footer }}
  </div>
{% endif %}
