<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/assets/favicon.ico" />
    <base href="<%= base ? base : '' %>" />

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      #scene {
        width: 100%;
        height: 100%;
      }
    </style>

    <link href="/node_modules/@material-design-icons/font/index.css" rel="stylesheet" />
  </head>
  <body>
    <div id="scene"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    <script>
      const model = <%- JSON.stringify(model) %>;
      const { fontStyles, fonts } = model

      if(fontStyles){
        let style = document.head.querySelector('#custom-fonts')
        if (!style) {
          style = document.createElement('style')
          style.id = 'custom-fonts'
          document.head.appendChild(style)
        }
        style.innerHTML = model.fontStyles
      }

      if(fonts) {
        WebFont.load({
          ...model.fonts,
          fontactive: () => {
            window.dispatchEvent(new CustomEvent('resize'))
          }
        })
      }
    </script>
    <script src="/node_modules/@hatiolab/things-scene/things-scene-min.js"></script>
    <script src="/headless-scene-components.js"></script>

    <script>
      const data = <%- JSON.stringify(data) %>;

      const el = document.getElementById('scene')
      const s = scene.create({
        model,
        mode: 0,
        refProvider: null //self.provider
      })
      s.target = el
      s.data = data

      function resize() {
        s.fit('ratio')
      }

      resize()

      addEventListener(
        'resize',
        function () {
          if (requestAnimationFrame) {
            requestAnimationFrame(resize)
          } else {
            setTimeout(resize, 66)
          }
        },
        false
      )
    </script>
  </body>
</html>
