<!DOCTYPE html>
<html>
  <head>
    <title>{{ title }}</title>
    <meta name="viewport" content="{{ viewport }}" />
    <link href="{{ favicon_url }}" rel="shortcut icon" />
    <style>
      @layer theme, base, quasar, nicegui, components, utilities, overrides, quasar_importants;
      @import url("{{ prefix | safe }}/_nicegui/{{version}}/static/fonts.css") layer(base);
      {% if prod_js %}
        @import url("{{ prefix | safe }}/_nicegui/{{version}}/static/quasar.unimportant.prod.css") layer(quasar);
        @import url("{{ prefix | safe }}/_nicegui/{{version}}/static/quasar.important.prod.css") layer(quasar_importants);
      {% else %}
        @import url("{{ prefix | safe }}/_nicegui/{{version}}/static/quasar.unimportant.css") layer(quasar);
        @import url("{{ prefix | safe }}/_nicegui/{{version}}/static/quasar.important.css") layer(quasar_importants);
      {% endif %}
      @import url("{{ prefix | safe }}/_nicegui/{{version}}/static/nicegui.css") layer(nicegui);
      @layer quasar {
        blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
          margin: revert-layer; /* HACK: revert Quasar's margin styles */
        }
      }
      @layer overrides {
        {{ headwind_css | safe }}
        .column.inline, .flex.inline, .row.inline {
          display: inline-flex;  /* HACK: re-apply Quasar's inline styles to override Tailwind */
        }
        .nicegui-dialog-open,
        .nicegui-select-popup-open {
          scroll-behavior: auto !important; /* HACK: avoid smooth-scrolling when dialogs or select popups close */
        }
      }
    </style>
    <script type="importmap">
      {"imports": {{ imports | safe }}}
    </script>
    <script>
      addStyle = (c) => document.head.append(Object.assign(document.createElement("style"), { textContent: c }));
    </script>
    {{ head_html | safe }}
    <!-- prevent Prettier from removing this line -->
    {% for url in js_imports_urls %}
    <link rel="modulepreload" href="{{ url }}" />
    {% endfor %}
    <!-- prevent Prettier from removing this line -->
    {% if tailwind %}
    <style type="text/tailwindcss">
      @custom-variant dark (&:where(body.body--dark, body.body--dark *));
    </style>
    {% endif %}
  </head>
  <body>
    <script defer src="{{ prefix | safe }}/_nicegui/{{version}}/static/socket.io.min.js"></script>
    {% if tailwind %}
    <script defer src="{{ prefix | safe }}/_nicegui/{{version}}/static/tailwindcss.min.js"></script>
    {% endif %}
    <script type="module">
      import * as Vue from "vue";
      globalThis.Vue = Vue;
    </script>
    {% if prod_js %}
    <script defer src="{{ prefix | safe }}/_nicegui/{{version}}/static/quasar.umd.prod.js"></script>
    {% else %}
    <script defer src="{{ prefix | safe }}/_nicegui/{{version}}/static/quasar.umd.js"></script>
    {% endif %}
    <script defer src="{{ prefix | safe }}/_nicegui/{{version}}/static/nicegui.js"></script>

    <script defer src="{{ prefix | safe }}/_nicegui/{{version}}/static/lang/{{ language }}.umd.prod.js"></script>
    {{ body_html | safe }}

    <div id="app"></div>
    <div id="popup" class="nicegui-error-popup" aria-hidden="true">
      <span>{{ translations.connection_lost }}</span>
      <span>{{ translations.trying_to_reconnect }}</span>
    </div>
    <div id="too_long_message_popup" class="nicegui-error-popup" aria-hidden="true">
      <span>{{ translations.message_too_long }}</span>
      <span>{{ translations.message_too_long_body }}</span>
    </div>
    <script type="module">
      const app = createApp(parseElements(String.raw`{{ elements | safe }}`), {
        version: "{{ version }}",
        prefix: "{{ prefix | safe }}",
        query: {{ socket_io_js_query_params | safe }},
        extraHeaders: {{ socket_io_js_extra_headers | safe }},
        transports: {{ socket_io_js_transports | safe }},
      });
      const dark = {{ dark }};
      const language = "{{ language }}";
      const vue_config = {{ vue_config | safe }};
      {{ vue_config_script | safe }}

      {{ js_imports | safe }}
      {{ vue_scripts | safe }}

      app.mount("#app");
    </script>
  </body>
</html>
