<!DOCTYPE html>
<html lang="en">
<head>
  <base href="{{ basePath }}" />
  {{ metadata|raw }}
  <!-- Start Single Page Apps for GitHub Pages -->
  <script>
    // Single Page Apps for GitHub Pages
    // https://github.com/rafrex/spa-github-pages
    // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
    // ----------------------------------------------------------------------
    // This script checks to see if a redirect is present in the query string
    // and converts it back into the correct url and adds it to the
    // browser's history using window.history.replaceState(...),
    // which won't cause the browser to attempt to load the new url.
    // When the single page app is loaded further down in this file,
    // the correct url will be waiting in the browser's history for
    // the single page app to route accordingly.
    (function (l) {
      if (l.search) {
        var q = {};
        l.search.slice(1).split('&').forEach(function (v) {
          var a = v.split('=');
          q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
        });
        if (q.p !== undefined) {
          window.history.replaceState(null, null,
            l.pathname.slice(0, -1) + (q.p || '') +
            (q.q ? ('?' + q.q) : '') +
            l.hash
          );
        }
      }
    }(window.location))
  </script>
  <!-- End Single Page Apps for GitHub Pages -->
  {{ serviceWorkerScript|raw }}
  <style>
    body {
      margin: 0;
      min-height: 98vh;
    }
    .use-modern-browser a {
      font-size: 22px;
    }
    .use-modern-browser {
      font-size: 22px;
      text-align: center;
      width: 100%;
    }
  </style>
  <style id="loadingstyles">
    haxcms-site-builder {
      display: block;
    }
    body[no-js] haxcms-site-builder {
      display: none !important;
    }
    #loading {
      background-color: white;
      bottom: 0px;
      left: 0px;
      opacity: 1;
      position: absolute;
      right: 0px;
      top: 0px;
      transition: all linear 300ms;
      -webkit-transition: all linear 300ms;
      z-index: 99999999;
    }

    #loading.loaded {
      animation: fade-out .7s ease-in-out;
      animation-fill-mode: forwards;
    }
    #loading div.messaging {
      color: rgba(255,255,255, 0.7);
      font-family: Roboto;
      left: 0px;
      margin-top: -75px;
      position: absolute;
      right: 0px;
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
    }
    #loading div.messaging h1 {
      color: white;
      font-family: 'Open Sans', 'arial', 'serif';
      font-size: 40px;
      background-color: orange;
      transition: .4s ease-in-out all;
    }
    #loading img {
      transition: .4s all ease-in-out;
      width: 300px;
      height: 300px;
      margin-bottom: 50px;
      border-radius: 50%;
      border: 8px solid orange;
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.45);
      -moz-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.45);
	    -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.45);
      -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
    }
    .progress-line,
    .progress-line:before {
      height: 8px;
      width: 100%;
      margin: auto;
    }
    .progress-line {
      background-color: rgba(0,0,0, 0.05);
      display: -webkit-flex;
      display: flex;
      width: 300px;
    }
    .progress-line:before {
      background-color: orange;
      content: '';
      animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    @keyframes running-progress {
      0% {
        margin-left: 0px;
        margin-right: 100%;
      }
      50% {
        margin-left: 25%;
        margin-right: 0%;
      }
      100% {
        margin-left: 100%;
        margin-right: 0;
      }
    }
    @keyframes fade-out {
      0% {
        opacity: 1;
      }
      99% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
    </style>
    <script id="loadingscript">
    window.addEventListener('haxcms-ready', function(e) {
      // give the web components a second to build
      setTimeout(function() {
        document.querySelector('#loading').classList.add('loaded');
        setTimeout(function() {
          document.querySelector('#loading').parentNode.removeChild(document.querySelector('#loading'));
          document.querySelector('#loadingstyles').parentNode.removeChild(document.querySelector('#loadingstyles'));
          document.querySelector('#loadingscript').parentNode.removeChild(document.querySelector('#loadingscript'));
        }, 300);
      }, 100)
    });
  </script>
</head>
<body {{ bodyAttrs|raw }}>
  <div id="loading">
    <div class="messaging">
      <img src="{{ logo256x256 }}" alt="" loading="lazy" height="300px" width="300px" />
      <div class="progress-line"></div>
      <h1>Loading {{ title }}</h1>
    </div>
  </div>
  <haxcms-site-builder id="site" file="site.json"></haxcms-site-builder>
  <script>
    window.HAXCMSContext="published";
    window.__appCDN="https://{{ cdn }}/";
  </script>
  <script src="https://{{ cdn }}/build-haxcms.js"></script>
  <script src="https://{{ cdn }}/build.js"></script>
</body>
</html>