<!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" />
    <title>{{atom.doc.title or atom.doc.name}}</title>

    {% if atom.doc.features.css.options.extract===true %}
      <link rel="stylesheet" href="./index.css" />    
    {% endif %}

    {% if atom.doc.features.app.format==='iife' %}
      <script src="./index.js"></script>
    {% endif %}

  </head>
  <body style="height:100vh;margin:0;padding:0;background-color: #eeeeee;">
    <div id="container" style="height:100%;"></div>
    {% if atom.doc.features.app.export===true %}    
        {% if atom.doc.features.app.format==='esm' %}
            <script type="module">
                import { createApp } from "./index.js";
                const run = createApp({container: document.getElementById("container")});
                {% if atom.doc.features.app.props %}
                  const dispose=run({{ atom.doc.features.app.props | dump | safe }});
                {% else %}
                  const dispose=run();
                {% endif %}
            </script>
        {% endif %}
        
        {% if atom.doc.features.app.format==='iife' %}
            <script>
                const { createApp } = window['{{atom.doc.bundleName}}'];
                const run = createApp({container: document.getElementById("container")});
                {% if atom.doc.features.app.props %}
                  const dispose=run({{ atom.doc.features.app.props | dump | safe }});
                {% else %}
                  const dispose=run();
                {% endif %}
            </script>
        {% endif %}
    {% endif %}

    {% if atom.doc.features.workbox_enabled %}
      {% if atom.doc.features.rollup_output.app.workbox.enabled %}
        <!-- Service Worker Registration -->
        <script>
          if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
              navigator
                .serviceWorker
                .register('./sw.js', {scope: './'}) // Optionally add scope
                .then((registration) => {
                  console.log('Service Worker registered with scope:', registration.scope);
                })
                .catch((error) => {
                  console.log('Service Worker registration failed:', error);
                });
            });
          }
        </script>
      {% endif%}
    {% endif%}
  </body>
</html>