<!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%;
      }
      div {
        width: 100%;
        height: 100%;
      }
      ox-board-viewer {
        width: 100%;
        height: 100%;
      }
    </style>

    <link href="/node_modules/@material-design-icons/font/index.css" rel="stylesheet" />

    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

    <script src="/node_modules/@hatiolab/things-scene/things-scene-min.js"></script>
    <script src="/scene-player.js"></script>
  </head>
  <body>
    <div id="scene"></div>

    <script>
      const model = <%- JSON.stringify(model) %>;
      const { boards, 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 type="module">
      const data = <%- JSON.stringify(data) %>;
      const id = <%- JSON.stringify(id) %>;

      const { ReferenceMap, create, error } = scene
      const provider = window.headlessSceneProvider
      const startSubscribingForAutoRefresh = window.startSubscribingForAutoRefresh

      const container = document.querySelector('#scene')
      const player = document.createElement('ox-board-player')
      player.provider = provider
      player.boards = boards
      data && (player.data = data)

      container.appendChild(player)

      startSubscribingForAutoRefresh(id, ({id, boards}) => {
        player.boards = boards
        data && (player.data = data)
      })
    </script>
  </body>
</html>
