{{ header }}{{ column_left }}
<div id="content">
	<div class="page-header">
		<div class="container-fluid">
			<div class="pull-right">
				<a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a>
			</div>
			<h1>{{ heading_title }} {{ version }}</h1>
			<ul class="breadcrumb">
				{% for breadcrumb in breadcrumbs %}
				<li><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
				{% endfor %}
			</ul>
		</div>
	</div>
	<div class="container-fluid">
		{% if error['warning'] %}
		<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i><button type="button" class="close" data-dismiss="alert">&times;</button> {{ error['warning'] }}</div>
		{% endif %}
		{% if success %}
		<div class="alert alert-success"><i class="fa fa-exclamation-circle"></i><button type="button" class="close" data-dismiss="alert">&times;</button> {{ success }}</div>
		{% endif %}
		<div class="panel panel-default panel-resizable">
			<div class="panel-heading">
				<h3 class="panel-title">{{ text_install }}</h3>
			</div>
			<div class="panel-body panel-setup" style="background-image: url(view/image/{{ codename }}/background.svg)">
				<div class="row">
					<div class="col-md-8 col-md-offset-2 text-center">
						<div class="setup-info">
							<h1 class="title m-t-lg m-b-lg">{{ text_setup }}</h1>
							<p class="description m-b-lg">{{ help_setup }}</p>
							<div class="btn-group m-b-lg" data-toggle="buttons">
								<label class="btn btn-info active" data-toggle="tooltip" title="{{ help_full_setup }}">
									<input type="radio" name="action" value="{{ setup }}" checked="checked" /> {{ text_full_setup }}
								</label>
								<label class="btn btn-info" data-toggle="tooltip" title="{{ help_custom_setup }}">
									<input type="radio" name="action" value="{{ install }}" /> {{ text_custom_setup }}
								</label>
							</div>
							<br/>
							<a action="{{ setup }}" id="button_setup" class="btn btn-danger btn-lg"><i class="fa fa-cog"></i><i class="fa fa-refresh rotate hide"></i> {{ button_setup }}</a>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-8 col-md-offset-2 text-center">
						<div class="features">
							{% for feature in features %}
							<div class="feature info-window-item" data-href="{{ feature['href'] }}">
								<div class="feature-wrap">
									<img src="view/image/{{ feature['image'] }}" class="image" />
									<p class="name">{{ feature['name'] }}</p>
								</div>
							</div>
							{% endfor %}
							<br class="clear"/>
						</div>
					</div>
				</div>
				<img src="view/image/{{ codename }}/planet.svg" class="planet" />
			</div>
		</div>
		<div class="info-window">
			<div class="info-window-wrap">
				<div class="info-window-block">
					<div class="info-window-close"><i class="fa fa-close"></i></div>
					<div class="info-window-description"></div>
				</div>
			</div>
		</div>
		<br class="clear"/>
	</div>
</div>
<script type="text/javascript">

var column_count = 5;
var feature_count = $('.features .feature').length;

$('.features .feature').eq(column_count * Math.floor(feature_count / column_count)).css('margin-left', (column_count - (feature_count % column_count)) * (50 / column_count) + '%');

</script>
<script type="text/javascript">

function showAlert(json) {
	$('.alert, .text-danger').remove();
	$('.form-group').removeClass('has-error');

	if (json['error']) {
		if (json['error']['warning']) {
			$('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i><button type="button" class="close" data-dismiss="alert">&times;</button> ' + json['error']['warning'] + '</div>');
		}

		for (i in json['error']) {
			var element = $('#input_' + i);

			if (element.parent().hasClass('input-group')) {
                $(element).parent().after('<div class="text-danger">' + json['error'][i] + '</div>');
			} else {
				$(element).after('<div class="text-danger">' + json['error'][i] + '</div>');
			}
		}

		$('.text-danger').parents('.form-group').addClass('has-error');
	}

	if (json['success']) {
		$('#content > .container-fluid').prepend('<div class="alert alert-success"><i class="fa fa-check-circle"></i><button type="button" class="close" data-dismiss="alert">&times;</button> ' + json['success'] + '</div>');
	}
}
</script>
<script type="text/javascript">

var info_window = {
	'item' : new Array(),
	'current_url' : ''
}
	
$.each($('.info-window-item'), function(key, value) {
	var url = $(this).attr('data-href');
		
	if (url) {
		$.getJSON(url + '?format=json&callback=?', function(data) {
			info_window.item[url] = data['description'];
		});
	}
});
	
$('.info-window-item').on('click', function() {
	var url = $(this).attr('data-href');
	
	if (url == info_window.current_url) {
		info_window.current_url = '';
		$('.info-window').removeClass('resized');
		$('.panel-resizable').removeClass('resized');
	} else {
		info_window.current_url = url;
		$('.info-window .info-window-description').html(info_window.item[url]);
		$('.panel-resizable').addClass('resized');
		$('.info-window').addClass('resized');
	}
});
	
$('.info-window .info-window-close').on('click', function() {
	info_window.current_url = '';
	$('.info-window').removeClass('resized');
	$('.panel-resizable').removeClass('resized');
});

$('body').on('click', '#button_setup', function(){
	$.ajax({
		type: 'post',
		url: $('[name="action"]:checked').val(),
		data: '',
		dataType: 'json',
		beforeSend: function() {
			$('#button_setup .fa-refresh').removeClass('hide');
			$('#button_setup .fa-cog').addClass('hide');
		},
		complete: function() {
			$('#button_setup .fa-refresh').addClass('hide');
			$('#button_setup .fa-cog').removeClass('hide');
		},
		success: function(json) {
			showAlert(json);
			
			if (json['success']) {
				location = '{{ module_link|replace({"&amp;" : "&"}) }}';
			}
		},
		error: function(xhr, ajaxOptions, thrownError) {
			console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
    });
});

</script>
{{ footer }}