{% extends "base.html" %}

{% load static %}

{% block content %}

<div class="page-header">
	<h2>Logs</h2>
</div>

<div class="panel panel-default">
	<div class="panel-heading">
		<ul id="log_menu" class="nav nav-pills panel-heading">
			{% for log in logs %}
				<li id="log_item_{{ log.tag }}" data-tag-name="{{ log.tag }}"><a href="#">{{ log.name }}</a></li>
			{% endfor %}
		</ul>
	</div>

	<div class="panel-body">
		<pre id="log_display"></pre>
	</div>
</div>

<script type="text/javascript">

var log_display = $('#log_display');

$('#log_menu > li > a').click(function() {
	var menu_item = $(this).parent('li')

	if (!menu_item.hasClass('active')) {
		$('#log_menu > li').each(function() {
			$(this).removeClass('active');
		});

		menu_item.addClass('active');

		log_display.text('');
		log_display.addClass('loading');
		log_display.removeClass('alert');
		log_display.removeClass('alert-danger');

		$.get('/logs/' + menu_item.data('tag-name') + '/', function(data) {
			log_display.text(data.log);
			log_display.scrollTop(log_display.scrollHeight);
		}).fail(function(data) {
			var json = $.parseJSON(data.responseText);
			log_display.addClass('alert');
			log_display.addClass('alert-danger');
			log_display.text(json.description);
		}).always(function() {
			log_display.removeClass('loading');
		});
	}
});

$('#log_item_{{ logs.0.tag }} > a').click();

</script>

{% endblock %}