<link rel="stylesheet" href="https://code.jquery.com/ui/{{resources.jqueryuiVersionForThemeroller}}/themes/smoothness/jquery-ui.css">
{{#if production}}
	<link rel="stylesheet" href="/resources/external/farbtastic.css">
	<link rel="stylesheet" href="/resources/themeroller.css">
{{else}}
	<link rel="stylesheet" href="/external/farbtastic/farbtastic.css">
	<link rel="stylesheet" href="/app/themeroller.css">
{{/if}}
<div id="themeroller" data-base-vars="{{baseVars}}" data-download-jqueryui-host="{{host}}" data-lzma-worker="{{lzmaWorker}}" data-textures="{{textures}}" class="content">
	<div class="themeroller__app-area">
		{{{appinterface}}}
		<div id="demo-options"><input type="checkbox" name="reverse-background" id="reverse-background"> <label for="reverse-background">Reverse page background color</label></div>
	</div>
	<div class="themeroller__demo-area">
		{{{demo}}}
	</div>
</div>

<script src="https://code.jquery.com/ui/{{resources.jqueryuiVersionForThemeroller}}/jquery-ui.min.js"></script>
{{#if production}}
	<script src="/resources/themeroller.all.min.js"></script>
{{else}}
	<script src="/external/eventEmitter/EventEmitter.js"></script>
	<script src="/external/handlebars/handlebars.runtime.js"></script>
	<script src="/template/themeroller.js"></script>
	<script src="/external/farbtastic/farbtastic.js"></script>
	<script src="/external/lzma-js/src/lzma.js"></script>
	<script src="/app/hash.js"></script>
	<script src="/app/querystring.js"></script>
	<script src="/app/model.js"></script>
	<script src="/app/themeroller.js"></script>
{{/if}}
