<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	layout:decorator="layout/mainLayout">

<head>
<title>Products</title>
</head>
<body>

	<div layout:fragment="content">
		<div class="row">
			<div class="col-md-12">
				<div class="box">
					<div class="box-header">
						<h3 class="box-title">List of Products</h3>
						<div class="box-tools">
							<div class="input-group" style="width: 150px;">
								<a class="btn btn-sm btn-default" th:href="@{/products/new}"><i
									class="fa fa-plus-circle"></i> New Product</a>
							</div>
						</div>
					</div>
					<!-- /.box-header -->
					<div class="box-body table-responsive no-padding">
						<table class="table table-hover">
							<tr>
								<th style="width: 10px">#</th>
								<th>ProductId</th>
								<th>Image</th>
								<th>Name</th>
								<th>Available</th>
								<th>Description</th>
								<th>Edit</th>
							</tr>
							<tr th:each="product,iterStat : ${products}">
								<td th:text="${iterStat.count}">1</td>
								<td th:text="${product.id}">Product Id</td>
								<td><img src="assets/img/products/2.jpg" alt="" width="100" height="100" 
		                            		th:src="@{'/assets/img/products/{id}.jpg'(id=${product.id})}"/></td>
								<td th:text="${product.name}">Product Name</td>
								<td th:text="${product.available}">Available</td>
								<td th:text="${product.description}">Product Description</td>
								<td><a th:href="@{/products/{id}(id=${product.id})}"
									class="btn btn-sm btn-default"><i class="fa fa-edit"></i>
										Edit</a></td>
							</tr>

						</table>
					</div>

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

</div>
</body>

</html>