<!--List of all applications available on the server-->
<div class="wrapper">
	<h2>All applications</h2>
	<table class="overview">
		<thead>
			<tr class="even">
				<th>Name</th>
				<th>Framework</th>
				<th>Controller</th>
				<th>Platforms</th>
				<th># of parameters</th>
				<th># of images</th>
				<th>Visible</th>
				<th>Edit</th>
				<th>Delete</th>
			</tr>
		</thead>
		<tbody>
		<%
		$.each(apps, function (index, a) { %>
		<tr id="<%-a.id%>">
			<td>
				<%- a.name %>
			</td>
			<td>
				<%- a.framework === undefined ? '&ndash;' : a.framework.name + ':' + a.framework.configuration %>
			</td>
			<td>
				<%= a.controller === undefined ? '&#x2717' : '&#x2713;' %>
			</td>
			<td>
				<%- Object.keys(a.runtime) %>
			</td>
			<td>
				<%- a.parameters === undefined ? '0' : a.parameters.length %>
			</td>
			<td>
				<a href="#" class="images" data-id="<%-a.id%>"><%- a.images === undefined ? '0' : Object.keys(a.images).length %></a>
			</td>
			<td>
				<a data-id="<%-a.id%>" href="#" class="<%- a.visible ? 'makeInvisible' : 'makeVisible' %>">
					<%= a.visible ? "&#x2713;" : "&#x2717" %>
				</a>
			</td>
			<td>
				<a data-id="<%-a.id%>" href="#" class="edit ui-icon ui-icon-pencil">
					Edit
				</a>
			</td>
			<td>
				<a data-id="<%-a.id%>" href="#" class="delete ui-icon ui-icon-minusthick">
					Delete
				</a>
			</td>
		</tr>
		<%});%>
		</tbody>
	</table>
	<div class="allwidth"><button class="large" id="add-application">Add application</button></div>
</div>