<div class='container'>
	<div class="row">
		<div class="col-md-12">
			<h1>Event History</h1>
			<dir-pagination-controls on-page-change="loadEventPageData(newPageNumber)" max-size="15"></dir-pagination-controls>
		</div>
	</div>


	<div class='row'>
		<div class='col-md-12'>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>Date</th>
						<th>Device Name</th>
						<th>Type</th>
						<th>Condition</th>
					</tr>
				</thead>
				<tbody>
					<tr dir-paginate="e in event_data | itemsPerPage:per_page" total-items="total" current-page="page_num">
						<td nowrap>{{ e.created_on | date:'medium'}}</td>
						<td nowrap>{{ e.event.name }}</td>
						<td nowrap>{{ e.event_type }}</td>
						<td nowrap>{{ e.event_condition }}</td>
					</tr>
				</tbody>
			</table>
			<div ng-if="event_data.length==0" class="well" style="text-align:center">No stored events yet.</div>
		</div>
	</div>
</div>
