<h5 class="mb-3">
	{{ strings.title }}
	<span class="badge {% if vars.total_sessions > 0 %}bg-info{% else %}bg-secondary{% endif %}">
		{{ vars.total_sessions }}
	</span>
</h5>

{% if vars.total_sessions < 1 %}
	<p>{{ strings.no_sessions }}</p>
{% else %}
	<table class="table">
		<thead class="thead-light">
		<tr>
			<th scope="col">{{ strings.username }}</th>
			<th scope="col">{{ strings.last_activity_at }}</th>
			<th scope="col">{{ strings.logged_in_at }}</th>
		</tr>
		</thead>
		<tbody>
		{% for session in vars.sessions %}
			<tr>
			<td>
				<span>{{ session.user_login }}</span>
				<span>
					{% if session.is_sec_admin %}
						<a class="dashicons dashicons-shield-alt"
						   title="{{ strings.sec_admin }}"
						   data-bs-toggle="tooltip"></a>
					{% endif %}
				</span>
			</td>
			<td>
				{{ session.last_activity_at_ago }}
				<div class="timestamp-small">{{ session.last_activity_at }}</div>
			</td>
			<td>
				{{ session.logged_in_at_ago }}
				<div class="timestamp-small">{{ session.logged_in_at }}</div>
			</td>
		</tr>
		{% endfor %}
		</tbody>
	</table>
{% endif %}