<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Home Assistant</title>

    <link rel='manifest' href='/manifest.json'>
    <link rel='icon' href='/static/icons/favicon.ico'>
    <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="#3fbbf4">
    <link rel='preload' href='/frontend_es5/core-34d8759e684f7b9491217300cc2eb8da.js' as='script'/>
    <link rel='preload' href='/static/fonts/roboto/Roboto-Regular.ttf' as='font' crossorigin />
    <link rel='preload' href='/static/fonts/roboto/Roboto-Medium.ttf' as='font' crossorigin />
    <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="#3fbbf4ff"/>
    <meta name='mobile-web-app-capable' content='yes'>
    <meta name='viewport' content='width=device-width, user-scalable=no'>
    <meta name='theme-color' content='{{ theme_color }}'>
    <style>
      body {
        font-family: 'Roboto', 'Noto', sans-serif;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        margin: 0;
        padding: 0;
      }

      #ha-init-skeleton::before {
        display: block;
        content: "";
        height: 48px;
        background-color: {{ theme_color }};
      }

      #ha-init-skeleton .message {
        transition: font-size 2s;
        font-size: 0;
        padding: 24px;
      }

      #ha-init-skeleton.error .message {
        font-size: 16px;
      }

      #ha-init-skeleton a {
        color: {{ theme_color }};
        text-decoration: none;
        font-weight: bold;
      }
    </style>
    <script>
      function initError() {
        document.getElementById('ha-init-skeleton').classList.add('error');
      };
      window.noAuth = {{ no_auth }};
      window.Polymer = {
        lazyRegister: true,
        useNativeCSSProperties: true,
        dom: 'shadow',
        suppressTemplateNotifications: true,
        suppressBindingNotifications: true,
      };
    </script>
  </head>
  <body>
    <div id='ha-init-skeleton'>
      <div class='message'>
        Home Assistant had trouble<br>connecting to the server.<br><br>
        <a href='/'>TRY AGAIN</a>
      </div>
    </div>
    <home-assistant></home-assistant>
    {# <script src='/home-assistant-polymer/build/_demo_data_compiled.js'></script> -#}
    {% if not latest -%}
    <script>
      var compatibilityRequired = (typeof Object.assign != 'function');
      if (compatibilityRequired) {
        var e = document.createElement('script');
        e.onerror = initError;
        e.src = '/static/compatibility-1686167ff210e001f063f5c606b2e74b.js';
        document.head.appendChild(e);
      }
    </script>
    {% endif -%}
    <script src='/frontend_es5/core-34d8759e684f7b9491217300cc2eb8da.js'></script>
    {% if not dev_mode and not latest -%}
    <script src='/frontend_es5/custom-elements-es5-adapter.js'></script>
    {% endif -%}
    <script>
      var webComponentsSupported = (
        'customElements' in window &&
        'import' in document.createElement('link') &&
        'content' in document.createElement('template'));
      if (!webComponentsSupported) {
        var e = document.createElement('script');
        e.onerror = initError;
        e.src = '/static/webcomponents-lite.js';
        document.head.appendChild(e);
      }
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
          navigator.serviceWorker.register('/service_worker_es5.js');
        });
      }
    </script>
    <link rel='import' href='/frontend_es5/frontend-3b391d204559cd0bf2693561430f4b8f.html' onerror='initError()'>
    {% if panel_url -%}
      <link rel='import' href='{{ panel_url }}' onerror='initError()' async>
    {% endif -%}
    <link rel='import' href='/static/mdi-8c107b08124402dcc497779c4db37b3e.html' async>
    {% for extra_url in extra_urls -%}
      <link rel='import' href='{{ extra_url }}' async>
    {% endfor -%}
  </body>
</html>
