<div class="b-settings-folders">
	<div class="legend">
		<span data-i18n="SETTINGS_FOLDERS/LEGEND_FOLDERS"></span>
		&nbsp;&nbsp;&nbsp;
		<i class="icon-spinner" style="margin-top: 5px" data-bind="visible: loading"></i>
	</div>
	<div style="border-bottom: 1px solid rgba(128,128,128,0.5);margin-bottom:20px;" data-bind="visible: useImapSubscribe, component: {
		name: 'Checkbox',
		params: {
			label: 'SETTINGS_FOLDERS/HIDE_UNSUBSCRIBED',
			value: hideUnsubscribed
		}
	}"></div>
	<a class="btn" data-bind="click: createFolder">
		<i class="icon-folder-add"></i>
		<span data-i18n="SETTINGS_FOLDERS/BUTTON_CREATE"></span>
	</a>
	&nbsp;&nbsp;
	<a class="btn" data-bind="click: systemFolder">
		<i class="fontastic">🔧</i>
		<span data-i18n="SETTINGS_FOLDERS/BUTTON_SYSTEM"></span>
	</a>
	<div class="alert folders-list-error" data-bind="visible: folderListOptimized">
		<b data-i18n="SETTINGS_FOLDERS/TO_MANY_FOLDERS_DESC_1"></b>
		<br />
		<span data-i18n="SETTINGS_FOLDERS/TO_MANY_FOLDERS_DESC_2"></span>
	</div>
	<div class="alert folders-list-error" data-bind="visible: '' !== folderListError()">
		<button type="button" class="close" data-bind="click: function () { folderListError(''); }">×</button>
		<span data-bind="text: folderListError"></span>
	</div>
	<table class="table table-hover list-table" data-bind="i18nUpdate: folderList">
		<colgroup>
			<col />
			<col style="width: 1%" />
			<col style="width: 1%" />
			<col style="width: 1%" data-bind="visible: displaySpecSetting" />
		</colgroup>
		<tbody data-bind="template: { name: 'SettingsFolderItem', foreach: folderList }"></tbody>
	</table>
</div>
