<!doctype html>
<!--[if IE 7]>         <html lang="en" class="no-js ie7 lte-ie9 lte-ie8 lte-ie7"> <![endif]-->
<!--[if IE 8]>         <html lang="en" class="no-js ie8 lte-ie9 lte-ie8">         <![endif]-->
<!--[if IE 9]>         <html lang="en" class="no-js ie9 lte-ie9">                 <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en" class="no-js">                         <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>{{#if meta.title}}{{meta.title}} – {{/if}}{{meta.project}}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="/assets/css/main{{#unless env.dev}}.min{{/unless}}.css">
	<link rel="stylesheet" href="/preview/assets/css/main{{#unless env.dev}}.min{{/unless}}.css">

	<script src="/assets/js/head{{#unless env.dev}}.min{{/unless}}.js"></script>

	{{#if env.dev}}
		<link rel="stylesheet" href="/preview/assets/css/dev.css">
		<script src="/preview/assets/js/dev.js"></script>
	{{/if}}
</head>
<body {{#if props.svgSprites}} data-svgsprites-options='{{props.svgSprites}}'{{/if}}>
	<div class="sg_wrapper sg_module">
		<h1 class="sg_title">
			<a href="/" class="sg_logo">{{meta.project}}</a>{{#if meta.title}} / {{meta.title}}{{/if}}
		</h1>

		{{#if variants}}
			<section class="sg_variants sg_inner_wrapper">
				<h2 class="sg_h2">Module Preview</h2>

				<div class="sg_tabs">
					{{#each variants}}
						<input type="radio" name="variants" class="tab_trigger" id="variants{{@index}}"{{#unless @index}} checked{{/unless}} aria-controls="panel{{@index}} panelDesc{{@index}}" />
					{{/each}}

					<div class="panels">
						{{#each variants}}
							<div class="tab_content" id="panel{{@index}}" aria-labelledby="tabLabel{{@index}}">
								<div class="sg_demo">
									{{{meta.demo}}}
								</div>
							</div>
						{{/each}}
					</div>

					<div class="labels" aria-hidden="true">
						{{#each variants}}
							<label for="variants{{@index}}" id="tabLabel{{@index}}">{{meta.title}}</label>
						{{/each}}
					</div>

					<div class="panels">
						{{#each variants}}
							<div class="tab_content" id="panelDesc{{@index}}" aria-labelledby="tabLabel{{@index}}">
								{{!-- "content" is a reserved word in Handlebars, therefore we need the "this" keyword here. --}}
								{{#if meta}}
									<div class="sg_variant_meta">
										{{#if meta.desc}}
											<p>{{meta.desc}}</p>
										{{/if}}
									</div>
								{{/if}}
{{! Indentation matters... }}
{{> "preview/partials/code"}}

							</div>
						{{/each}}
					</div>

				</div>
			</section>
		{{else}}
			<section class="sg_inner_wrapper">
				<h2 class="sg_h2">Module Preview</h2>

				{{#each variants}}
					<div class="sg_demo">
						{{#block "content"}}
							{{{meta.demo}}}
						{{/block}}
					</div>

{{! Indentation matters... }}
{{> "preview/partials/code"}}
				{{/each}}
			</section>
		{{/if}}

		{{#if meta.documentation}}
			<section class="sg_inner_wrapper">
				<h2 class="sg_h2">Documentation</h2>

				<div class="sg_documentation">
					{{{meta.documentation}}}
				</div>
			</section>
		{{/if}}

		{{#if meta.mocks}}
			<section class="sg_inner_wrapper">
				<h2 class="sg_h2">Data mocking</h2>

				{{#each meta.mocks}}
					{{#if description}}
						<h3 class="sg_h3">{{description}}</h3>
					{{/if}}

					<pre class="sg_code hljs">{{{data}}}</pre>
				{{/each}}
			</section>
		{{/if}}

		<script src="/assets/js/main{{#unless env.dev}}.min{{/unless}}.js"></script>

		{{#block "scripts"}}
		{{/block}}
	</div>
</body>
</html>
