<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/modelviewer.css">
    <link rel="stylesheet" href="/assets/fontawesome/css/all.css">
    <title>{{ title }}</title>
  </head>
  <body class="bg-gray-800">
    <model-viewer src="{{file if file else 'model.glb'}}"
    field-of-view="{{fieldofview if fieldofview else 'auto'}}"
    ar
    xr-environment
    camera-controls auto-rotate shadow-intensity=1>
      <div slot="ar-button" slot="exit-webxr-ar-button" id="ar-button-container">
        <button id="ar-button" title="View in Augmented Reality" class="blur">
          <i class="fa fa-solid fa-cube"></i>
        </button>
      </div>

      <div slot="exit-webxr-ar-button" id="ar-button-container">
        <button id="ar-button" title="Close Augmented Reality" class="blur">
          <i class="fa fa-solid fa-close"></i>
        </button>
      </div>

      <div id="model-info-container">
        <div id="model-info" class="blur">
          <h5>{{title}}</h5>
          <p>{{alt}}</p>
        </div>
      </div>

      {{content | safe}}
    </model-viewer>
    <script>
      self.ModelViewerElement = self.ModelViewerElement || {};
      self.ModelViewerElement.dracoDecoderLocation = '/assets/draco/';
    </script>
    <script type="module" src="/assets/model-viewer.min.js"></script>
  </body>
</html>
