<header>
	<a href="#" class="close" data-bind="click: close">×</a>
	<h3 data-bind="text: folder()?.fullName"></h3>
</header>
<form id="folderform" class="modal-body form-horizontal" autocomplete="off" spellcheck="false" data-bind="submit: submitForm">
	<div class="control-group" data-bind="if: editing">
		<label data-i18n="POPUPS_CREATE_FOLDER/LABEL_PARENT"></label>
		<select name="parent" data-bind="options: parentFolderSelectList, value: parentFolder,
			optionsText: 'name', optionsValue: 'id', optionsAfterRender: defaultOptionsAfterRender"></select>
	</div>
	<div class="control-group" data-bind="if: editing">
		<label data-i18n="GLOBAL/NAME"></label>
		<input name="folder" type="text"
			autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
			required="" data-bind="textInput: name">
	</div>
	<div data-bind="with: folder">
		<!-- ko if: canBeSubscribed -->
		<div class="control-group">
			<label class="fontastic">👁</label>
			<div data-bind="component: {
				name: 'Checkbox',
				params: {
					name: 'subscribe',
					label: 'SETTINGS_FOLDERS/BUTTON_SUBSCRIBE',
					value: isSubscribed
				}
			}"></div>
		</div>
		<!-- /ko -->
		<div class="control-group">
			<label data-i18n="POPUPS_FILTER/SELECT_FIELD_SIZE"></label>
			<span data-bind="text: friendlySize"></span>
		</div>
		<div class="control-group">
			<label data-i18n="MESSAGE_LIST/MENU_SELECT_UNSEEN"></label>
			<span data-bind="text: unreadEmails"></span>
			/ <span style="margin:0" data-bind="text: totalEmails"></span>
		</div>
		<!-- ko if: $root.displaySpecSetting() && canBeSelected() && isSubscribed() -->
		<div class="control-group">
			<label class="icon-check-mark-circle-two"></label>
			<div data-bind="component: {
				name: 'Checkbox',
				params: {
					name: 'checkable',
					label: 'SETTINGS_FOLDERS/HELP_CHECK_FOR_NEW_MESSAGES',
					value: checkable
				}
			}"></div>
		</div>
		<!-- /ko -->
		<!-- ko if: $root.showKolab -->
		<div class="control-group">
			<label>Kolab</label>
			<select data-bind="options: $root.kolabTypeOptions, value: kolabType,
				optionsText: 'name', optionsValue: 'id', optionsAfterRender: $root.defaultOptionsAfterRender"></select>
		</div>
		<!-- /ko -->
	</div>
	<div class="control-group" data-bind="if: ACLAllowed">
		<label>ACL</label>
		<div data-bind="foreach: ACL">
			<details>
				<summary data-bind="text: identifier"></summary>
				<table class="table table-hover table-bordered" style="width:auto"><tbody>
					<tr><td>mayAddItems</td><td class="fontastic" data-bind="text: mayAddItems ? '☑' : '☐'"></td></tr>
					<tr><td>mayCreateChild</td><td class="fontastic" data-bind="text: mayCreateChild ? '☑' : '☐'"></td></tr>
					<tr><td>mayDelete</td><td class="fontastic" data-bind="text: mayDelete ? '☑' : '☐'"></td></tr>
					<tr><td>mayReadItems</td><td class="fontastic" data-bind="text: mayReadItems ? '☑' : '☐'"></td></tr>
					<tr><td>mayRemoveItems</td><td class="fontastic" data-bind="text: mayRemoveItems ? '☑' : '☐'"></td></tr>
					<tr><td>mayRename</td><td class="fontastic" data-bind="text: mayRename ? '☑' : '☐'"></td></tr>
					<tr><td>maySetKeywords</td><td class="fontastic" data-bind="text: maySetKeywords ? '☑' : '☐'"></td></tr>
					<tr><td>maySetSeen</td><td class="fontastic" data-bind="text: maySetSeen ? '☑' : '☐'"></td></tr>
					<tr><td>maySubmit</td><td class="fontastic" data-bind="text: maySubmit ? '☑' : '☐'"></td></tr>
				</tbody></table>
			</details>
		</div>
	</div>
</form>
<footer>
	<button form="folderform" class="btn">
		<i class="icon-folder-add"></i>
		<span data-i18n="GLOBAL/SAVE"></span>
	</button>
</footer>
