{% load lookup %}
{% load any_val %}
{% load dump_array %}

<div class="graphs_{{ kpi_n }}" id="graphs_{{ kpitype.0 }}_{{ kpi_n }}">
	<br>
	{% if available_cases %}
	<select class="form-control selectpicker" title="Тэг не выбран" size="1" data-live-search="true" name="case_{{ kpitype.0 }}_{{ kpi_n }}" id="case_{{ kpitype.0 }}_{{ kpi_n }}">
		<option value="-1"></option>
		{% for case in available_cases %}
			{% if kpi.params|lookup:'case' == case %}
				<option value="{{ case }}" selected>{{ case }}</option>
			{% else %}
				<option value="{{ case }}">{{ case }}</option>
			{% endif %}
		{% endfor %}
	</select>
	<br>
	<br>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/javascript">
		$(document).ready(function(){
			$('#case_{{ kpitype.0 }}_{{ kpi_n }}').selectpicker();
		});
	</script>
	{% endif %}
	<table>
	<tr>
		<th> 
			Время
		</th>
		<th>
			Оператор
		</th>
		<th>
			Порог
		</th>
	</tr>
	<tr>
	<td>
		<input class="form-control" type="text" id="graphs_{{ kpitype.0 }}_{{ kpi_n }}_time_to" value="{{ kpi.params|lookup:'graphs'|dump_array }}" size="8" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_time_to">
	</td>
	<td>
		<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_trail_time" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_trail_time">
			<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 }}" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}" value="{{ kpi.params|lookup:'sla'|any_val|lookup:'threshold' }}">
	</tr>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
	if ({{ kpi_n }}) {
		var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_trail_time")
		switch ("{{ kpi.params|lookup:'sla'|any_val|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>
	<br>
	<p>Введите через запятую верхние границы интералов времен ответа, которые нужно отслеживать.</p> 
	<p>SLA будет распространяться на все введенные значения.</p>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/javascript">
		$(document).ready(function(){
			$('.operator_select.form-control').selectpicker({'title': ''});
		});
	</script>
</div>