{% extends 'layout.html' %}

{% block title %} Application: {% endblock %}

{% block content %}

<div class="row">
	<div class="col-md-6 col-md-offset-3">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h2><center> {{ app[0] }} </center></h2>
			</div>
			<div class="panel-body">
				<table class="table table-hover">
					<tbody>
						<tr>
							<th>Description</th> 
							<th> {{ app[3] }} </th>
						</tr>
						<tr>
							<th>app-key</th>
							<th> {{ app[1] }} </th>
						</tr>
					</tbody>
				</table>
			</div>

			{% if devs %}
			<h3><center>Devices:</center></h3>
			<ol class="list-group">
				{% for dev in devs %}
				<a href="/dev?id={{ dev[1] }}"><li class="list-group-item"><strong> {{ dev[0] }} </strong></li></a>
				{% endfor %}
			</ol>
			{% else %}
			<h3><center> No registed devices </center></h3>
			{% endif %}

			<br><br>
			
			<center>	
			<a href="/add-dev"><button type="submit" class="btn btn-primary">Add Device</button></a>
			<a href="/delete-app"><button type="submit" class="btn btn-danger" onclick="return conf();">Delete Application</button></a>
			</center>
			<br>
		</div>	
	</div>
</div>

<script type="text/javascrypt">
function conf() {
	return confirm("Are you sure? It will remove all devices and data.")
}
</script>

{% endblock %}