<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title><%= typeof title !== 'undefined'? title : 'Storybook'%></title>

    <link rel="shortcut icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <% if (typeof head !== 'undefined') { %> <%- head %> <% } %>

    <style>
      #storybook-root[hidden]{
        display: none !important;
      }
    </style>

    <% files.css.forEach(file => { %>
    <link href="<%= file %>" rel="stylesheet" />
    <% }); %>
  </head>
  <body>
    <div id="root"></div>

    <% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
    <script>
      <% for (var varName in globals) { %>
        <% if (globals[varName] !== undefined) { %>
          window['<%=varName%>'] = <%- (globals[varName]) %>;
        <% } %>
      <% } %>
    </script>
    <% } %>

    <script src="./sb-manager/runtime.mjs" type="module"></script>

    <% files.js.forEach(file => { %>
    <script src="<%= file %>" type="module"></script>
    <% }); %>
  </body>
</html>
