<!DOCTYPE html>
<html lang="en-US" class="kui <%= htmlWebpackPlugin.options.style.htmlCss.join(" ") %>" data-zoom="1">
  <head>
    <meta charset="UTF-8" />
    <title><%= htmlWebpackPlugin.options.name.productTitle %></title>

    <!-- css overrides go here -->
    <%= htmlWebpackPlugin.tags.headTags.map(_ => { _.attributes.nonce="kuiDefaultNonce"; return _ }).join('\n') %>

    <link rel="shortcut icon" href="<%= htmlWebpackPlugin.options.client.imageHome %><%= htmlWebpackPlugin.options.icons.favicon %>" />

    <meta http-equiv="Content-Security-Policy" content="<%= htmlWebpackPlugin.options.client.contentSecurityPolicy %>" />

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- opengraph properties -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="<%= htmlWebpackPlugin.options.opengraph.ogUrl %>" />
    <meta property="og:site_name" content="<%= htmlWebpackPlugin.options.opengraph.ogSiteName %>" />
    <meta property="og:title" content="<%= htmlWebpackPlugin.options.opengraph.ogTitle %>" />
    <meta property="og:description" content="<%= htmlWebpackPlugin.options.opengraph.ogDescription %>" />
    <meta property="og:image" content="<%= htmlWebpackPlugin.options.opengraph.ogImage %>" />

    <!-- twitter card properties -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="<%= htmlWebpackPlugin.options.opengraph.ogUrl %>" />
    <meta name="twitter:description" content="<%= htmlWebpackPlugin.options.opengraph.ogDescription %>" />
    <meta name="twitter:image" content="<%= htmlWebpackPlugin.options.opengraph.ogImage %>" />
    <meta name="twitter:label1" value="<%= htmlWebpackPlugin.options.opengraph.ogLabel1 %>" />
    <meta name="twitter:data1" value="<%= htmlWebpackPlugin.options.opengraph.ogData1 %>" />
    <meta name="twitter:label2" value="<%= htmlWebpackPlugin.options.opengraph.ogLabel2 %>" />
    <meta name="twitter:data2" value="<%= htmlWebpackPlugin.options.opengraph.ogData2 %>" />


    <script nonce="kuiDefaultNonce">
      window['_kuiNonce'] = 'kuiDefaultNonce'
      window['_kuiWebpackHash'] = '${hash}'
      window['_kuiWebpackResourceRoot'] = '${resourceRoot}'
    </script>
  </head>

  <body class="still-loading <%= htmlWebpackPlugin.options.style.bodyCss.join(" ") %>">
    <div class="page">
      <main class="main">
        <!-- client content will be placed here by boot.ts -->
      </main>

      <textarea
        id="invisible-global-input"
        class="not-tabbable"
        tabIndex="-1"
        autoComplete="off"
        autoCorrect="off"
        autoCapitalize="off"
        spellCheck="false"
        style="position: absolute; left: -1000px; top: -1000px;"
      ></textarea>

      <div id="restart-needed-warning" style="display: none">
        <svg
          focusable="false"
          preserveAspectRatio="xMidYMid meet"
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
          aria-hidden="true"
        >
          <path d="M12 1C5.9 1 1 5.9 1 12s4.9 11 11 11 11-4.9 11-11S18.1 1 12 1zm4.3 16.5L6.5 7.7l1.2-1.2 9.8 9.8-1.2 1.2z"></path>
          <path d="M16.3 17.5L6.5 7.7l1.2-1.2 9.8 9.8-1.2 1.2z" data-icon-path="inner-path" opacity="0"></path>
        </svg>
        <div class="restart-needed-warning-content">A severe error occurred during launch</div>
      </div>
  </body>

  <%= htmlWebpackPlugin.tags.bodyTags.map(_ => { _.attributes.nonce="kuiDefaultNonce"; return _ }).join('') %>
</html>
