<!DOCTYPE html>
<html id="patternlab-html">
<head id="patternlab-head">
	<title id="title">Pattern Lab</title>
	<meta charset="UTF-8">
	
	<!-- never cache patterns -->
	<meta http-equiv="cache-control" content="max-age=0" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />
	<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
	<meta http-equiv="pragma" content="no-cache" />
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="styleguide/css/styleguide.css?{{ cacheBuster }}" media="all" />
	<link rel="stylesheet" href="styleguide/css/styleguide-specific.css?{{ cacheBuster }}" media="all" />
	<link rel="stylesheet" href="styleguide/css/vendor/typeahead.css?{{ cacheBuster }}" media="all" />
	<link rel="stylesheet" href="styleguide/css/vendor/prism.css?{{ cacheBuster }}" media="all" />
	
	<script src="styleguide/js/vendor/jquery.js"></script>
</head>
<body  id="patternlab-body">
	<!--Style Guide Header-->
	<header class="sg-header" role="banner">
		<a href="#sg-nav-container" class="sg-nav-toggle"><span class="icon-menu"></span>Menu</a>
		<div class="sg-nav-container" id="sg-nav-container">
			{{> patternNav }}
			{{> ishControls }}
		</div>
	</header>
	<!--End Style Guide Header-->
	
	<!-- Iframe -->
	<div id="sg-vp-wrap">
		<div id="sg-cover"></div>
		<div id="sg-gen-container">
			<iframe id="sg-viewport" sandbox="allow-same-origin allow-scripts"></iframe>
			<div id="sg-rightpull-container">
				<div id="sg-rightpull"></div>
			</div>
		</div>
	</div>
	<!--end iFrame-->
	
	<!-- the template for the code view slider -->
	<script type="text/html" id="code-template">
		<div id="sg-code-close" class="sg-view-close">
			<a href="#" id="sg-code-close-btn" class="sg-view-close-btn">Close</a>
		</div>
		<div id="sg-code-loader">
			<div class="spinner"></div>
			Loading pattern...
		</div>
		<div id="sg-code-patternstate" style="display: none;">
			<p>
				The state of the <span id="sg-code-patternstate-patternname" class="sg-code-patternname"></span> pattern is: <span id="sg-code-patternstate-fill"></span>
			</p>
		</div>
		<div id="sg-code-lineage" style="display: none;">
			<p>
				The <span id="sg-code-lineager-patternname" class="sg-code-patternname"></span> pattern contains the following patterns: <span id="sg-code-lineage-fill"></span>
			</p>
		</div>
		<div id="sg-code-lineager" style="display: none;">
			<p>
				The <span id="sg-code-lineager-patternname" class="sg-code-patternname"></span> pattern is included in the following patterns: <span id="sg-code-lineager-fill"></span>
			</p>
		</div>
		<div id="sg-code-markup">
			<ul id="sg-code-tabs">
				<li id="sg-code-title-html" class="sg-code-title-active">HTML</li>
				<li id="sg-code-title-mustache">Mustache</li>
				<li id="sg-code-title-css" style="display: none;">CSS</li>
			</ul>
			<div class="clear">
				<pre><code id="sg-code-fill"></code></pre>
			</div>
		</div>
	</script>
	
	<!-- the template for the annotations viewer slider -->
	<script type="text/html" id="annotations-template">
		<div id="sg-annotation-close" class="sg-view-close">
			<a href="#" id="sg-annotation-close-btn" class="sg-view-close-btn">Close</a>
		</div>
		<div id="sg-comments-container"></div>
	</script>
	
	<!-- Included JavaScript that makes everything work -->
	<script src="styleguide/js/vendor/prism.js?{{ cacheBuster }}"></script>
	<script src="styleguide/js/vendor/jwerty.js?{{ cacheBuster }}"></script>
	<script src="styleguide/js/vendor/classlist-polyfill.js?{{ cacheBuster}}"></script>
	<script src="styleguide/js/vendor/typeahead.bundle.min.js?{{ cacheBuster}}"></script>
	<script src="styleguide/js/data-saver.js?{{ cacheBuster }}"></script>
	{{> ipAddress }}
	{{> patternPaths }}
	{{> viewAllPaths }}
	<script src="styleguide/js/url-handler.js?{{ cacheBuster }}"></script>
	<script src="styleguide/js/qrcode-generator.js?{{ cacheBuster }}"></script>
	<script src="styleguide/js/styleguide.js?{{ cacheBuster }}"></script>
	<script src="styleguide/js/pattern-finder.js?{{ cacheBuster }}"></script>
	<script src="styleguide/js/annotations-viewer.js?{{ cacheBuster }}"></script>
	<script src="styleguide/js/code-viewer.js?{{ cacheBuster }}"></script>
	{{> websockets }}
	<script src="styleguide/js/synclisteners.js?{{ cacheBuster }}"></script>
</body>
</html>