<!DOCTYPE html>
<html>
  <head>
    <link rel="preload" href="<%= latestCoreJS %>" as="script" crossorigin="use-credentials" />
    <link rel="preload" href="<%= latestAppJS %>" as="script" crossorigin="use-credentials" />
    <%= renderTemplate('_header') %>
    <title>Home Assistant</title>
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/static/icons/favicon-apple-180x180.png"
    />
    <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
    <meta name="apple-itunes-app" content="app-id=1099568401" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="msapplication-square70x70logo"
      content="/static/icons/tile-win-70x70.png"
    />
    <meta
      name="msapplication-square150x150logo"
      content="/static/icons/tile-win-150x150.png"
    />
    <meta
      name="msapplication-wide310x150logo"
      content="/static/icons/tile-win-310x150.png"
    />
    <meta
      name="msapplication-square310x310logo"
      content="/static/icons/tile-win-310x310.png"
    />
    <meta name="msapplication-TileColor" content="#03a9f4ff" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="referrer" content="same-origin" />
    <meta name="theme-color" content="#THEMEC" />
    <style>
      #ha-init-skeleton::before {
        display: block;
        content: "";
        height: 112px;
        background-color: #THEMEC;
      }
      html {
        background-color: var(--primary-background-color, #fafafa);
      }
    </style>
  </head>
  <body>
    <div id="ha-init-skeleton"></div>
    <home-assistant> </home-assistant>

    <%= renderTemplate('_js_base') %>
    <%= renderTemplate('_preload_roboto') %>

    <script>
      import("<%= latestCoreJS %>");
      import("<%= latestAppJS %>");
      window.customPanelJS = "<%= latestCustomPanelJS %>";
      window.latestJS = true;
    </script>
    <script>
    {% for extra_module in extra_modules -%}
    import("{{ extra_module }}");
    {% endfor -%}
    </script>

    <script>
        if (!window.latestJS) {
          window.customPanelJS = "<%= es5CustomPanelJS %>";

          <% if (useRollup) { %>
            _ls("/static/js/s.min.js").onload = function() {
              // Although core and app can load in any order, we need to
              // force loading core first because it contains polyfills
              return System.import("<%= es5CoreJS %>").then(function() {
                System.import("<%= es5AppJS %>");
              });
            }
          <% } else { %>
            _ls("<%= es5CoreJS %>");
            _ls("<%= es5AppJS %>");
          <% } %>
        }
    </script>
    <script>
      if (!window.latestJS) {
        {% for extra_script in extra_js_es5 -%}
        _ls("{{ extra_script }}");
        {% endfor -%}
      }
    </script>

    {% for extra_url in extra_urls -%}
    <link rel="import" href="{{ extra_url }}" async />
    {% endfor -%}
  </body>
</html>
