{% load lookup %}

<div class="graphs_{{ kpi_n }}" id="graphs_{{ kpitype.0 }}_{{ kpi_n }}">
	<table>
	<tr>
		<td>
			<label>RPS разладки</label>
		</td>
		<td>
			<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_imbalance" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_imbalance">
			<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>
			<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/javascript">
				$(document).ready(function(){
					$('#operator_select_{{ kpitype.0 }}_{{ kpi_n }}_imbalance').selectpicker();
				});
			</script>
		</td>
		<td>
			<input class="form-control" type="text" maxlength="12" placeholder="rps" size="12" id="threshold_{{ kpitype.0 }}_{{ kpi_n }}_imbalance" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_imbalance" value="{{ kpi.params|lookup:'sla'|lookup:'imbalance'|lookup:'threshold' }}">
		</td>
	</tr>
	</table>
</div>
<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
if ({{ kpi_n }}) {
	var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_imbalance");
	switch ("{{ kpi.params|lookup:'sla'|lookup:'imbalance'|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>
<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/javascript">
	$(document).ready(function(){
		$('.operator_select.form-control').selectpicker({'title': ''});
	});
</script>