<div class="b-settings-filters g-ui-user-select-none">
	<div class="form-horizontal">
		<div class="legend">
			<span class="i18n" data-i18n-text="SETTINGS_FILTERS/LEGEND_FILTERS"></span>
		</div>
	</div>
	<div class="row" data-bind="visible: inited() && !serverError()">
		<div class="span4">
			<a class="btn" data-bind="click: addFilter">
				<i class="icon-plus"></i>
				&nbsp;&nbsp;
				<span class="i18n" data-i18n-text="SETTINGS_FILTERS/BUTTON_ADD_FILTER"></span>
			</a>
			&nbsp;&nbsp;
			<a class="btn" data-bind="visible: filterRaw.allow, click: function () { filterRaw.active(!filterRaw.active()) },
				css: {'active': filterRaw.active }, tooltip: 'SETTINGS_FILTERS/BUTTON_RAW_SCRIPT'">
				<i class="icon-file-code"></i>
			</a>
			&nbsp;&nbsp;
			<a class="btn hide-on-disabled-command" data-bind="command: saveChanges">
				<i data-bind="css: {'icon-floppy': !filters.saving(), 'icon-spinner animated': filters.saving()}"></i>
				&nbsp;&nbsp;
				<span class="i18n" data-i18n-text="SETTINGS_FILTERS/BUTTON_SAVE"></span>
			</a>
		</div>
		<div class="span4" style="margin-left: 0;">
			<span data-bind="text: saveErrorText"style="color:red"></span>
		</div>
	</div>
	<div class="row" data-bind="visible: haveChanges">
		<div class="span8">
			<br />
			<div class="alert g-ui-user-select-none" style="margin-bottom: 0">
				<i class="icon-warning"></i>
				&nbsp;&nbsp;
				<span class="i18n" data-i18n-text="SETTINGS_FILTERS/CHACHES_NEED_TO_BE_SAVED_DESC"></span>
			</div>
		</div>
	</div>
	<div class="row" data-bind="visible: serverError">
		<div class="span8">
			<div class="alert alert-error g-ui-user-select-none" style="margin-bottom: 0">
				<i class="icon-warning"></i>
				&nbsp;&nbsp;
				<span data-bind="text: serverErrorDesc"></span>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="span8">
			<div class="process-place g-ui-user-select-none" data-bind="style: {'visibility': visibility }">
				<i class="icon-spinner animated"></i>
				&nbsp;&nbsp;
				<span data-bind="text: processText"></span>
			</div>
			<div class="control-group" data-bind="css: {'error': filterRaw.error}, visible: inited() && filterRaw.allow() && filterRaw.active()">
				<div class="controls">
					<pre style="word-break: break-word;" data-bind="visible: '' !== filterRaw.capa()">
						<b class="i18n" data-i18n-text="SETTINGS_FILTERS/CAPABILITY_LABEL"></b>:
						<span data-bind="text: filterRaw.capa"></span>
					</pre>
					<textarea class="span8" style="height: 300px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;"
						data-bind="value: filterRaw, valueUpdate: 'afterkeydown'"></textarea>
				</div>
			</div>
			<table class="table table-hover list-table g-ui-user-select-none"
				data-bind="visible: inited() && (!filterRaw.active() || !filterRaw.active()), i18nUpdate: filters">
				<colgroup>
					<col style="width: 30px" />
					<col style="width: 16px" />
					<col />
					<col style="width: 140px" />
					<col style="width: 1%" />
				</colgroup>
				<tbody data-bind="sortable: {data: filters, options: scrollableOptions()}" style="width: 600px">
					<tr class="filter-item">
						<td>
							<span class="disabled-filter" data-bind="click: function () { $root.haveChanges(true); enabled(!enabled()); }">
								<i data-bind="css: {'icon-checkbox-checked': enabled, 'icon-checkbox-unchecked': !enabled()}"></i>
							</span>
						</td>
						<td class="drag-wrapper">
							<i class="icon-braille drag-handle"></i>
						</td>
						<td class="e-action">
							<span class="filter-name" data-bind="text: name()"></span>
							&nbsp;&nbsp;
							<span class="filter-sub-name" data-bind="text: nameSub()"></span>
						</td>
						<td>
							<a class="btn btn-small btn-small-small btn-danger pull-right button-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(oFilter) { $root.deleteFilter(oFilter); }">
								<span class="i18n" data-i18n-text="SETTINGS_FILTERS/DELETING_ASK"></span>
							</a>
						</td>
						<td>
							<span class="delete-filter" data-bind="visible: !deleteAccess() && canBeDalete(), click: function (oFilter) { $root.filterForDeletion(oFilter); }">
								<i class="icon-trash"></i>
							</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>