<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">

<head th:replace="~{layouts/common.html :: head}"></head>

<body id="page-top">

	<!-- Navigation -->
	<nav th:replace="~{layouts/common.html :: navbar}"></nav>
 
 	<!-- Content -->
	<div class="content uv-content d-flex" id="uv-wrapper">
		<div class="bg-light border-right" id="uv-sidebar-wrapper" th:replace="~{layouts/sidebar.html :: sidebar}"></div>
		
		<div class="container uv-home-section navVisible" id="uv-content-wrapper">
			<div class="uv-loading-spinner" th:text="#{global.loading}"></div>
			<div class="col-sm-12"></div>
			<div class="uv-container">
				<div class="col-sm-12 uv-table-section">
					<div class="uv-table-subheader">
						<h6 class="uv-table-subheader-h6"><strong th:text="#{admin.stats.sessions.title}">Active Sessions</strong></h6>
					</div>
					<div class="uv-table-title">
					</div>
					<table class="table table-striped table-bordered display responsive no-wrap">
					    <thead>
					        <tr>
					        	<th class="uv-table-no-sort" th:text="#{admin.stats.sessions.id}">Session ID</th>
					        	<th class="uv-table-no-sort" th:text="#{admin.stats.sessions.username}">Username</th>
					        	<th class="uv-table-no-sort" th:text="#{admin.stats.sessions.last}">Last Request</th>
					        	<th class="uv-table-no-sort" th:text="#{admin.stats.sessions.expired}">Expired</th>
					        </tr>
					    </thead>
						<tbody>
							<tr th:each="item,inRowID : ${activeSessions}">
								<td>
									<span th:text="${item.id}"></span>
								</td>
								<td>
									<span th:text="${item.username + ' ('+item.fullName+')' }"></span>
								</td>
								<td>
									<span th:text="${item.lastRequest}"></span>
								</td>
								<td>
									<span th:text="${item.expired}"></span>
								</td>
							</tr>
						</tbody>
						<tfoot>
							<tr class="uv-table-footer-right">
								<td class="uv-table-footer-td" colspan="4">
									<h6 class="uv-table-title-h6">
										<strong> <span th:text="#{admin.stats.sessions.active.total}"> Total active sessions: </span>: <span th:text="${totalActiveSessions}"></span></strong>
										<br>
										<strong><span th:text="#{admin.stats.sessions.expired.total}">Total expired sessions: </span>: <span th:text="${totalExpiredSessions}"></span></strong>
									</h6>
								 </td>
							</tr>
						</tfoot>
					</table>
					<div class="uv-table-subheader">
						<h6 class="uv-table-subheader-h6"><strong th:text="#{admin.stats.pending.title}">Pending emails</strong></h6>
					</div>
					<div class="uv-table-title">
					</div>
					<table class="table table-striped table-bordered display responsive no-wrap">
					    <thead>
					        <tr>
					        	<th class="uv-table-no-sort" th:text="#{admin.stats.pending.username}">Username</th>
					        	<th class="uv-table-no-sort" th:text="#{admin.stats.pending.fullname}">Full name</th>
					        	<th class="uv-table-no-sort" th:text="#{admin.stats.pending.email}">Email</th>
					        </tr>
					    </thead>
						<tbody>
							<tr th:each="item,inRowID : ${pendingEmails}">
								<td>
									<span th:text="${item.username}"></span>
								</td>
								<td>
									<span th:text="${item.fullName}"></span>
								</td>
								<td>
									<span th:text="${item.email}"></span>
								</td>
							</tr>
						</tbody>
						<tfoot>
							<tr class="uv-table-footer-right">
								<td class="uv-table-footer-td" colspan="3">
									<h6 class="uv-table-title-h6">
										<strong><span th:text="#{admin.stats.pending.total}">Total pending emails: </span>: <span th:text="${#lists.size(pendingEmails)}"></span></strong>
									</h6>
								 </td>
							</tr>
						</tfoot>
					</table>
				</div>
			</div>
		</div>
	</div>

	<!-- contactModal -->
	<div th:replace="~{layouts/common.html :: contactModal}"></div>
	
	<!-- Footer -->
	<footer class="uv-footer uv-footer-text" th:replace="~{layouts/common.html :: footer}"></footer>
	
	<script th:src="@{/js/jquery/jquery.min.js}"></script>
	<script th:src="@{/js/bootstrap/bootstrap.min.js}"></script>
	<script th:src="@{/js/fa/all.js}"></script>
	<script th:src="@{/js/jquery/jquery.dataTables.min.js}"></script>
	<script th:src="@{/js/jquery/jquery.dataTables.responsive.min.js}"></script>
	<script th:src="@{/js/jquery/jquery.dataTables.rowReorder.min.js}"></script>
	<script th:src="@{/js/bootstrap/dataTables.bootstrap4.min.js}"></script>
	<script th:src="@{/js/jquery-easing/jquery.easing.min.js}"></script>
	<script th:src="@{/js/saic.js}"></script>
  
	<script type="text/javascript">

		$( document ).ready(function(){ 
			layout = new Layout("No data to display");
			layout.initTableLayout({
				paging: true, 
				language:{
					"lengthMenu": "[[#{admin.stats.table.lengthMenu}]]", 
		            "zeroRecords": "[[#{admin.stats.table.zeroRecords}]]",
		            "info": "[[#{admin.stats.table.info}]]",
		            "infoEmpty": "[[#{admin.stats.table.infoEmpty}]]",
		            "infoFiltered": "[[#{admin.stats.table.infoFiltered}]]",
		            "paginate": {
		                "previous": "[[#{admin.stats.table.previous}]]",
		                "next": "[[#{admin.stats.table.next}]]"
		              	}
					},
				searching: true,
				order: false,
				orderCellsTop: false,
				fixedHeader: false,
				info: false,
				responsive: true,
				initComplete: function(){return true;}
			});
			layout.closeLoadingSpinner(".uv-loading-spinner");
		});
		
		
		
		
	</script>

</body>

</html>
