<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
	<meta charset="utf-8" />
	<title>Fuel UX 3</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link href="../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
	<link href="{{#if isReference}}../reference/dist/css/fuelux.css{{else}}../dist/css/fuelux.css{{/if}}" rel="stylesheet" type="text/css">

	<script src="../bower_components/requirejs/require.js"></script>

	<style>
		form { margin: 50px; }
	</style>
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li class="dropdown">
						<a href="#" class="dropdown-toggle navbar-brand" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Visual Tests <span class="caret"></span></a>
						<ul class="dropdown-menu">
							{{#each components}}
								<li><a href="/component/{{this}}">{{this}}</a></li>
							{{/each}}
						</ul>
					</li>
				</ul>
			</div><!-- /.navbar-collapse -->
		</div><!-- /.container-fluid -->
	</nav>
	<script type="text/javascript">
		(function () {
			requirejs.config({
				config: {
					moment: {
						noGlobal: true
					}
				},
				paths: {
					jquery: '../bower_components/jquery/dist/jquery',
					underscore: '../bower_components/underscore/underscore',
					bootstrap: '../bower_components/bootstrap/dist/js/bootstrap',
					moment: '../bower_components/moment/min/moment-with-locales',
					fuelux: {{#if isReference}}'../reference/dist/js/fuelux'{{else}}'../js'{{/if}},
					hbs: '../node_modules/require-handlebars-plugin/hbs',
					fuelux_templates: {{#if isReference}}'../reference/dist/templates/handlebars/fuelux'{{else}}'../templates/handlebars/fuelux'{{/if}}
				},
				shim: {
					'bootstrap': {
						deps: ['jquery'],
						exports: 'bootstrap'
					}
				},
				hbs: {
					partialsUrl: '{{#if isReference}}../reference/dist/templates/handlebars{{else}}../dist/templates/handlebars{{/if}}'
				}
			});
		})();
		require(['jquery', 'underscore', 'bootstrap', 'moment', {{#if isReference}}'fuelux'{{else}}'fuelux/all'{{/if}}], function ($) {
			console.log('page loaded {{#if isReference}}reference dist{{else}}dev code{{/if}}');
		});
	</script>
	<form>
		{{{body}}}
	</form>
</body>
</html>