{% extends "base.html" %}

{% from '_macros.html' import calendar_heatmap, build_activity_timeline with context %}

{% block pagetitle -%}Overview{%- endblock pagetitle %}

{% block topcontent %}
	<div class="row">
		<div class="col-lg-1 col-md-0 col-sm-12"></div>
		<div class="col-lg-2 col-md-4 col-sm-12">
			<div class="fd-tile detail clean tile-purple">
				<div class="content"><h1 class="text-left">{{ stats.build_queue }}</h1>

					<p>Queued Builds</p></div>
				<div class="icon"><i class="fa fa-clock-o"></i></div>
				<a class="details" href="/builds/queue">Details
					<span><i class="fa fa-arrow-circle-right pull-right"></i></span></a>
			</div>
		</div>


		<div class="col-lg-2 col-md-4 col-sm-12">
			<div class="fd-tile detail clean tile-lemon">
				<div class="content"><h1 class="text-left">{{ stats.completed }}</h1>

					<p>Completed Builds &lt; 48hrs</p></div>
				<div class="icon"><i class="fa fa-check"></i></div>
				<a class="details" href="/builds/completed">Details
					<span><i class="fa fa-arrow-circle-right pull-right"></i></span></a>
			</div>
		</div>


		<div class="col-lg-2 col-md-4 col-sm-12">
			<div class="fd-tile detail clean tile-red">
				<div class="content"><h1 class="text-left">{{ stats.failed }}</h1>

					<p>Failed Builds &lt; 48hrs</p></div>
				<div class="icon"><i class="fa  fa-exclamation-triangle"></i></div>
				<a class="details" href="/builds/failed">Details
					<span><i class="fa fa-arrow-circle-right pull-right"></i></span></a>
			</div>
		</div>

		<div class="col-lg-2 col-md-5 col-lg-offset-0 col-md-offset-1 col-sm-12">
			<div class="fd-tile detail clean tile-prusia">
				<div class="content"><h1 class="text-left">{{ stats.repo_staging }}</h1>

					<p>Packages In Staging Repo</p></div>
				<div class="icon"><i class="fa fa-rocket"></i></div>
				<a class="details" href="/repo/browse">Details
					<span><i class="fa fa-arrow-circle-right pull-right"></i></span></a>
			</div>
		</div>

		<div class="col-lg-2 col-md-5 col-sm-12">
			<div class="fd-tile detail clean tile-orange">
				<div class="content"><h1 class="text-left">{{ stats.repo_main }}</h1>

					<p>Packages In Main Repo</p></div>
				<div class="icon"><i class="fa fa-desktop"></i></div>
				<a class="details" href="/repo/browse/main">Details
					<span><i class="fa fa-arrow-circle-right pull-right"></i></span></a>
			</div>
		</div>

		<div class="col-lg-1 col-md-3 col-sm-12"></div>
	</div>
{% endblock topcontent %}

{% block bottomcontent %}
	<div class="row">

		<div class="col-md-5" style="padding-left: 25px; margin-top: 30px;">
			{% if tl_events %}
				{{ build_activity_timeline(tl_events, all_pages, page) }}
			{% endif %}
		</div>

		<div class="col-md-7" style="margin-top: 47px; width: 52%; float: right;">
			<div class="block-flat dark-box" style="padding-bottom: 0px;">
				<div class="header">
					<div class="actions">
						<a class="minimize ant-disabled" href="#" id="build_history-Previous"><i class="fa fa-chevron-left"></i></a>
						<a class="refresh ant-disabled" href="#"><i class="fa"></i></a>
						<a class="close-down ant-disabled" href="#" id="build_history-Next"><i class="fa fa-chevron-right"></i></a>
					</div>
					<h3>Build Activity</h3>
				</div>
				<div class="content build_heat no-padding" style="width: 100%;"></div>
			</div>
		</div>
	</div>
{% endblock bottomcontent %}

{% block scripts %}
	{{ super() }}

	{% if timestamps %}
		{{ calendar_heatmap(timestamps, '.build_heat') }}
	{% endif %}

	<script>
		function tlhandler() {
			$('.pagination').on('click', 'a', function (e) {
				e.preventDefault();
				var url = $(this).attr('href');
				if (url != '#') {
					$(".tlwrap").fadeTo('fast', 0.2).load(url + " .tlwrap", function () {
						$(".tlwrap").fadeTo('fast', 1);
						tlhandler();
					});
				}
			});
			$('.tlwrap [data-toggle]').tooltip();
		}

		$(document).ready(tlhandler);

		{% if current_user.is_authenticated %}
			function rerun_trans_handler() {
				$('.tlwrap').on('click', '.rerun-transaction', function (e) {
					e.preventDefault();

					var $icon = $(this).find('i'),
						url = '/api/ajax?rerun_transaction=' + $(this).attr('data-tlevent');

					$icon.addClass('fa-spin');

					$.getJSON(url, function (data) {
						setTimeout(function ($the_icon) {
							$the_icon.removeClass('fa-spin');
						}, 2000, $icon);
					});
				});
			}

			$(document).ready(rerun_trans_handler);
		{% endif %}
	</script>
{% endblock scripts %}