{% extends "base.html" %}
{% block content %}	
<br />
<form style="padding-left: 5px;" 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>
<br />
<div id="ajax" style="margin-left: 5px; margin-right: 5px;"></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()+'>');
		$('form').append('<input type="hidden" name="token" value='+$('#token').val()+'>');
		$( "input[type=submit], button" ).button();
		$('li').css('margin-top', '0');
		$('th').css('background-color', '#f5faf4');
		$('table.tbl th.pxname').css('background-color', '#5d9ceb');
		
		$('table.tbl th.pxname').css('width', '100%');
		$('a.px:link').css('color', '#fff');
		$('td').css('font-family', '"Helvetica Neue", Helvetica, Arial, sans-serif');
		$('td').css('font-size', '11');
		$('h1').css('display', 'none');
		$('td').css('border-color', '#ddd');
		$('td').css('padding', '3px');
		$('th').css('padding-top', '4px');
		$('th').css('padding-bottom', '4px');
		$('th').css('border-color', '#ddd');
		$('h1').next().css('display', 'none');	  
		$('h1').next().next().css('display', 'none');	  
		$('h1').next().next().next().css('display', 'none');	  
		$('h1').next().next().next().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;
		});		
	}
	$('#serv').on('selectmenuchange',function() {
		showStats();
	});	
</script>
<link href="/inc/style.css" rel="stylesheet">
{% endblock %}