<header>
	<a href="#" class="close" data-bind="click: close">×</a>
	<h3>
		<span data-i18n="POPUPS_FILTER/TITLE_CREATE_FILTER" data-bind="visible: isNew"></span>
		<span data-i18n="POPUPS_FILTER/TITLE_EDIT_FILTER" data-bind="visible: !isNew()"></span>
	</h3>
</header>
<form id="sieve-script-filter" class="modal-body" spellcheck="false" data-bind="submit: saveFilter, with: filter">
	<div class="control-group" data-bind="css: {'error': nameError}">
		<input type="text" class="span5"
			data-bind="value: name"
			autofocus="" autocorrect="off" autocapitalize="off"
			data-i18n="[placeholder]GLOBAL/NAME">
	</div>

	<div class="legend" data-i18n="POPUPS_FILTER/LEGEND_CONDITIONS"></div>
	<div class="control-group" data-bind="visible: 1 < conditions().length">
		<select class="span4" data-bind="value: conditionsType">
			<option value="Any"
				data-i18n="POPUPS_FILTER/SELECT_MATCH_ANY"></option>
			<option value="All"
				data-i18n="POPUPS_FILTER/SELECT_MATCH_ALL"></option>
		</select>
	</div>
	<div data-bind="foreach: conditions">
		<div class="control-group" data-bind="css: {'error': valueError}" style="display:flex">
			<div style="flex-grow:1" data-bind="css: {'error': valueError}, template: {name: template(), data: $data}"></div>
			<span class="delete-action button-delete fontastic" style="margin-top: 5px;"
				data-bind="click: function (oCondition) { $root.removeCondition(oCondition); }">🗑</span>
		</div>
	</div>
	<div class="control-group" data-bind="visible: 0 === conditions().length"
		data-i18n="POPUPS_FILTER/ALL_INCOMING_MESSAGES_DESC"></div>
	<div class="control-group">
		<a class="btn" data-bind="click: addCondition" data-icon="✚" data-i18n="POPUPS_FILTER/BUTTON_ADD_CONDITION"></a>
	</div>

	<div class="legend" data-i18n="POPUPS_FILTER/LEGEND_ACTIONS"></div>
	<select class="span3" data-bind="options: $root.actionTypeOptions, value: actionType, optionsText: 'name', optionsValue: 'id'"></select>
	<div data-bind="template: {name: actionTemplate()}, i18nUpdate: actionTemplate"></div>
</form>
<footer>
	<button class="btn buttonSave" form="sieve-script-filter" data-icon="✔" data-i18n="GLOBAL/DONE"></button>
</footer>
