{#
/**
 * @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):
 * - messages: Status and error messages. Should be displayed prominently.
 * - 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:
 * - 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.highlighted: Items for the highlighted content region.
 * - page.help: Dynamic help text, mostly for admin pages.
 * - page.content: The main content of the current page.
 * - page.sidebar_first: Items for the first sidebar.
 * - page.sidebar_second: Items for the second sidebar.
 * - page.footer: Items for the footer region.
 * - page.breadcrumb: Items for the breadcrumb region.
 *
 * - is_landing_page: Flag of landing page.
 * - landing_background_video: The file field value of the background video.
 * - is_site_page: Flag of site landing page.
 * - site_color: Site landing page color.
 * - other_sites: Other sites if it's a site page:
 *   - name: The name of the site.
 *   - description: The site description.
 *   - color: The site color.
 *   - path: The path of the site.
 *   - image: The image field value of the photo plus the 'uri' and 'url'.
 * - is_map_page: Flag of map page.
 *
 * @see template_preprocess_page()
 * @see html.html.twig
 */
#}
<!-- Site header -->
{% set headerClass = 'site-header' %}
{% if is_site_page and site_color %}
  {% set headerClass = headerClass ~ ' background-' ~ site_color %}
{% elseif is_landing_page %}
  {% set headerClass = 'site-home-banner' %}
{% elseif is_map_page %}
  {% set headerClass = headerClass ~ ' bottom-shadow' %}
{% endif %}

<header class="{{ headerClass }}">
  {% if is_landing_page %}
    <div class="site-home-header">
  {% endif %}
  {{ page.header }}
  {% if is_landing_page %}
    </div>
  {% endif %}

  {% if is_landing_page %}
    {% if landing_background_video %}
      <div class="site-home-video-background">
        <video autoplay muted loop playsinline>
          <source src="{{ landing_background_video['url'] }}" type="{{ landing_background_video['mime'] }}">
        </video>
      </div>
    {% endif %}

    <div class="site-home-down-icon">
      <svg class="arrows" preserveAspectRatio="none" viewBox="0 0 60 74">
        <path class="a1" d="M0 0 L30 32 L60 0"></path>
        <path class="a2" d="M0 20 L30 52 L60 20"></path>
        <path class="a3" d="M0 40 L30 72 L60 40"></path>
      </svg>
    </div>
  {% endif %}
</header>
<!-- End of site header -->

<!-- Main content -->
{% set mainClass = '' %}
{% if is_site_page %}
  {% set mainClass = mainClass ~ 'home pt-2-responsive' %}
{% elseif is_landing_page or is_map_page %}
  {% set mainClass = 'home' %}
{% endif %}
{% if site_color %}
  {% set mainClass = mainClass ~ ' light-text background-' ~ site_color %}
{% endif %}
<main role="main"{% if mainClass %} class="{{ mainClass }}"{% endif %}>
  <a id="main-content" tabindex="-1"></a>
  {{ page.content }}
</main>
<!-- End of main content -->

{% if other_sites %}
  {% import '@siteandspace/misc/macros.twig' as commonMacros %}
  <section>
    <!-- Site list block -->
    <div class="content-list">
      <div class="container">
        <div class="row">
          <div class="column">
            <div class="title">
              <h2>Other Sites</h2>
            </div>
            <div class="content">
              {% for site in other_sites %}
                {{ commonMacros.site_block(site) }}
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End of site list block -->
  </section>
{% endif %}

<!-- Site footer -->
{% if not is_map_page %}
  <footer>
    <div class="container footer-content">
      <div class="row">

        <!-- Footer left -->
        <div class="one-half column footnote">
          {{ page.footer_left }}
        </div>
        <!-- End of footer left -->

        <!-- Footer right -->
        <div class="one-half column footnote-sm">
          {{ page.footer_right }}
        </div>
        <!-- End of footer right -->

      </div>
    </div>
  </footer>

  <footer role="contentinfo" style="background-color: #EFECE7;">
    <div class="row" style="margin-right:2%">
        <div class="site-logo" style="position: relative; float:right">
            <a class="footer-head__brand" href="https://systemiksolutions.com/" style="position: relative; display:inline-block;">
              <img class="img-fluid" src= '{{ theme_path }}/assets/systemik-ack.png' style="height:4rem">
              <div class="hoverPoint" style="top:63%;left:28%; position:absolute; width:17%; height:25%; cursor:pointer" data-content="Isobel Andrews"></div>
              <div class="hoverPoint" style="top:63%;left:47%; position:absolute; width:32%; height:25%; cursor:pointer" data-content="Yang Li"></div>
              <div class="hoverPoint" style="top:63%;left:80%; position:absolute; width:21%; height:25%; cursor:pointer" data-content="Ian McCrabb"></div>
              <div id="systemik-ack" class="function-text" style="position:absolute; background:#fff ; padding:4px; display:none; white-space:nowrap"></div>
            </a>
        </div>
      </div>
  </footer>
{% endif %}
<!-- End of site footer -->