{% extends "layout.html" %}

{% block scripts %}
	{{ super() }}
	<script type="text/javascript" src="static/socket.io.slim.js"></script>
	<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		function request_status() {
			socket.emit('request_status');
		}

		var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
		var timer = setInterval(request_status, 120000);

		socket.on('connect', function() {
			socket.emit('connected');
		});
		socket.on('status', function(status) {
			$('#led').attr('src', status.led);
			$('#message').html(status.message);
			clearInterval(timer);
			timer = setInterval(request_status, 120000);
		});
	});
	</script>
{% endblock %}

{% block content %}
<h1 class="text-center">Willkommen in der Binary Kitchen!</h1>
<div class="row">
	<div class="col-md-3 text-center">
		<img id="led" src="">
		<div id="message"></div>
	</div>
	<div class="col-md-8">
		<img src="static/token.png" height="400">
	</div>
</div>
{{ super() }}
{% endblock %}