<div class="popups">
	<div class="modal hide b-filter-content g-ui-user-select-none" data-bind="modal: modalVisibility">
		<div>
			<div class="modal-header">
				<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
				<h3>
					<span class="i18n" data-i18n-text="SETTINGS_FILTERS/TITLE_CREATE_FILTER" data-bind="visible: isNew"></span>
					<span class="i18n" data-i18n-text="SETTINGS_FILTERS/TITLE_EDIT_FILTER" data-bind="visible: !isNew()"></span>
				</h3>
			</div>
			<div class="modal-body">
				<div class="row filter" data-bind="with: filter">
					<div class="span9">

						<div class="control-group" data-bind="css: {'error': name.error}">
							<div class="controls">
								<input type="text" class="span5" data-bind="value: name,  hasFocus: name.focused" placeholder="Name" 
									autocorrect="off" autocapitalize="off" spellcheck="false" />
							</div>
						</div>

						<div class="legend">
							<span>
								Conditions @i18n
							</span>
						</div>
						<div>
							<div data-bind="visible: 1 < conditions().length">
								<select class="span4" data-bind="value: conditionsType">
									<option value="All">
										Matching all of the following rules @i18n
									</option>
									<option value="Any">
										Matching any of the following rules @i18n
									</option>
								</select>
							</div>
							<div data-bind="visible: 0 < conditions().length, foreach: conditions">
								<div data-bind="template: {'name': template(), 'data': $data}"></div>
							</div>
							<div data-bind="visible: 0 === conditions().length">
								All incoming messages @i18n
							</div>
							<br />
							<a class="btn" data-bind="click: addCondition, i18nInit: true">
								<i class="icon-plus"></i>
								&nbsp;&nbsp;
								<span class="i18n" data-i18n-text="SETTINGS_FILTERS/BUTTON_ADD_CONDITION"></span>
							</a>
						</div>
						<br />
						<div class="legend">
							<span>
								Actions
							</span>
						</div>
						<div data-bind="component: {
							name: 'Checkbox',
							params: {
								label: 'Mark as read @i18n',
								value: actionMarkAsRead
							}
						}"></div>
						<br />
						<div data-bind="template: {'name': actionTemplate()}"></div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<a class="btn buttonSave" data-bind="command: saveFilter">
					<i class="icon-ok"></i>
					&nbsp;&nbsp;
					<span class="i18n" data-i18n-text="SETTINGS_FILTERS/BUTTON_DONE"></span>
				</a>
			</div>
		</div>
	</div>
</div>
