<div class="legend">
	<span data-i18n="SETTINGS_THEMES/LEGEND_THEMES"></span>
	<span data-bind="saveTrigger: themeTrigger"></span>
</div>
<div data-bind="foreach: themesObjects">
	<figure data-bind="click: $root.setTheme, css: { 'selected': selected }">
		<figcaption data-bind="text: nameDisplay"></figcaption>
		<img data-bind="attr: { 'src': themePreviewSrc }">
	</figure>
</div>
<br>
<br>
<div class="form-horizontal">
	<div class="legend" data-i18n="SETTINGS_THEMES/LABEL_FONTS"></div>
	<div class="control-group">
		<label>Sans-serif</label>
		<select data-bind="value: fontSansSerif">
			<option value="" data-i18n="GLOBAL/DEFAULT"></option>
			<option value="Arial">Arial</option>
			<option value="Lucida">Lucida</option>
			<option value="Tahoma">Tahoma</option>
			<option value="Trebuchet">Trebuchet</option>
			<option value="Verdana">Verdana</option>
		</select>
	</div>
	<div class="control-group">
		<label>Serif</label>
		<select data-bind="value: fontSerif">
			<option value="" data-i18n="GLOBAL/DEFAULT"></option>
			<option value="Times">Times</option>
			<option value="Palatino">Palatino</option>
			<option value="Georgia">Georgia</option>
		</select>
	</div>
	<div class="control-group">
		<label>Mono</label>
		<select data-bind="value: fontMono">
			<option value="" data-i18n="GLOBAL/DEFAULT"></option>
			<option value="Courier">Courier</option>
			<option value="Lucida">Lucida</option>
		</select>
	</div>
</div>
<br>
<br>
<div class="form-horizontal" data-bind="visible: background.enabled">
	<div class="legend" data-i18n="SETTINGS_THEMES/LABEL_BACKGROUND"></div>
	<div class="control-group g-ui-user-select-none">
		<div class="row" data-bind="visible: '' !== background.error()" style="margin-left: 0; margin-bottom: 10px;">
			<div class="alert alert-error span6" data-bind="text: background.error" style="margin-left: 0"></div>
		</div>
		<div class="row" data-bind="visible: '' !== background.name()" style="margin-left: 0">
			<a class="btn" data-bind="visible: '' !== background.name(), click: clearBackground" data-icon="✖"></a>
			&nbsp;&nbsp;&nbsp;
			<b data-bind="text: background.name"></b>
		</div>
		<div class="row" data-bind="visible: '' === background.name()" style="margin-left: 0">
			<a class="btn" data-bind="initDom: background.uploaderButton">
				<i class="fontastic" data-bind="css: {'icon-spinner': background.loading()}">🖼</i>
				<span data-i18n="SETTINGS_THEMES/BUTTON_UPLOAD_BACKGROUND_IMAGE"></span>
			</a>
		</div>
	</div>
</div>
