<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: function () { $root.theme(name); }, css: { 'selected': selected }">
		<figcaption data-bind="text: nameDisplay"></figcaption>
		<img data-bind="attr: { 'src': themePreviewSrc }">
	</figure>
</div>
<br>
<br>
<div class="form-horizontal" data-bind="visible: background.enabled">
	<div class="legend" data-i18n="SETTINGS_THEMES/LEGEND_THEMES_CUSTOM"></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>
