{{#systems}}
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4>{{title}}</h4>
		</div>
		<div class="panel-body" id="download-{{id}}">
			{{#systemChanged}}
			<p>
				{{lang_canUpdate1}} <b>{{title}}</b> {{lang_canUpdate2}}
			</p>
			<p><span class="btn btn-primary" onclick="slxUpdateAll(this, 'download-{{id}}')">{{lang_update}}</span></p>
			{{/systemChanged}}
			{{^systemChanged}}
			<p>{{lang_systemUpdated}}</p>
			{{/systemChanged}}
			<ul class="list-group">
				{{#files}}
				<li class="list-group-item" id="{{uid}}">
					<div class="row">
						<div class="col-sm-2">{{name}}</div>
						<div class="col-xs-2">
							{{^fileChanged}}<span class="glyphicon glyphicon-ok"></span> <b>{{lang_actual}}</b>{{/fileChanged}}
							{{#fileChanged}}<span class="glyphicon glyphicon-exclamation-sign"></span> <b>{{lang_outdated}}</b>{{/fileChanged}}
						</div>
						<div class="col-xs-2">
							{{#fileChanged}}<span class="btn btn-primary btn-xs update-button" onclick="slxUpdate('{{uid}}', '{{id}}', '{{name}}')">{{lang_update}}</span>{{/fileChanged}}
						</div>
					</div>
					{{{download}}}
				</li>
				{{/files}}
			</ul>
		</div>
	</div>
	{{/systems}}
	{{^systems}}
	<div class="row well well-sm">{{lang_configurationPackageNotFound}}</div>
	{{/systems}}

<script type="text/javascript">
function slxUpdate(uid, id, name)
{
	$('#' + uid).html('');
	$('#' + uid).load('?do=MiniLinux',
		{ action : "download", token : TOKEN, id : id, name : name },
		function(response, status, xhr) {
			if (status === "error") {
				var msg = "Fehler beim Abruf: ";
				$('#' + uid).html(msg + xhr.status + " " + xhr.statusText);
			} else {
				setTimeout(tmInit, 100);
			}
		});
}
function slxUpdateAll(t, uid)
{
	$(t).hide(0);
	$('#' + uid).find('.update-button').click();
}
tmInit();
</script>