<!doctype html>
<html lang="en-us" id="insta">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<link href="_stylemark/css/all.css" rel="stylesheet">
		<link rel="icon" href="{{favicon}}" type="image/x-icon">

		<!-- @todo Replace with custom icomoon/fontello bundle -->
		<script src="https://use.fontawesome.com/6dd56ad32d.js"></script>

		<title>{{name}}</title>

		{{#each options.theme.css}}
			<link rel="stylesheet" href="{{this}}">
		{{/each}}
	</head>
	<body class="overflow-x-off i-page theme-page">
		<div class="i-page__content theme-content">

			<div class="i-nav-select theme-mobile-nav">
				<form class="form">
					<select class="form-control form-control-lg theme-mobile-nav-select">
						<option disabled selected>Go to…</option>
						{{#each groups}}
							<optgroup label="{{key}}">
								{{#each docs}}
									<option value="{{slug}}">{{{name}}}</option>
								{{/each}}
							</optgroup>
						{{/each}}
					</select>
				</form>
			</div>

			{{#each groups}}
				<div id="category-{{slug}}" class="theme-content-category">
					{{#each docs}}
						{{{html}}}
					{{/each}}
				</div>
			{{/each}}
		</div>
		<div
			class="i-page__sidebar theme-sidebar"
			style="
				{{~#if sidebar.background~}}
					background: {{sidebar.background}};
				{{~/if~}}
				{{~#if sidebar.textColor~}}
					color: {{sidebar.textColor}};
				{{~/if~}}
			"
		>
			{{> sidebar}}
		</div>

		<script src="_stylemark/js/vendor/jquery-3.2.1.slim.min.js"></script>
		<script src="_stylemark/js/vendor/popper.min.js"></script>
		<script src="_stylemark/js/vendor/tether.min.js"></script>
		<script src="_stylemark/js/vendor/bootstrap.min.js"></script>
		<script src="_stylemark/js/vendor/iframeResizer.min.js"></script>
		<script src="_stylemark/js/vendor/lazyframe.min.js"></script>
		<script src="_stylemark/js/vendor/highlight.min.js"></script>
		<script src="_stylemark/js/vendor/clipboard.min.js"></script>
		<script src="_stylemark/js/vendor/in-view.min.js"></script>
		<script src="_stylemark/js/app.js"></script>

		{{#each options.theme.js}}
			<script src="{{this}}"></script>
		{{/each}}
	</body>
</html>
