<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-type" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title><%= title %></title>
    <script>
      var process = {
        env: {
          NODE_ENV: ''
        }
      }
      if (window.parent !== window) {
        try {
          window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
        } catch (error) {
          // The above line can throw if we do not have access to the parent frame -- i.e. cross origin
        }
      }
      <% if(!development) { %>
      if ('serviceWorker' in navigator) {
         navigator.serviceWorker.register('/service-worker.js')
      }
      <% } %>
    </script>
    <%= header %>
    <style>
      .loading-svg {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
        margin: auto;
        display: none;
      }
      
      .loading-rect {
        fill: none;
        stroke-width: 4px;
        stroke: #999;
        stroke-dasharray: 40;
        stroke-dashoffset: 50%;
      
        animation: movedash 1.5s forwards 0s infinite;
      }

      @keyframes movedash {
        to {
          stroke-dashoffset: 250%;
        }
      }
    </style>
  </head>

  <body>
    <div id="root">
      <svg width="40" height="40" viewbox="0 0 40 40" class="loading-svg">
        <polygon points="0 0 0 40 40 40 40 0" class="loading-rect" />
      </svg>  
    </div>
    <script>
      var mountNode = document.getElementById('root')
      setTimeout(()=>{
        var svg = document.querySelector('.loading-svg')
        if(svg) svg.style.display = 'block'
      },1000)
    </script>
    <%= footer %>
  </body>
</html>
