<!DOCTYPE html>
<html>
  <head>
    <title>Home Assistant</title>
    <%= renderTemplate("_header.html.template") %>
    <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#18bcf2" />
    <link
      rel="apple-touch-icon"
      href="/static/icons/favicon-apple-180x180.png"
    />
    <meta name="apple-itunes-app" content="app-id=1099568401" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Home Assistant">
    <meta name="msapplication-config" content="/static/icons/browserconfig.xml" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="application-name" content="Home Assistant">
    <meta name="referrer" content="same-origin" />
    <meta name="theme-color" content="{{ theme_color }}" />
    <meta name="color-scheme" content="dark light" />
    <%= renderTemplate("_style_base.html.template") %>
    <style>
      html {
        background-color: var(--primary-background-color, #fafafa);
        color: var(--primary-text-color, #212121);
        height: 100vh;
      }
      @media (prefers-color-scheme: dark) {
        html {
          background-color: var(--primary-background-color, #111111);
          color: var(--primary-text-color, #e1e1e1);
        }
      }
      #ha-launch-screen {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      #ha-launch-screen svg {
        width: 170px;
        flex-shrink: 0;
      }
      #ha-launch-screen .ha-launch-screen-spacer {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div id="ha-launch-screen">
      <div class="ha-launch-screen-spacer"></div>
      <svg
        viewBox="0 0 240 240"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M240 224.762C240 233.012 233.25 239.762 225 239.762H15C6.75 239.762 0 233.012 0 224.762V134.762C0 126.512 4.77 114.993 10.61 109.153L109.39 10.3725C115.22 4.5425 124.77 4.5425 130.6 10.3725L229.39 109.162C235.22 114.992 240 126.522 240 134.772V224.772V224.762Z"
          fill="#F2F4F9"
        />
        <path
          d="M229.39 109.153L130.61 10.3725C124.78 4.5425 115.23 4.5425 109.4 10.3725L10.61 109.153C4.78 114.983 0 126.512 0 134.762V224.762C0 233.012 6.75 239.762 15 239.762H107.27L66.64 199.132C64.55 199.852 62.32 200.262 60 200.262C48.7 200.262 39.5 191.062 39.5 179.762C39.5 168.462 48.7 159.262 60 159.262C71.3 159.262 80.5 168.462 80.5 179.762C80.5 182.092 80.09 184.322 79.37 186.412L111 218.042V102.162C104.2 98.8225 99.5 91.8425 99.5 83.7725C99.5 72.4725 108.7 63.2725 120 63.2725C131.3 63.2725 140.5 72.4725 140.5 83.7725C140.5 91.8425 135.8 98.8225 129 102.162V183.432L160.46 151.972C159.84 150.012 159.5 147.932 159.5 145.772C159.5 134.472 168.7 125.272 180 125.272C191.3 125.272 200.5 134.472 200.5 145.772C200.5 157.072 191.3 166.272 180 166.272C177.5 166.272 175.12 165.802 172.91 164.982L129 208.892V239.772H225C233.25 239.772 240 233.022 240 224.772V134.772C240 126.522 235.23 115.002 229.39 109.162V109.153Z"
          fill="#18BCF2"
        />
      </svg>
      <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
    </div>
    <home-assistant></home-assistant>
    <%= renderTemplate("_js_base.html.template") %>
    <%= renderTemplate("_preload_roboto.html.template") %>
    <script <% if (!useWDS) { %>crossorigin="use-credentials"<% } %>>
      // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
      if (!isS11_12) {
        <% for (const entry of latestEntryJS) { %>
          import("<%= entry %>");
        <% } %>
        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("<%= es5EntryJS[0] %>").then(function() {
                System.import("<%= es5EntryJS[1] %>");
              });
            }
          <% } else { %>
            <% for (const entry of es5EntryJS) { %>
              _ls("<%= entry %>", true);
            <% } %>
          <% } %>
        }
    </script>
    <script>
      if (!window.latestJS) {
        {%- for extra_script in extra_js_es5 -%}
        _ls("{{ extra_script }}");
        {%- endfor -%}
      }
    </script>
  </body>
</html>
