<h3>Registered Events - topic <span style="font-family: monospace;">{{topic}}</span></h3>

<div class="row mt-4">
	<div class="col-xs-12 col-md-4">
		<input type="text" class="form-control" ng-model="searchFilter" placeholder="Filter..."/>
	</div>
		
	<div class="col-xs-12 col-md-4 text-center">
		<button class="btn btn-sm btn-outline-primary" ng-if="page <= 0" disabled="disabled">&larr; Prev</button>
		<a class="btn btn-sm btn-outline-primary" href="#!/events/{{(page*1) - 1}}/{{pageSize}}/{{topic}}" ng-if="page > 0">&larr; Prev</a>
		<button class="btn btn-sm btn-outline-primary" ng-if="list.length < pageSize" disabled="disabled">Next &rarr;</button>
		<a class="btn btn-sm btn-outline-primary" href="#!/events/{{(page*1) + 1}}/{{pageSize}}/{{topic}}" ng-if="list.length == pageSize">Next &rarr;</a>
	</div>
		
	<div class="col-xs-12 col-md-4 text-right">
		<a href="#!/events" class="btn btn-sm btn-secondary">
			<i class="fas fa-chevron-left"></i>
			back
		</a>
		<button class="btn btn-sm btn-primary" ng-click="refresh()">
			<i class="fas fa-redo"></i> refresh
		</button>
	</div>
</div>


<table class="table table-striped table-sm small mt-4">
	<thead>
		<tr>
			<th>ID</th>
			<th>Producer</th>
			<th class="text-center">Creation date</th>
			<th class="text-center">Expiry date</th>
			<th>Payload</th>
			<th>Map</th>
		</tr>
	</thead>
	<tbody>
		<tr ng-if="list.length == 0">
			<td colspan="6" class="text-center text-muted">No events</td>
		</tr>
		<tr ng-repeat="s in list | filter: searchFilter">
			<th style="font-family: monospace;">{{s.eventId}}</th>
			<td style="font-family: monospace;">{{s.producerId}}</td>
			<td class="text-center">{{s.creationDate | date:'yyyy-MM-dd HH:mm'}}</td>
			<td class="text-center">{{s.expiryDate ? (s.expiryDate | date:'yyyy-MM-dd HH:mm') : 'never'}}</td>
			<td>{{s.payload}}</td>
			<td style="white-space: pre; font-size: 12px; font-family: monospace;">{{s.map | json}}</td>
		</tr>
	</tbody>
</table>

<div class="text-center">
	<button class="btn btn-sm btn-outline-primary" ng-if="page <= 0" disabled="disabled">&larr; Prev</button>
	<a class="btn btn-sm btn-outline-primary" href="#!/events/{{(page*1) - 1}}/{{pageSize}}/{{topic}}" ng-if="page > 0">&larr; Prev</a>
	<button class="btn btn-sm btn-outline-primary" ng-if="list.length < pageSize" disabled="disabled">Next &rarr;</button>
	<a class="btn btn-sm btn-outline-primary" href="#!/events/{{(page*1) + 1}}/{{pageSize}}/{{topic}}" ng-if="list.length == pageSize">Next &rarr;</a>
</div>
