{% from 'debug/sse.html' import sse_style, sse_script,sse_html -%}


<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="{{ model.favicon_url }}" rel="shortcut icon" />
  <title>{{ model.title }}</title>

  {%- for link in model.css_links %}
  <link rel="stylesheet" href="{{ model.prefix | safe }}{{link}}" />
  {% endfor -%}

  {%- for style_tag in model.style_tags %}
  <style data-instaui-group-id="{{style_tag.group_id}}">{{style_tag.content}}</style>
  {% endfor -%}

  {{ sse_style(model.is_debug) }}
</head>

<body>
  {{ sse_html(model.is_debug) }}

  <div id="app">   
    <insta-ui :config="config" :meta="meta"></insta-ui>
  </div>

  <script type="importmap">
  {
  "imports":{{model.import_maps_string | safe}}
  }
  </script>

  {%- for info in model.js_links -%}
  <script src="{{ model.prefix | safe }}{{info.link}}"></script>
  {%- endfor -%}

  {%- for content in model.script_tags -%}
  <script>{{content}}</script>
  {%- endfor -%}

  {{ sse_script(model.is_debug) }}

  <script type="module">
    import { createApp } from 'vue'
    import {install as installInsta} from 'instaui'
    const True = true;
    const False = false;
    const None = undefined;

    const appConfig = {{model.config_dict | safe}};
    const meta = {mode: 'web',version:'{{model.version | safe}}',debug:{{model.is_debug}}}

    const app = createApp({
      setup() {
        return {
          config:appConfig,
          meta,
        }
      }
    })

    installInsta(app, appConfig)
    {% for info in model.vue_app_component -%}
    app.component('{{info.name | safe}}',(await import('{{info.url | safe }}')).default)
    {% endfor -%}
    {% for plugin_url in model.vue_app_use -%}
    app.use(await import('{{plugin_url | safe }}'))
    {% endfor -%}
    app.mount('#app')
  </script>
</body>
</html>