#{extends 'main.html' /}
#{set title:'Home' /}

<header>
	<div class="inner">
		<nav>
			<ul>
				<li><a href="#trace"><input type="checkbox" id="log4play_level_TRACE" value="true"> TRACE</a></li>
				<li><a href="#debug"><input type="checkbox" id="log4play_level_DEBUG" value="true" checked> DEBUG</a></li>
				<li><a href="#info"><input type="checkbox" id="log4play_level_INFO" value="true" checked> INFO</a></li>
				<li><a href="#warn"><input type="checkbox" id="log4play_level_WARN" value="true" checked> WARN</a></li>
				<li><a href="#error"><input type="checkbox" id="log4play_level_ERROR" value="true" checked> ERROR</a></li>
			</ul>
		</nav>
	</div>
</header>

<div align="left">
<article>
	<br><br><br><br>
	<section>	
		<ul>
			<div id="items" data-bind="html: details"></div>
		</ul>
	</section>
</article>
</div>

	<script id="itemsTemplate" type="text/x-jquery-tmpl">
		<ul>
			{{each items}}
				<div class="signature"><h3 id="waypoint-init">[${level}] [${category}] [${date}]</h3><dl>
				<dd><pre>${message}</pre></dd>
				</dl></div>
			{{/each}}
		</ul>
	</script>

<script type="text/javascript">

	var viewModel = {};
	viewModel.details = ko.observable();
	ko.applyBindings(viewModel);
	viewModel.details("Log Events will start showing up here...");

    // Create a socket
    var socket = new WebSocket('@@{Log4Play.WebSocket.index()}');
    
    // Display a message
    var data = "";
    var display = function(json) {
		var event = JSON.parse(json);
    	if ( event != null && json != null ) {
	    	var checkLevel = document.getElementById("log4play_level_" + event.level);
	    	if ( checkLevel != null && checkLevel.checked == true ) {
	    		var item = '<div class="signature"><h3 id="waypoint-init">[' + event.level + '] [' + event.category  + '] [' + event.date + ']</h3><dl>';
	    		item = item + '<dd><pre>' + event.message + '</pre></dd></dl></div>';
	    		data = item + data;
	    		viewModel.details(data);
	    	}
    	}
    } 
    
    // Message received on the socket
    socket.onmessage = function(event) {
    	display(event.data);
    }

</script>
