<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Web Maker</title>
		<link rel="shortcut icon" href="icon-128.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<link
			rel="manifest"
			href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json"
		/>
		<% if (cli.env.isProd) { %>
		<base href="/create/" />
		<% } else { %>
		<base href="/" />
		<% } %> <% if (cli.manifest.theme_color) { %>
		<meta name="theme-color" content="<%= cli.manifest.theme_color %>" />
		<% } %>

		<style>
			/* Critically acclaimed CSS */

			.saved-items-pane {
				position: fixed;
				right: 0;
				top: 0;
				bottom: 0;
				width: 450px;
				transform: translateX(100%);
			}

			.modal {
				visibility: hidden;
			}
		</style>

		<link
			rel="stylesheet"
			id="editorThemeLinkTag"
			href="./lib/codemirror/theme/monokai.css"
		/>

		<style id="fontStyleTemplate" type="template">
			@font-face {
				font-family: 'fontname';
				font-style: normal;
				font-weight: 400;
				src: url(fontname.ttf) format('truetype');
				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
					U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
			}
			.CodeMirror pre {
				font-family: 'fontname', monospace;
			}
		</style>
		<style type="text/css" id="fontStyleTag">
			@font-face {
				font-family: 'FiraCode';
				font-style: normal;
				font-weight: 400;
				src: url(FiraCode.ttf) format('truetype');
				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
					U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
			}

			.CodeMirror pre {
				font-family: 'FiraCode', monospace;
			}
		</style>
	</head>

	<body>
		<div id="root"></div>
		<div id="portal"></div>

		<%= cli.ssr %> <% if (cli.config.prerender === true) { %>
		<script type="__PREACT_CLI_DATA__">
			<%= encodeURI(JSON.stringify(cli.CLI_DATA)) %>
		</script>
		<% } %>
		<script type="module" src="<%= cli.entrypoints['bundle'] %>"></script>
		<script nomodule src="<%= cli.entrypoints['dom-polyfills'] %>"></script>
	</body>
</html>
