<p class="component-title">Select the theme you want to include or <a href="/themeroller/{{themerollerParams}}" class="themeroller-link">design a custom theme</a></p>
<div class="field-pair">
	<select data-filesize="152" id="theme" name="theme">
		<option value="none">No Theme</option>
		{{#each themeGallery}}
			<option value="{{serializedVars}}"{{isSelected}}>{{name}}</option>
		{{/each}}
	</select>
</div>
<div class="field-pair advanced-settings">
	<div class="folder-name-area">
		<label for="theme-folder-name">Theme Folder Name:</label>
		<input type="text" id="theme-folder-name" value="{{folderName}}" name="theme-folder-name">
		<p id="theme-folder-name-help" class="field-help-content">This field allows you to specify a name for the theme folder in your download. This is helpful if you plan to use multiple themes on a page. It defaults to "theme".</p>
	</div>

	<label for="scope">CSS Scope:</label>
	<input type="text" id="scope" value="" name="scope">
	<div id="scope-help" class="field-help-content"><p>This field allows you to specify a CSS scope to limit your theme to a particular portion of a page. This is helpful when using multiple themes on a page. If you don't provide a CSS scope, your theme will apply to all UI elements on a page.</p><p> In most situations, you won't need to specify a CSS scope. <strong>Please Note:</strong> If you provide a CSS scope, you will not get an example page included in your download.</p></div>
</div>
