{% load lookup %}

<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>
			<td>
				{% if 'q50' in kpi.params|lookup:'graphs' and kpi_n %}
					<input type="checkbox" id="q50_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_50" checked>
				{% else %}
					<input type="checkbox" id="q50_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_50">
				{% endif %}
				<label for="q50_{{ kpi_n }}">50%</label>
				<br>
			</td>
			<td>
				<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q50" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q50">
			<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" placeholder="ms" size="12" id="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q50" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q50" value="{{ kpi.params|lookup:'sla'|lookup:'q50'|lookup:'threshold' }}">
		</td>
	</tr>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
	if ({{ kpi_n }}) {
		var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q50");
		switch ("{{ kpi.params|lookup:'sla'|lookup:'q50'|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 'q75' in kpi.params|lookup:'graphs' and kpi_n %}
				<input type="checkbox" id="q75_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_75" checked>
			{% else %}
				<input type="checkbox" id="q75_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_75">
			{% endif %}
			<label for="q75_{{ kpi_n }}">75%</label>
			<br>
		</td>
		<td>
			<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q75" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q75">
			<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" placeholder="ms" size="12" id="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q75" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q75" value="{{ kpi.params|lookup:'sla'|lookup:'q75'|lookup:'threshold' }}">
		</td>
	</tr>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
	if ({{ kpi_n }}) {
		var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q75");
		switch ("{{ kpi.params|lookup:'sla'|lookup:'q75'|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 'q80' in kpi.params|lookup:'graphs' and kpi_n %}
				<input type="checkbox" id="q80_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_80" checked>
			{% else %}
				<input type="checkbox" id="q80_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_80">
			{% endif %}
			<label for="q80_{{ kpi_n }}">80%</label>
			<br>
		</td>
		<td>
			<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q80" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q80">
			<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" placeholder="ms" size="12" id="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q80" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q80" value="{{ kpi.params|lookup:'sla'|lookup:'q80'|lookup:'threshold' }}">
		</td>
	</tr>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
	if ({{ kpi_n }}) {
		var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q80")
		switch ("{{ kpi.params|lookup:'sla'|lookup:'q80'|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 'q85' in kpi.params|lookup:'graphs' and kpi_n %}
				<input type="checkbox" id="q85_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_85" checked>
			{% else %}
				<input type="checkbox" id="q85_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_85">
			{% endif %}
			<label for="q85_{{ kpi_n }}">85%</label>
			<br>
		</td>
		<td>
			<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q85" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q85">
			<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" placeholder="ms" size="12" id="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q85" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q85" value="{{ kpi.params|lookup:'sla'|lookup:'q85'|lookup:'threshold' }}">
		</td>
	</tr>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
	if ({{ kpi_n }}) {
		var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q85")
		switch ("{{ kpi.params|lookup:'sla'|lookup:'q85'|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 'q90' in kpi.params|lookup:'graphs' and kpi_n %}
				<input type="checkbox" id="q90_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_90" checked>
			{% else %}
				<input type="checkbox" id="q90_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_90">
			{% endif %}
			<label for="q90_{{ kpi_n }}">90%</label>
			<br>
		</td>
		<td>
			<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q90" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q90">
			<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" placeholder="ms" size="12" id="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q90" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q90" value="{{ kpi.params|lookup:'sla'|lookup:'q90'|lookup:'threshold' }}">
		</td>
	</tr>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
	if ({{ kpi_n }}) {
		var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q90")
		switch ("{{ kpi.params|lookup:'sla'|lookup:'q90'|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 'q95' in kpi.params|lookup:'graphs' and kpi_n %}
				<input type="checkbox" id="q95_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_95" checked>
			{% else %}
				<input type="checkbox" id="q95_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_95">
			{% endif %}
			<label for="q95_{{ kpi_n }}">95%</label>
			<br>
		</td>
		<td>
			<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q95" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q95">
			<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" placeholder="ms" size="12" id="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q95" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q95" value="{{ kpi.params|lookup:'sla'|lookup:'q95'|lookup:'threshold' }}">
		</td>
	</tr>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
	if ({{ kpi_n }}) {
		var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q95")
		switch ("{{ kpi.params|lookup:'sla'|lookup:'q95'|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 'q98' in kpi.params|lookup:'graphs' and kpi_n %}
				<input type="checkbox" id="q98_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_98" checked>
			{% else %}
				<input type="checkbox" id="q98_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_98">
			{% endif %}
			<label for="q98_{{ kpi_n }}">98%</label>
			<br>
		</td>
		<td>
			<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q98" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q98">
			<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" placeholder="ms" size="12" id="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q98" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q98" value="{{ kpi.params|lookup:'sla'|lookup:'q98'|lookup:'threshold' }}">
		</td>
	</tr>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
	if ({{ kpi_n }}) {
		var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q98")
		switch ("{{ kpi.params|lookup:'sla'|lookup:'q98'|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 'q99' in kpi.params|lookup:'graphs' or not kpi_n %}
				<input type="checkbox" id="q99_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_99" checked>
			{% else %}
				<input type="checkbox" id="q99_{{ kpi_n }}" name="graphs_{{ kpitype.0 }}_{{ kpi_n }}_99">
			{% endif %}
			<label for="q99_{{ kpi_n }}">99%</label>
			<br>
		</td>
		<td>
			<select size="1" class="operator_select form-control" name="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q99" id="operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q99">
			<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" placeholder="ms" size="12" id="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q99" name="threshold_{{ kpitype.0 }}_{{ kpi_n }}_q99" value="{{ kpi.params|lookup:'sla'|lookup:'q99'|lookup:'threshold' }}">
		</td>
	</tr>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
	if ({{ kpi_n }}) {
		var selector = document.getElementById("operator_select_{{ kpitype.0 }}_{{ kpi_n }}_q99")
		switch ("{{ kpi.params|lookup:'sla'|lookup:'q99'|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>
</table>
</div>