<!DOCTYPE html>
<html class="MiyagiTheme--{{theme.mode}}" lang="{{componentLanguage}}" dir="{{componentTextDirection}}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,width=device-width">
    <title>Component</title>
    {{{jsFilesHead}}}
    {{#if dev}}
      <script src="{{projectName}}/js/socket.io.min.js" defer></script>
    {{/if}}
    <script src="{{projectName}}/js/axe.min.js" defer></script>
    {{#if accessibilityValidation}}
      <script src="{{projectName}}/js/iframe.axe.js" defer></script>
    {{/if}}
    {{#if standalone}}
      <script src="{{projectName}}/js/iframe{{#if isBuild}}.build{{/if}}.js" {{#if dev}} type="module"
        {{/if}}{{#if prod}} defer{{/if}}></script>
    {{/if}}
    {{{cssFiles}}}
    <link rel="stylesheet" href="{{projectName}}/css/iframe-background.css">
    <style>
      html {
        {{#if theme.light.content.colorBackground}}--Miyagi-color-Background: {{ theme.light.content.colorBackground }};{{/if}}
      }

      @media (prefers-color-scheme: dark) {
        html {
          {{#if theme.dark.content.colorBackground}}--Miyagi-color-Background: {{ theme.dark.content.colorBackground }};{{/if}}
        }
      }

      .MiyagiTheme--light {
        {{#if theme.light.content.colorBackground}}--Miyagi-color-Background: {{ theme.light.content.colorBackground }};{{/if}}
      }

      .MiyagiTheme--dark {
        {{#if theme.dark.content.colorBackground}}--Miyagi-color-Background: {{ theme.dark.content.colorBackground }};{{/if}}
      }
    </style>
    <style>
      {{{theme.css}}}
    </style>
    {{#if assets.css}}
     <link href="{{ assets.css }}" rel="stylesheet">
    {{/if}}
    {{#if assets.js}}
      <script src="{{ assets.js }}"></script>
    {{/if}}
    <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}}
      <div class="MiyagiContent">
        <p class="MiyagiError">{{error}}</p>
      </div>
    {{/if}}
    {{{jsFilesBody}}}
  </body>

</html>
