{% extends "base.html" %}
{% load thumbnail %}

{% block js %}
    {% for staticfile in styles_files %}<link rel="stylesheet" type="text/css" href="/static/{{staticfile}}">
	{% endfor %}
	{% for staticfile in javascript_files %}<script type="text/javascript" src="/static/{{staticfile}}"></script>
	{% endfor %}
{% endblock %}

{% block sidebar %}
	{% if 'left' in active_menus %}
		{% include "sidebar.html" %}
	{% endif %}
{% endblock %}

{% block page_content %}

<div class="ui pointing secondary tabular menu apps-tabs" id='applications-tab-menu' >
	<a class="item active app-tab" data-tab="tab-home"><i class="home icon"></i></a>
</div>

<div id='applications-tab-content'  >
	<div class="ui attached active tab app-tab" id="tab-home" data-tab="tab-home">

	<div class="ui very padded loading segment">
		<div class="ui fluid placeholder">
			<div class="image"></div>
		  <div class="image header">
			<div class="line"></div>
			<div class="line"></div>
		  </div>
		  <div class="paragraph">
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
		  </div>

			  <div class="paragraph">
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
		  </div>


		</div>
	</div>



	</div>
</div>


</div>

<div class="ui small basic test modal transition scrolling"  id='confirm-tab-close' >
	<div class="ui icon header">
		<i class="power icon"></i>
		Close the tab
	</div>
	<div class="content ui center aligned segment">
		<p>Are you sure you want to close the tab?</p>
	</div>
	<div class="actions">
		<div class="ui red basic cancel inverted button">
			<i class="remove icon"></i>
			No
		</div>
		<div class="ui green ok inverted button">
			<i class="checkmark icon"></i>
			Yes
	  	</div>
	</div>
</div>




<script type="text/javascript">

	$('.ui.tabular .item.app-tab').on('click', function() {
		$('.ui.tabular .item.app-tab').removeClass('active');
		$('.tab.app-tab').removeClass('active');

		var tab = $(this).attr('data-tab');
		$(this).addClass('active');
		$('.tab.app-tab[data-tab="'+tab+'"]').addClass('active');
	});

	{% if running_menu %}
		$(document).ready(function(){run_application('{{ running_menu.fullname }}');});
	{% endif %}

</script>


<div class="ui dimmer" id='loading-label' ><div class="ui loader"></div></div>
<div class='ui modal' id='dialog' ></div>

{% endblock %}