<!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/home-assistant-icon.svg" color="#3fbbf4">
    <link rel='preload' href='{{ core_url }}' as='script'/>
    {% for panel in panels.values() -%}
      <link rel='prefetch' href='{{ panel.url }}'>
    {% endfor -%}
    <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='#03a9f4'>
    <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: #03A9F4;
      }

      #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: #03A9F4;
        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: 'shady',
        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 icons='{{ icons }}'></home-assistant>
    {# <script src='/static/home-assistant-polymer/build/_demo_data_compiled.js'></script> #}
    <script>
      var compatibilityRequired = (
        typeof Object.assign != 'function');
      if (compatibilityRequired) {
        var e = document.createElement('script');
        e.onerror = initError;
        e.src = '{{ compatibility_url }}';
        document.head.appendChild(e);
      }
    </script>
    <script src='{{ core_url }}'></script>
    <link rel='import' href='{{ ui_url }}' onerror='initError()'>
    {% if panel_url -%}
      <link rel='import' href='{{ panel_url }}' onerror='initError()' async>
    {% endif -%}
    <link rel='import' href='{{ icons_url }}' async>
    <script>
      var webComponentsSupported = (
        'registerElement' in document &&
        'import' in document.createElement('link') &&
        'content' in document.createElement('template'));
      if (!webComponentsSupported) {
        var e = document.createElement('script');
        e.async = true;
        e.onerror = initError;
        e.src = '/static/webcomponents-lite.min.js';
        document.head.appendChild(e);
      }
    </script>
  </body>
</html>
