{{{or options.examples.doctypeTag "<!doctype html>"}}}
{{{or options.examples.htmlTag "<html>"}}}

	<head>
		<style>
			{{#each example.blocks}}
				{{#if (compare language "==" "css")}}
					{{{content}}}
				{{/if}}
			{{/each}}
		</style>

		<style>
			html, body {
				min-height: 0 !important;
				height: auto !important;
			}
		</style>

		<script>
			function findAndHandleStylemarkBlocks(languages, handler) {
				var blocks = getStylemarkBlocks(languages);
				handleStylemarkBlocks(blocks, handler);
			}

			function getStylemarkBlocks(languages) {
				languages = typeof languages === 'string' ? [languages] : languages;

				var selectors = [];

				for (var i = 0; i < languages.length; i++) {
					selectors.push('script[data-language="' + languages[i] + '"]');
				}

				var selector = selectors.join(',');
				var scripts = document.querySelectorAll(selector);
				var blocks = [];

				for (var i = 0, length = scripts.length; i < length; i++) {
					if (scripts[i].innerText) {
						blocks.push(scripts[i].innerText);
					}
				}

				return blocks;
			}

			function handleStylemarkBlocks(blocks, handler) {
				for (var i = 0, length = blocks.length; i < length; i++) {
					handler(blocks[i], i);
				}
			}
		</script>

		{{#each options.examples.css}}
			<link rel="stylesheet" href="{{this}}">
		{{/each}}
		{{#each options.examples.js}}
			<script src="{{this}}"></script>
		{{/each}}

		{{{options.examples.headHtml}}}
	</head>

	{{{or options.examples.bodyTag "<body>"}}}

		{{~#each example.blocks}}
			{{~#if (compare language "==" "html")}}
				{{~#if ../options.examples.bodyHtml}}
					{{{compile (replace ../options.examples.bodyHtml "{html}" "{{{content}}}") content}}}
				{{else}}
					{{{content}}}
				{{/if~}}
			{{/if~}}
			{{~#if (compare language "==" "angularjs")}}
				<main ng-controller="stylemark-{{doc.slug}}-{{example.name}}"></main>
			{{/if~}}
			{{~#if (compare language "==" "jsx")}}
				<main class="stylemark-react-root"></main>
			{{/if~}}
			{{~#if (or (compare language "==" "handlebars") (compare language "==" "hbs"))}}
				<main class="stylemark-ember-root"></main>
			{{/if~}}
		{{/each~}}

		{{#each example.blocks}}
			<script type="text/x-stylemark" data-language="{{language}}">{{{content}}}</script>
		{{/each}}

		<!--
			Vanilla JS
		-->

		<script>
			findAndHandleStylemarkBlocks('js', function(block) {
				eval(block);
			});
		</script>

		<!--
			AngularJS
		-->

		<script>
			(function(angular) {

				if (!angular) {
					return;
				}

				findAndHandleStylemarkBlocks('angularjs', function(block, index) {
					var moduleElem = document.querySelector('[ng-app]');
					var module;

					if (moduleElem) {
						// Uses an existing module
						module = angular.module(moduleElem.getAttribute('ng-app'));
					}
					else {
						// Creates a new module
						module = angular.module('stylemark-{{doc.slug}}-{{example.name}}', []);
					}

					module.controller('stylemark-{{doc.slug}}-{{example.name}}-' + index, function($scope) {
						$scope.$eval(block);
					});
				});
			})(window.angular);
		</script>

		<!--
			React / JSX
		-->

		<script>
			(function(ReactDOM) {

				if (!ReactDOM) {
					return;
				}

				findAndHandleStylemarkBlocks('jsx', function(block, index) {
					var rootNode = document.querySelectorAll('.stylemark-react-root')[index];
					var Component = eval(block);
					ReactDOM.render(Component, rootNode);
				});
			})(window.ReactDOM);
		</script>

		<!--
			Ember
		-->

		<script>
			(function(Ember) {

				if (!Ember) {
					return;
				}

				findAndHandleStylemarkBlocks(['handlebars', 'hbs'], function(block, index) {
					var render = function() {
						var app = window.{{or options.emberAppName 'noop'}}
						var container = app.__container__;
						var renderer = container.lookup('renderer:-dom');
						var template = Ember.HTMLBars.compile(block);

						var jsBlocks = getStylemarkBlocks('js');
						var jsBlock = jsBlocks && jsBlocks[0] ? jsBlocks[0] : '{}';
						var context;
						eval('context = ' + jsBlock);

						// Credit:
						// http://stackoverflow.com/questions/27950413/render-ember-js-hbs-template-to-a-string#answer-35625858
						var compile = function(container, template, context) {
							return new Ember.RSVP.Promise(function(resolve) {
								Ember.Component.extend(Ember.merge({
									style: 'display:none;',
									layout: template,
									container: container,
									renderer: renderer,

									init: function() {
										this._super.apply(this, arguments);
										Ember.setOwner(this, container);
									},

									didRender: function() {
										var elem = this.$();
										resolve(elem);
										this.destroy();
									}
								}, context))
									.create()
									.append();

							});
						};

						compile(container, template, context).then(function(elem) {
							var node = document.querySelectorAll('.stylemark-ember-root')[index];
							jQuery(node).append(elem);
						});
					};

					var isReady = function() {
						return window.{{or options.emberAppName 'noop'}}
							&& window.{{or options.emberAppName 'noop'}}.__container__;
					};

					var checkReady = function() {
						if (isReady()) {
							render();
						}
						else {
							setTimeout(checkReady, 20);
						}
					};

					checkReady();
				});

			})(window.Ember);
		</script>

		<script src="_stylemark/js/vendor/iframeResizer.contentWindow.min.js"></script>
	</body>
</html>
