{% extends "base.html" %}
{% block content %}
{% from 'include/input_macros.html' import input, checkbox %}
<link href="/inc/table.css" rel="stylesheet" type="text/css">
<script type="text/javascript" charset="utf8" src="/inc/dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="/inc/runtimeapi.js"></script>
<div id="tabs">
	<ul>
		<li><a href="#runtimeapi" title="Runtime API - HAProxy-WI">Runtime API</a></li>
		{% if role <= 2 %}
			<li><a href="#maxconn" title="Runtime API: Changing Maxconn - HAProxy-WI">Change Maxconn</a></li>
			<li><a href="#ip" title="Runtime API: Changing IP and Port for backend servers - HAProxy-WI">Change IP and Port</a></li>
			<li><a href="#table" title="Runtime API: Stick Table - HAProxy-WI">Stick Table</a></li>
			<li><a href="#lists" title="Runtime API: Change dynamically whitelist and blacklist - HAProxy-WI">Lists</a></li>
		{% endif %}
		{% include 'include/login.html' %}
	</ul>
	<ul id='browse_histroy'></ul>
	<div id="runtimeapi">
		<table class="overview">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Server</td>
				<td>Disable/Enable server or output any information</td>
				<td>Command</td>
				<td class="checkbox-head">Save change</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn" style="width: 25%;">
					<form action="" method="post" id="runtimeapiform">
						{% include 'include/select.html' %}
				</td>
				<td style="width: 30%;">
					<select required name="servaction" id="servaction">
						<option disabled>Choose action</option>
						{% if role <= 2 %}
							<option value="disable">Disable</option>
							<option value="enable">Enable</option>
							<option value="set">Set</option>
						{% endif %}
						<option value="show" selected>Show</option>
					</select>
				</td>
				<td>
					{{ input('servbackend', value=servbackend, title='Frontend, backend/server, show: info, pools or help', required='required') }}
				</td>
				<td class="checkbox">
					{% if role <= 2 %}
						{{ checkbox('save', value='123') }}
					{% endif %}
				</td>
				<td>
					<button type="submit" name="Enter" value="Enter" id="enter">Enter</button>
				</td>
					</form>
			</tr>
		</table>
		<script>
			if (window.matchMedia('(max-width: 786px)').matches || window.matchMedia('(max-width: 1024px)').matches || window.matchMedia('(max-width: 667px)').matches) {
				$( "#servaction" ).selectmenu({
				  width: 150
				});
				$( "#serv" ).selectmenu({
				  width: 150
				});
			}
		</script>
		<div id="ajaxruntime"></div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			You can read the description of all Run Time API <a href="https://haproxy-wi.org/description.py?description=runtimeapi#commands" title="Run Time API description" target="_blank">here</a>
		</div>
	</div>
	{% if role <= 2 %}
	<div id="maxconn">
		<table class="overview">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Server</td>
				<td>Choose Frontend</td>
				<td>Maxconn</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn" style="width: 25%;">
					<form action="" method="post" id="maxconnform">
						<select autofocus required name="serv" id="maxconn_select">
							<option disabled selected>Choose server</option>
							{% for select in selects %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
							{% endfor %}
						</select>
				</td>
				<td style="width: 30%;">
					<select required name="maxconnfront" id="maxconnfront">
					</select>
				</td>
				<td>
					{{ input('maxconnint', title='Enter maxconn', type="number", required='required') }}
				</td>
				<td>
					<button type="submit" name="Enter" value="Enter" id="enter">Enter</button>
				</td>
					</form>
			</tr>
		</table>
		<div id="ajaxmaxconn"></div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			You can read how it works <a href="https://haproxy-wi.org/description.py?description=runtimeapi#maxconn" title="Change Maxconn" target="_blank">here</a>
		</div>		
	</div>
	
	<div id="ip">
		<table class="overview">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Server</td>
				<td>Choose Backend</td>
				<td>Choose Server</td>
				<td>New IP</td>
				<td>New Port</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn" style="width: 25%;">
					<form action="" method="post" id="runtimeapiip">
						<select autofocus required name="ip_select" id="ip_select">
							<option disabled selected>Choose server</option>
							{% for select in selects %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
							{% endfor %}
						</select>
				</td>
				<td>
					<select required name="ipbackend" id="ipbackend">
					</select>				
				</td>
				<td>
					<select required name="backend_server" id="backend_server">
					</select>
				</td>
				<td>
					{{ input('backend_ip', title='Set new server IP', required='required', size='16') }}
				</td>
				<td>
					{{ input('backend_port', title='Set new server Port', type="number", required='required', size='6') }}
				</td>
				<td>
					<button type="submit" name="Enter" value="Enter" id="enter">Enter</button>
				</td>
					</form>
			</tr>
		</table>
		<div id="ajaxip"></div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			You can read how it works <a href="https://haproxy-wi.org/description.py?description=runtimeapi#ip" title="Change IP and Port" target="_blank">here</a>
		</div>	
	</div>
	<div id="table">
		<table class="overview">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Server</td>
				<td>Choose Table</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn" style="width: 25%;">
					<form action="" method="post" id="runtimeapitable">
						<select autofocus required name="table_serv_select" id="table_serv_select">
							<option disabled selected>Choose server</option>
							{% for select in selects %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
							{% endfor %}
						</select>
				</td>
				<td>
					<select required name="table_select" id="table_select">
					</select>				
				</td>
				<td>
					<button type="submit" name="Enter" value="Enter" id="enter">Get table</button>
				</td>
					</form>
			</tr>
		</table>
		<div id="ajaxtable"></div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			You can read how it works <a href="https://haproxy-wi.org/description.py?description=runtimeapi#ip" title="Change IP and Port" target="_blank">here</a>
		</div>	
	</div>
	<div id="lists">
		<table class="overview">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Server</td>
				<td>Choose List</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn" style="width: 25%;">
					<form action="" method="post" id="runtimeapilist">
						<select autofocus required name="list_serv_select" id="list_serv_select">
							<option disabled selected>Choose server</option>
							{% for select in selects %}
							<option value="{{ select.2 }}">{{ select.1 }}</option>
							{% endfor %}
						</select>
				</td>
				<td>
					<select required name="list_select" id="list_select">
					</select>
				</td>
				<td>
					<button type="submit" name="Enter" value="Enter" id="enter">Get list</button>
				</td>
				</form>
			</tr>
		</table>
		<div id="ajaxlist"></div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			You can read how it works <a href="https://haproxy-wi.org/description.py?description=runtimeapi#lists" title="Manage lists" target="_blank">here</a>
		</div>
	</div>
	{% endif %}
</div>
<script>
$( function() {
	if (window.matchMedia('(max-width: 1280px)').matches) {
		$("#ip_select" ).selectmenu({
			width: 100
		});
		$("#ipbackend" ).selectmenu({
			width: 100
		});
		$("#backend_server" ).selectmenu({
			width: 100
		});
	}
});
</script>
{% endblock %}