<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title><%= htmlWebpackPlugin.options.title || 'Storybook'%></title>

    <% if (htmlWebpackPlugin.files.favicon) { %>
    <link rel="shortcut icon" href="<%= htmlWebpackPlugin.files.favicon%>" />
    <% } %>

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

    <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
    htmlWebpackPlugin.files.css.forEach(file => { %>
    <link href="<%= file %>" rel="stylesheet" />
    <% }); %>

    <style>
      #storybook-root[hidden],
      #storybook-docs[hidden] {
        display: none !important;
      }
    </style>
  </head>
  <body>
    <% if (typeof bodyHtmlSnippet !== 'undefined') { %> <%= bodyHtmlSnippet %> <% } %>

    <div id="storybook-root"></div>
    <div id="storybook-docs"></div>

    <% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
    <script>
      <% for (var varName in globals) { %>
          <% if (globals[varName] != undefined) { %>
            window['<%=varName%>'] = <%= JSON.stringify(globals[varName]) %>;
          <% } %>
      <% } %>
    </script>
    <% } %> <% htmlWebpackPlugin.files.js.forEach(file => { %>
    <script src="<%= file %>"></script>
    <% }); %>
  </body>
</html>
