<div class="card card-info card-outline">
	<div class="card-header">
		<h5 class="m-0">Users active within last {{ config_visitors_counter_ttl }} minutes.</h5>
	</div>
	<div class="card-body">
		<table id="tb_visitors" class="table table-striped table-bordered table-responsive d-md-table">
			<thead>
			<tr>
				<th>IP</th>
				<th>Last visit</th>
				<th>Page</th>
				<th>Browser</th>
			</tr>
			</thead>
			<tbody>
			{% for visitor in visitors %}
				<tr>
					<td>{{ visitor.ip }}</td>
					<td>{{ visitor.lastvisit|date("H:i:s") }}</td>
					<td><a href="{{ visitor.page }}">{{ visitor.page|slice(0, 50) }}</a></td>
					<td>{{ visitor.browser|raw }}</td>
				</tr>
			{% endfor %}
			</tbody>
		</table>
	</div>
</div>
<script>
	$(function () {
		$('#tb_visitors').DataTable()
	})
</script>
