<!DOCTYPE html>
<html class="theme-{{ userUiConfig.theme }}" lang="{{ componentLanguage }}" dir="{{ userUiConfig.componentTextDirection }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,width=device-width">
    <title>Component</title>
		{% for file in jsFilesHead %}
			{% set type_str = file.type ? ' type="' ~ file.type ~ '"' : "" %}
			{% set defer_str = file.defer ? "defer" : "" %}
			{% set async_str = file.async ? "async" : "" %}
			<script src="{{ file.src }}"{{ type_str ~ defer_str ~ async_str }}></script>
		{% endfor %}
    <script src="{{ projectName }}/js/iframe{% if isBuild %}.build{% endif %}.js" {% if miyagiDev %} type="module"
        {% endif %}{% if prod %} defer{% endif %}></script>
		{% for file in cssFiles %}
			<link rel="stylesheet" href="{{ file }}">
		{% endfor %}
    <style>
      {{ theme.css }}
    </style>
    {% if assets.css %}
     <link href="{{ assets.css }}" rel="stylesheet">
    {% endif %}
    {% if assets.js %}
      <script src="{{ assets.js }}"></script>
    {% endif %}
    <script>
      {{ theme.js }}

      function sendHeightToParent() {
        window.parent.postMessage({
          id: window.frameElement.parentNode.id,
          height: document.body.offsetHeight
        }, "*");
      }

      if (window.frameElement) {
        document.addEventListener("DOMContentLoaded", sendHeightToParent);
        window.addEventListener("load", sendHeightToParent);
      }
    </script>
  </head>

  <body>
    {{ html }}
    {% if error %}
      <p class="Error">{{ error }}</p>
    {% endif %}
    {% for file in jsFilesBody %}
			{% set type_str = file.type ? ' type="' ~ file.type ~ '"' : "" %}
			{% set defer_str = file.defer ? "defer" : "" %}
			{% set async_str = file.async ? "async" : "" %}
			<script src="{{ file.src }}"{{ type_str ~ defer_str ~ async_str }}></script>
		{% endfor %}
  </body>

</html>
