{% extends "base.html" %}

{% from '_macros.html' import
	calendar_heatmap,
	toggles_init,
	simple_counter,
	label_tag_link,
	toggle_switch,
	list_group,
	text_with_icon,
	build_activity_timeline with context %}

{% block pagetitle %}Package Profile{% endblock pagetitle %}

{% block bottomcontent -%}
	<div class="row">
		<div class="col-md-12">
			<div class="block-flat profile-info">
				<div class="row">
					<div class="col-md-1">
						<div class="avatar">
							<img src="https://antergos.info/apps/{% if pkg.short_name != '' %}{{ pkg.short_name }}{% else %}{{ pkg.name }}{% endif %}.png" class="profile-avatar" width="48" height="48" onError="this.onerror=null;this.src='https://antergos.info/apps/archpkg.png';"/>
						</div>
					</div>
					<div class="col-md-4">
						<div class="personal">
							<h1 class="name">{{ pkg.name }}</h1>

							<p class="description">{{ pkg.pkgdesc }}<p>
						</div>
					</div>
					<div class="col-md-6">

						<div class="row">
							{% if build_counts %}
								{% for build_count in build_counts %}
									{{ simple_counter(build_count[1], build_count[0], build_count[2]) }}
								{% endfor %}
							{% endif %}
						</div>
						<div class="row">
							<div class="col-md-12">
								<h3 style="margin-top: 10px;margin-bottom: 20px;"></h3>

								<div class="progress">
									<div class="progress-bar progress-bar-success" style="width: {{ pkg.success_rate }}%;">{{ pkg.success_rate|float|round(2) }}% Completed</div>
									<div class="progress-bar progress-bar-danger right" style="width: {{ pkg.failure_rate }}%;">{{ pkg.failure_rate|float|round(2) }}% Failed</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
	<div class="row">
		<div class="col-md-4 col-md-offset-1 pkg_details">
			<div class="tab-container">
				<ul class="nav nav-tabs">
					<li class="active"><a data-toggle="tab" href="#pkg_details">Details</a></li>
					<li class=""><a data-toggle="tab" href="#monitor">Monitor</a></li>
					<li class=""><a data-toggle="tab" href="#pkg_actions">Actions</a></li>
				</ul>
				<div class="tab-content no-padding">
					<div id="pkg_details" class="tab-pane cont no-padding active">
					<div class="list-group">
						<div class="list-group-item">
							<div class="row">
								<div class="col-md-6">
									<p>Version:</p>
								</div>
								<div class="col-md-6">
									<p>{{ pkg.version_str }}</p>
								</div>
							</div>
						</div>
						<div class="list-group-item">
							<div class="row">
								<div class="col-md-6">
									<p>Upstream URL:</p>
								</div>
								<div class="col-md-6">
									<p>{{ pkg.url|urlize() }}</p>
								</div>
							</div>
						</div>
						<div class="list-group-item">
							<div class="row">
								<div class="col-md-6">
									<p>Groups:</p>
								</div>
								<div class="col-md-6">
									{% if pkg.groups %}<p>
										{% for group in pkg.groups %}
											{% set url_base = '/repo/antergos/' %}
											{{ label_tag_link(url_base, group, group, 'info') }}
										{% endfor %}
									{% endif %}</p>
								</div>
							</div>
						</div>
						<div class="list-group-item">
							<div class="row">
								<div class="col-md-6">
									<p>Depends:</p>
								</div>
								<div class="col-md-6 depends"><p>
									{% if pkg.depends %}
										{% for depend in pkg.depends %}
											{% set url_base = '/package/' if depend in _all_packages else '#' %}
											{%  set color_class = 'default' if '#' == url_base else 'info' %}
											{{ label_tag_link(url_base, depend, depend, color_class) }}
										{% endfor %}
									{% endif %}</p>
								</div>
							</div>
						</div>
					</div>
					</div>
					<div id="monitor" class="tab-pane cont no-border">
						{% set readonly = not current_user.is_authenticated %}
						{% set checked = pkg.is_monitored %}
						{% set toggle = toggle_switch(ro_condition=readonly, checked_condition=checked) %}
						{% set items = [('Status', toggle)] %}
						{% if pkg.is_monitored %}
							{% set github = text_with_icon(service_icons_info, 'GitHub') %}
							{% set project_url = 'https://github.com/%s'|format(pkg.mon_project) %}
							{% set repo_url = 'https://github.com/%s/%s'|format(pkg.mon_project, pkg.mon_repo) %}
							{% do items.append(('Service', label_tag_link('/', '#', github, 'default github'))) %}
							{% do items.append(('Type', pkg.mon_type)) %}
							{% do items.append(('Project', '<a href="%s" rel="nofollow">%s</a>'|format(project_url, pkg.mon_project)|safe())) %}
							{% do items.append(('Repo', '<a href="%s" rel="nofollow">%s</a>'|format(repo_url, pkg.mon_repo)|safe())) %}
							{% do items.append(('Last Check', pkg.mon_last_checked)) %}
						{% endif %}
						{{ list_group(items, ['5', '7']) }}
					</div>
					<div id="pkg_actions" class="tab-pane">

					</div>
					<div class="md-overlay"></div>
				</div>
			</div>
		</div>
		<div class="col-md-1" style=""></div>
		<div class="col-md-5" style="">
			{% if tl_events %}
				{{ build_activity_timeline(tl_events, all_pages, page) }}
			{% endif %}
		</div>
		<div class="col-md-1" style=""></div>
	</div>
{% endblock bottomcontent %}

{% block scripts %}

	{{ super() }}
	{{ toggles_init() }}

	{% if user.is_authenticated %}
		<style>
			#monitor .bootstrap-switch-wrapper + .fa {
				font-size: 18px;
				margin-left: 10px;
			}
		</style>
		<script>
			$( window ).on( 'load', function() {
				$( '#monitor .switch' ).on( 'switchChange.bootstrapSwitch', function( event, state ) {
					var $wrapper = $(event.target).parents('.bootstrap-switch-wrapper'),
						$spinner = $('<span class="fa fa-spinner fa-pulse">').insertAfter( $wrapper );

					state = state ? 'True' : 'False';

					$.ajax( '/api/package/{{ pkg.pkgname }}', {
						method: 'POST',
						data: {is_monitored: state},
						success: function( result ) {
							setTimeout(function() {
								$spinner
									.fadeOut()
									.addClass('fa-check')
									.removeClass('fa-spin fa-pulse')
									.css('color', '#19B698')
									.detach()
									.insertAfter( $wrapper )
									.fadeIn( setTimeout( function() {
										$spinner
											.fadeOut()
											.remove();
									}, 2000 ));
							}, 2000 );

						},
						error: function ( result ) {
							setTimeout( function () {
								$spinner
									.fadeOut()
									.addClass( 'fa-times' )
									.removeClass( 'fa-spin fa-pulse' )
									.css( 'color', '#EA6153' )
									.detach()
									.insertAfter( $wrapper )
									.fadeIn( setTimeout( function () {
										$spinner
											.fadeOut()
											.remove();
									}, 2000 ) );
							}, 2000 );
						}
					});
				});
			});
		</script>
	{% endif %}

{% endblock scripts %}