<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

  <!-- Shared libraries between the application entry point and the components bundle -->
  <script type="importmap">
    {
      "imports": {
        "@wonderlandengine/api": "./node_modules/@wonderlandengine/api/index.js",
        "@wonderlandengine/api/decorators.js": "./node_modules/@wonderlandengine/api/index.js"
      }
    }
  </script>

  <head>
    {{ if settings.scripting.components.bundling != 'none' }}
    {{ if settings.scripting.components.output != '' }}
    <link rel="modulepreload" href="{{ settings.scripting.components.output }}?t={{timestamp}}" as="script">
    {{ end }}
    {{ end }}
    <link rel="modulepreload" href="{{ settings.scripting.application.output }}?t={{timestamp}}" as="script">
    <title>{{ settings.project.name }}</title>
    <meta charset="utf-8" />

    <meta property="og:title" content="{{ settings.project.name }}" />
    <meta property="og:type" content="{{ settings.project.type }}" />
    <meta property="og:description" content="{{ settings.project.description }}" />
    {{ if settings.project.coverImage != '' }}
    <meta property="og:image" content="{{ settings.project.coverImage }}" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    {{ end }}

    <meta name="twitter:description" content="{{ settings.project.description }}" />
    <meta name="twitter:title" content="{{ settings.project.name }}" />
    <meta name="twitter:card" content="summary_large_image" />
    {{ if settings.project.coverImage != '' }}
    <meta name="twitter:image" content="{{ settings.project.coverImage }}" />
    {{ end }}

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="{{ settings.runtime.xrButtonColor }}">
    <style>
    html {
        height: 100%;
    }
    body {
        height: 100%;
        margin: 0px;
        background-image: linear-gradient(black, #2b2b2b);
    }
    .xr-button-container {
      display: block;
      position: fixed;
      width: 100%;
      bottom: 0px;
      display: flex;
      justify-content: center;
      pointer-events: none;
    }

    .button {
      float: left;
      width: 0px; /* Hidden until we know supported state */
      padding-left: 10px;
      padding-bottom: 25px;
      display: block;
      pointer-events: all;
      cursor: pointer;
      opacity: 0.25;
    }
    .button[data-supported] {
      width: 100px !important;
      transition: 0.5s;
    }
    .button[data-supported='true'] {
      opacity: 1.0;
    }

    #canvas {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      touch-action: none;
    }

    .xr-button-label {
      fill: {{ settings.runtime.xrButtonColor }};
    }

    .xr-button-frame {
      stroke: {{ settings.runtime.xrButtonColor }};
    }

    #version {
      text-align: right;
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: white;
      font-size: 18pt;
      font-family: monospace;
      /*display: none; */
      z-index: 99999;
    }

    #version a {
      transition: opacity 0.5s;
      opacity: 0;
    }

    #version:hover a{
      opacity: 1;
    }

    </style>

    {{ if settings.runtime.pwa.enable }}
    <link rel="manifest" href="manifest.json">
    <link rel="apple-touch-icon" href="homescreen192.png">

    <script>
        if('serviceWorker' in navigator) {
            navigator.serviceWorker.register('service-worker.js')
                .then(reg => console.log('Service worker registered!', reg))
                .catch(err => console.log('Unable to register service worker!', err));
        }
    </script>
    {{ end }}

    <script type="module" src="{{ settings.scripting.application.output }}?t={{timestamp}}"></script>

    {{ if settings.runtime.googleAnalytics != '' }}
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ settings.runtime.googleAnalytics }}"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', '{{ settings.runtime.googleAnalytics }}');
      {{ if settings.runtime.googleAnalyticsSecondary != '' }}gtag('config', '{{ settings.runtime.googleAnalyticsSecondary }}');{{ end }}
    </script>
    {{ end }}
  </head>
  <body>
    <canvas id="canvas" style="width: 100%; height: 100%; display: block;" tabindex="0"></canvas>
    <div id="version">
        <a>Wonderland Engine {{ version }}</a>
    </div>
    <div class="xr-button-container">
      {{ if settings.xr.vr.enable }}<a id="vr-button" class="button">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.41 65"><rect class="xr-button-frame" x="3.5" y="3.5" width="102.41" height="58" rx="16.68" style="fill:none;stroke-linejoin:round;stroke-width:7px"/><path class="xr-button-label" d="M36.24,48.84a2,2,0,0,1-1.78-1.15L23.39,17.46a1.84,1.84,0,0,1,1.78-1.84h5.45a1.8,1.8,0,0,1,1.66,1.21l7.29,20.42,7.28-20.42a1.8,1.8,0,0,1,1.67-1.21H54a1.84,1.84,0,0,1,1.78,1.84L44.67,47.69a2,2,0,0,1-1.78,1.15Z"/><path class="xr-button-label" d="M70.61,40H68v7a1.84,1.84,0,0,1-1.78,1.84H61.31A1.83,1.83,0,0,1,59.54,47V17.46a1.83,1.83,0,0,1,1.77-1.84H73s13,.12,13,12.22c0,6-3.21,9-6.42,10.5L86.38,47a1.76,1.76,0,0,1-1.77,1.84h-5.8a1.91,1.91,0,0,1-1.43-.69ZM68,32.09h5c2.24,0,4.08-1.15,4.08-4.25s-1.84-4.36-4.08-4.36H68Z"/></svg>
      </a>{{ end }}
      {{ if settings.xr.ar.enable }}<a id="ar-button" class="button">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.41 65"><path class="xr-button-label" d="M42.89,15.62a2,2,0,0,1,1.78,1.15L55.75,47A1.84,1.84,0,0,1,54,48.84H48.52a1.81,1.81,0,0,1-1.67-1.2l-1.49-4.19H33.77l-1.49,4.19a1.8,1.8,0,0,1-1.66,1.2H25.17A1.83,1.83,0,0,1,23.39,47L34.46,16.77a2,2,0,0,1,1.78-1.15Zm-6.31,20h6l-3-8.38Z"/><path class="xr-button-label" d="M70.61,40H68V47a1.84,1.84,0,0,1-1.78,1.83H61.31A1.83,1.83,0,0,1,59.54,47V17.46a1.83,1.83,0,0,1,1.77-1.84H73s13,.12,13,12.22c0,6-3.21,9-6.42,10.5L86.38,47a1.76,1.76,0,0,1-1.77,1.83h-5.8a1.91,1.91,0,0,1-1.43-.69ZM68,32.09h5c2.24,0,4.08-1.15,4.08-4.25s-1.84-4.36-4.08-4.36H68Z"/><rect class="xr-button-frame" x="3.5" y="3.5" width="102.41" height="58" rx="16.68" style="fill:none;stroke-linejoin:round;stroke-width:7px"/></svg>
      </a>{{ end }}
    </div>
  </body>
</html>
