<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sd="http://www.thymeleaf.org/spring-data">
<head>
	<title>User Center</title>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
</head>

<body>
	<div class="container-fluid">
		<h1>User Center</h1>

		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">Search</h3>
			</div>
			<div class="panel-body">

				<form action="/">

					<div class="form-group col-sm-6">
						<label for="firstname" class="control-label">Firstname:</label>
						<input id="firstname" name="firstname" th:value="${#httpServletRequest.getParameter('firstname')}" type="text" class="form-control" autofocus="autofocus" />
					</div>
					<div class="form-group col-sm-6">
						<label for="lastname" class="control-label">Lastname:</label>
						<input id="lastname" name="lastname" th:value="${#httpServletRequest.getParameter('lastname')}" type="text" class="form-control" autofocus="autofocus" />
					</div>
					<div class="form-group col-sm-6">
						<label for="address.city" class="control-label">City:</label>
						<input id="address.city" name="address.city" th:value="${#httpServletRequest.getParameter('address.city')}" type="text" class="form-control" />
					</div>
					<div class="form-group col-sm-6">
						<label for="address.street" class="control-label">Street:</label>
						<input id="address.street" name="address.street" th:value="${#httpServletRequest.getParameter('address.street')}" type="text" class="form-control" />
					</div>
					<div class="form-group col-sm-6">
						<label for="nationality" class="control-label">Nationality:</label>
						<input id="nationality" name="nationality" th:value="${#httpServletRequest.getParameter('nationality')}" type="text" class="form-control" />
					</div>
					<div class="form-group col-sm-12">
						<button id="submit" type="submit" class="btn btn-default">Submit</button>
					</div>

				</form>
			</div>
		</div>

		<nav class="text-center">
			<div sd:pagination-summary="true">Pagination information</div>
			<ul class="pagination" sd:pagination="full">
				<!-- Pagination created by the Thymeleaf Spring Data dialect, this content is just for mockup -->
				<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
				<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
			</ul>
		</nav>

		<table class="table table-striped">
			<thead>
				<tr>
					<th>#</th>
					<th></th>
					<th><a sd:pagination-sort="firstname">Firstname</a></th>
					<th>Lastname</th>
					<th>Nationality</th>
					<th>City</th>
					<th>Street</th>
					<th>Email</th>
				</tr>	
			</thead>
			<tbody>
				<tr th:each="user : ${users}">
					<td th:text="${users.number * users.size + userStat.index + 1} + '.'">1.</td>
					<td class="text-center">
						<img th:src="${user.picture.small}" class="img-circle" />
					</td>
					<td th:text="${user.firstname}">Firstname</td>
					<td th:text="${user.lastname}">Lastname</td>
					<td th:text="${user.nationality}">Naionality</td>
					<td th:text="${user.address.city}">City</td>
					<td th:text="${user.address.street}">Street</td>
					<td th:text="${user.email}">Email</td>
				</tr>
			</tbody>
		</table>

		<ul class="pagination" sd:pagination="aligned-links"></ul>

	</div>

</body>
</html>