{% include 'templates/partials/globals.njk' %}


{# LAYOUT CONFIGURATION #}
{%- set pageConfig = merge({
  htmlLang: 'en',
  htmlClass: '',
  bodyClass: '',
  pageClass: '',
  layoutTopClass: '',
  layoutBottomClass: '',
  contentClass: '',
  sidebarClass: '',
  useLayoutTop: false,
  useLayoutBottom: false,
  useSidebarBefore: false,
  useSidebarAfter: false,
  useStyleguide: false,
  useHeading: true,
  isHomePage: false
}, pageConfig or {}) -%}

{%- set pageProps = merge({
  title: 'Project title',
  description: 'Project description',
  h1: 'Page Name'
}, pageProps or {}) -%}

<!doctype html>
<html lang="{{ pageConfig.htmlLang }}" {{ Helpers.setAttr('class', pageConfig.htmlClass) }}>
<head>
  {# Use this block for overriding all page head block #}
  {%- block head -%}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta
      http-equiv="X-UA-Compatible" content="ie=edge">

    {# Use this block for overriding head meta information #}
    {%- block meta -%}
      <title>{{ pageProps.title }}</title>
      <meta name="description" content="{{ pageProps.description }}">
    {%- endblock -%}

    <meta property="og:title" content="Unique page title - My Site">
    <meta property="og:description" content="Page description">
    <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
    <meta property="og:image:alt" content="Image description">
    <meta property="og:locale" content="en_GB">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.mywebsite.com/page">
    <meta name="twitter:card" content="summary_large_image">
    <link rel="canonical" href="https://www.mywebsite.com/page">

    {%- include 'templates/partials/favicon.njk' -%}
    <meta name="theme-color" content="#fff">
  {%- endblock -%}

  {#
  Head prepend section
  You can preprend some information or tags here
  #}
  {%- block headPrepend -%}{%- endblock -%}

  {#
  Head preconnect section
  Add all preconnections to this section.
  #}
  {%- block preconnect -%}{%- endblock -%}

  {#
  Head prefetch section
  Add all prefetch connections to this section.
  #}
  {%- block prefetch -%}{%- endblock -%}

  {#
  Head preload section
  Add all preload connections to this section.
  #}
  {%- block preload -%}
    {%- include 'templates/partials/head-preload.njk' -%}
  {%- endblock -%}

  {#
  Head scss section
  You can append or override scss connections here
  #}
  {%- block css -%}
    {%- include 'templates/partials/head-styles.njk' -%}
  {%- endblock -%}

  {#
  Head scripts section
  You can append or override js connections here
  #}
  {%- block headScripts -%}
    {%- include 'templates/partials/head-scripts.njk' -%}
  {%- endblock -%}

  {#
  Head append section
  You can append some information or tags to head block.
  #}
  {%- block headAppend -%}{%- endblock -%}
</head>
<body x-data {{ Helpers.setAttr('class', pageConfig.bodyClass) }}>
{# Use this section for overriding all page body block #}
{%- block page -%}
  {% from "components/important-info/important-info.njk" import ImportantInfo %}
  {% from "components/floating-info/floating-info.njk" import FloatingInfo %}

  <div class="page {{ pageConfig.pageClass }}">
    <div class="page__inner">
{#      {{ ImportantInfo() }}#}
      {{ FloatingInfo() }}
      <div
        class="page__header">
        {# Use this section for overriding page header block #}
        {%- block header -%}
          {%- from 'components/header/header.njk' import Header with context -%}

          {{ Header() }}
        {%- endblock -%}
      </div>
      <div class="page__main-wrapper">
        <main
          class="page__main" role="main" id="main">
          {# Use this section for overriding page main block #}
          {%- block main -%}
            {%- if not settings.isHomePage and pageConfig.useHeading -%}
              <div class="page__heading">
                {%- block heading -%}
                  {{ Heading({
                    title: pageProps.h1,
                    text: pageProps.text
                  }) }}
                {%- endblock -%}
              </div>
            {% endif %}
            {%- if pageConfig.useLayoutTop -%}
              <div class="page__layout-top {{ pageConfig.layoutTopClass }}">
                {%- block layoutTop -%}{%- endblock -%}
              </div>
            {%- endif -%}
            <div class="page__layout-content">
              {%- if pageConfig.useSidebarBefore -%}
                <aside class="sidebar page__sidebar {{ pageConfig.sidebarClass }}">
                  {# Use this section for overriding page sidebar block before content block in DOM #}
                  {%- block sidebarBefore -%}{%- endblock -%}
                </aside>
              {%- endif -%}

              <div
                class="content page__content {{ pageConfig.contentClass }}">
                {# Use this section for overriding page content block #}
                {%- block content -%}{%- endblock -%}
              </div>

              {%- if pageConfig.useSidebarAfter -%}
                <aside
                  class="sidebar page__sidebar {{ pageConfig.sidebarClass }}">
                  {# Use this section for overriding page sidebar block after content block in DOM #}
                  {%- block sidebarAfter -%}{%- endblock -%}
                </aside>
              {%- endif -%}
            </div>
            {%- if pageConfig.useLayoutBottom -%}
              <div class="page__layout-bottom {{ pageConfig.layoutBottomClass }}">
                {%- block layoutBottom -%}{%- endblock -%}
              </div>
            {%- endif -%}
          {%- endblock -%}
        </main>
      </div>
      <div
        class="page__footer">
        {%- block Popups -%}
          {{ UpButton() }}
        {%- endblock -%}
        {# Use this section for overriding page footer block #}
        {%- block footer -%}
          {%- from 'components/footer/footer.njk' import Footer with context -%}

          {{ Footer() }}
        {%- endblock -%}

        {# Use this section for modal insertion #}
        {%- block modal -%}{%- endblock -%}
      </div>
    </div>
  </div>
{%- endblock -%}

{# Use this section for overriding page script block #}
{%- block pageScripts -%}
  {%- include 'templates/partials/page-scripts.njk' -%}
{%- endblock -%}
</body>
</html>
