{% load lookup %}
{% load getattribute %}


<div class="graphs_{{ kpi_n }}" id="graphs_{{ kpitype.0 }}_{{ kpi_n }}">
	<br>
	<select class="form-control" size="1" title="Мишень" data-live-search="true" name="target_{{ kpitype.0 }}_{{ kpi_n }}" id="target_{{ kpitype.0 }}_{{ kpi_n }}">
		<option value="-1"></option>
		{% for target in available_targets %}
			{% if kpi.params|lookup:'target'|getattribute:'n' == target|getattribute:'n' %}
				<option value="{{ target.n }}" selected>{{ target.host }}</option>
			{% else %}
				<option value="{{ target.n }}">{{ target.host }}</option>
			{% endif %}
		{% endfor %}
	</select>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/javascript">
		$(document).ready(function(){
			$('#target_{{ kpitype.0 }}_{{ kpi_n }}').selectpicker();
		});
	</script>
	<label for="target_{{ kpitype.0 }}_{{ kpi_n }}"></label>
	<br>
	<br>
	<select class="form-control" size="1" title="Метрика" data-live-search="true" name="metric_{{ kpitype.0 }}_{{ kpi_n }}" id="metric_{{ kpitype.0 }}_{{ kpi_n }}">
		<option value="-1"></option>
		{% if kpi_type.1 == 'cpu' %} 
			{% for metric in metrics_cpu %}
				{% if kpi.params|lookup:'metric'|getattribute:'id' == metric|getattribute:'id' %}
					<option value="{{ metric.id }}" selected>{{ metric.code }}</option>
				{% else %}
					<option value="{{ metric.id }}">{{ metric.code }}</option>
				{% endif %}
			{% endfor %}
		{% endif %}
		{% if kpi_type.1 == 'memory' %} 
			{% for metric in metrics_memory %}
				{% if kpi.params|lookup:'metric'|getattribute:'id' == metric|getattribute:'id' %}
					<option value="{{ metric.id }}" selected>{{ metric.code }}</option>
				{% else %}
					<option value="{{ metric.id }}">{{ metric.code }}</option>
				{% endif %}
			{% endfor %}
		{% endif %}
		{% if kpi_type.1 == 'disk' %} 
			{% for metric in metrics_disk %}
				{% if kpi.params|lookup:'metric'|getattribute:'id' == metric|getattribute:'id' %}
					<option value="{{ metric.id }}" selected>{{ metric.code }}</option>
				{% else %}
					<option value="{{ metric.id }}">{{ metric.code }}</option>
				{% endif %}
			{% endfor %}
		{% endif %}
		{% if kpi_type.1 == 'system' %} 
			{% for metric in metrics_system %}
				{% if kpi.params|lookup:'metric'|getattribute:'id' == metric|getattribute:'id' %}
					<option value="{{ metric.id }}" selected>{{ metric.code }}</option>
				{% else %}
					<option value="{{ metric.id }}">{{ metric.code }}</option>
				{% endif %}
			{% endfor %}
		{% endif %}
		{% if kpi_type.1 == 'net' %} 
			{% for metric in metrics_net %}
				{% if kpi.params|lookup:'metric'|getattribute:'id' == metric|getattribute:'id' %}
					<option value="{{ metric.id }}" selected>{{ metric.code }}</option>
				{% else %}
					<option value="{{ metric.id }}">{{ metric.code }}</option>
				{% endif %}
			{% endfor %}
		{% endif %}
		{% if kpi_type.1 == 'custom' %} 
			{% for metric in metrics_custom %}
				{% if kpi.params|lookup:'metric'|getattribute:'id' == metric|getattribute:'id' %}
					<option value="{{ metric.id }}" selected>{{ metric.code }}</option>
				{% else %}
					<option value="{{ metric.id }}">{{ metric.code }}</option>
				{% endif %}
			{% endfor %}
		{% endif %}
	</select>
	<br>
	<br>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/javascript">
		$(document).ready(function(){
			$('#metric_{{ kpitype.0 }}_{{ kpi_n }}').selectpicker();
		});
	</script>
	<table>
		<tr>
			<th>
				Значение
			</th>
			<th>
				Оператор 
			</th>
			<th>
				Порог
			</th>
		</tr>
		<tr>
			<td>
				{% if 'minimum' in kpi.params|lookup:'graphs' or not kpi_n %}
					<input type="checkbox" id="minimum_{{ kpitype.0 }}_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_minimum" checked>
				{% else %}
					<input type="checkbox" id="minimum_{{ kpitype.0 }}_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_minimum">
				{% endif %}
				<label for="minimum_{{ kpitype.0 }}_{{ kpi_n }}">Минимальное значение</label>
				<br>
			</td>
			<td>
			<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_minimum" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_minimum">
				<option value="0"></option>
				<option value="1">&lt;</option>
				<option value="2">&lt;&#61;</option>
				<option value="3">&gt;</option>
				<option value="4">&gt;&#61;</option>
			</select>
			</td>
			<td>
				<input class="form-control" type="text" maxlength="12" size="12" placeholder="{{ sla_labels|lookup:kpitype.0 }}" id="sla_{{ kpitype.0 }}_{{ kpi_n }}_minimum" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_minimum" value="{{ kpi.params|lookup:'sla'|lookup:'minimum'|lookup:'threshold' }}">
			</td>								
		</tr>
		<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
		if ({{ kpi_n }}) {
			var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_minimum");
			switch ("{{ kpi.params|lookup:'sla'|lookup:'minimum'|lookup:'operator' }}"){
				case "&lt;":
					selector.value = "1";
					break;
				case "&lt;=":
					selector.value = "2";
					break;
				case "&gt;":
					selector.value = "3";
					break;
				case "&gt;=":
					selector.value = "4";
					break;
			}			
		}
		</script>
		<tr>
			<td>
				{% if 'average' in kpi.params|lookup:'graphs' or not kpi_n %}
					<input type="checkbox" id="average_{{ kpitype.0 }}_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_average" checked>
				{% else %}
					<input type="checkbox" id="average_{{ kpitype.0 }}_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_average">
				{% endif %}
				<label for="average_{{ kpitype.0 }}_{{ kpi_n }}">Среднее значение</label>
				<br>
			</td>
			<td>
			<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_average" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_average">
				<option value="0"></option>
				<option value="1">&lt;</option>
				<option value="2">&lt;&#61;</option>
				<option value="3">&gt;</option>
				<option value="4">&gt;&#61;</option>
			</select>
			</td>
			<td>
				<input class="form-control" type="text" maxlength="12" size="12" placeholder="{{ sla_labels|lookup:kpitype.0 }}" id="threshold_{{ kpitype.0 }}_{{ kpi_n }}_average" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_average" value="{{ kpi.params|lookup:'sla'|lookup:'average'|lookup:'threshold' }}">
			</td>
		</tr>
		<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
		if ({{ kpi_n }}) {
			var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_average");
			switch ("{{ kpi.params|lookup:'sla'|lookup:'average'|lookup:'operator' }}"){
				case "&lt;":
					selector.value = "1";
					break;
				case "&lt;=":
					selector.value = "2";
					break;
				case "&gt;":
					selector.value = "3";
					break;
				case "&gt;=":
					selector.value = "4";
					break;
			}			
		}
		</script>
		<tr>
			<td>
				{% if 'median' in kpi.params|lookup:'graphs' or not kpi_n %}
					<input type="checkbox" id="median_{{ kpitype.0 }}_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_median" checked>
				{% else %}
					<input type="checkbox" id="median_{{ kpitype.0 }}_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_median">
				{% endif %}
				<label for="median_{{ kpitype.0 }}_{{ kpi_n }}">Медианное значение</label>
				<br>
			</td>
			<td>
			<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_median" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_median">
				<option value="0"></option>
				<option value="1">&lt;</option>
				<option value="2">&lt;&#61;</option>
				<option value="3">&gt;</option>
				<option value="4">&gt;&#61;</option>
			</select>
			</td>
			<td>
				<input class="form-control" type="text" maxlength="12" size="12" placeholder="{{ sla_labels|lookup:kpitype.0 }}" id="threshold_{{ kpitype.0 }}_{{ kpi_n }}_median" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_median" value="{{ kpi.params|lookup:'sla'|lookup:'median'|lookup:'threshold' }}">
			</td>
		</tr>
		<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
		if ({{ kpi_n }}) {
			var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_median");
			switch ("{{ kpi.params|lookup:'sla'|lookup:'median'|lookup:'operator' }}"){
				case "&lt;":
					selector.value = "1";
					break;
				case "&lt;=":
					selector.value = "2";
					break;
				case "&gt;":
					selector.value = "3";
					break;
				case "&gt;=":
					selector.value = "4";
					break;
			}			
		}
		</script>
		<tr>
			<td>
				{% if 'maximum' in kpi.params|lookup:'graphs' or not kpi_n %}
					<input type="checkbox" id="maximum_{{ kpitype.0 }}_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_maximum" checked>
				{% else %}
					<input type="checkbox" id="maximum_{{ kpitype.0 }}_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_maximum">
				{% endif %}
				<label for="maximum_{{ kpitype.0 }}_{{ kpi_n }}">Максимальное значение</label>
				<br>
			</td>
			<td>
			<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_maximum" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_maximum">
				<option value="0"></option>
				<option value="1">&lt;</option>
				<option value="2">&lt;&#61;</option>
				<option value="3">&gt;</option>
				<option value="4">&gt;&#61;</option>
			</select>
			</td>
			<td>
				<input class="form-control" type="text" maxlength="12" size="12" placeholder="{{ sla_labels|lookup:kpitype.0 }}" id="threshold_{{ kpitype.0 }}_maximum" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_maximum" value="{{ kpi.params|lookup:'sla'|lookup:'maximum'|lookup:'threshold' }}">
			</td>
		</tr>
		<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
		if ({{ kpi_n }}) {
			var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_maximum");
			switch ("{{ kpi.params|lookup:'sla'|lookup:'maximum'|lookup:'operator' }}"){
				case "&lt;":
					selector.value = "1";
					break;
				case "&lt;=":
					selector.value = "2";
					break;
				case "&gt;":
					selector.value = "3";
					break;
				case "&gt;=":
					selector.value = "4";
					break;
			}			
		}
		</script>
		<tr>
			<td>
				{% if 'stddev' in kpi.params|lookup:'graphs' or not kpi_n %}
					<input type="checkbox" id="stddev_{{ kpitype.0 }}_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_stddev" checked>
				{% else %}
					<input type="checkbox" id="stddev_{{ kpitype.0 }}_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_stddev">
				{% endif %}
				<label for="stddev_{{ kpitype.0 }}_{{ kpi_n }}">Стандартное отклонение</label>
				<br>
			</td>
			<td>
			<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_stddev" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_stddev">
				<option value="0"></option>
				<option value="1">&lt;</option>
				<option value="2">&lt;&#61;</option>
				<option value="3">&gt;</option>
				<option value="4">&gt;&#61;</option>
			</select>
			</td>
			<td>
				<input class="form-control" type="text" maxlength="12" size="12" placeholder="{{ sla_labels|lookup:kpitype.0 }}" id="sla_{{ kpitype.0 }}_{{ kpi_n }}_stddev" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_stddev" value="{{ kpi.params|lookup:'sla'|lookup:'stddev'|lookup:'threshold' }}">
			</td>
		</tr>	
		<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
		if ({{ kpi_n }}) {
			var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_stddev");
			switch ("{{ kpi.params|lookup:'sla'|lookup:'stddev'|lookup:'operator' }}"){
				case "&lt;":
					selector.value = "1";
					break;
				case "&lt;=":
					selector.value = "2";
					break;
				case "&gt;":
					selector.value = "3";
					break;
				case "&gt;=":
					selector.value = "4";
					break;
			}			
		}
		</script>
	</table>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/javascript">
		$(document).ready(function(){
			$('.operator_select.form-control').selectpicker({'title': ''});
		});
	</script>
</div>