{% extends "base.html" %}
{% block content %}	
<br />
<form style="padding-left: 20px;" action="viewsttats.py" method="get">
	<select autofocus required name="serv" id="serv">
		<option disabled>Choose server</option>
			{% for select in selects %}
				{% if select.2 == serv %}
					<option value="{{ select.2 }}" selected>{{ select.1 }}</option>
				{% else %}
					<option value="{{ select.2 }}">{{ select.1 }}</option>
				{% endif %}
			{% endfor %}
	</select>		
	<a class="ui-button ui-widget ui-corner-all" id="show" title="Show stats" onclick="{{ onclick }}">Show</a>
</form>
<div id="ajax" style="margin-left: 10px;"></div>
<script> 
	window.onload = showStats();
	function sleep(ms) {
	  return new Promise(resolve => setTimeout(resolve, ms));
	}
	async function wait() {
		$('form').append('<input type="hidden" name="serv" value='+$("#serv").val()+'>');
		$( "input[type=submit], button" ).button();
		$('li').css('margin-top', '0');
		$('table.tbl th.pxname').css('background-color', '#5d9ceb');
		$('a.px:link').css('color', '#fff');
		$('h1').next().css('display', 'none');	  
		$( "select" ).selectmenu();
		await sleep(2000);
	  
	  $("form").submit(function() {
		$.ajax({
			type: "get",
			url: "options.py",
			dataType: "text",
			data: $(this).serialize(),
			success: function( data ) {
				showStats();
				}
			});
		return false;
		});		
	}	
</script>
<link href="/inc/style.css" rel="stylesheet">
{% endblock %}