<!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>Categories</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 Categories</h3>
                  <div class="box-tools">
                    <div class="input-group" style="width: 150px;">
                    	<a class="btn btn-sm btn-default" th:href="@{/categories/new}"><i class="fa fa-plus-circle"></i> New Category</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>Category Id</th>
                      <th>Category Name</th>
                      <th>Sub-Category Name</th>
                      <th>Edit</th>
                    </tr>
                    <tr th:each="cat,iterStat : ${categories}">
                      <td th:text="${iterStat.count}">1</td>
                      <td th:text="${cat.key.id}">Category Id</td>
                      <td th:text="${cat.key.name}">Category Name</td>
                      <td><select th:field="*{categories}">
									<option
										th:each="subcate: ${cat.value}"
										th:value="${subcate.name}" th:text="${subcate.name}">SubCategory</option>
								</select></td>
                      <td><a th:href="@{/categories/{id}(id=${cat.key.id})}" class="btn btn-sm btn-default"><i class="fa fa-edit"></i> Edit</a></td>
                    </tr>
                    
                  </table>
                </div><!-- /.box-body -->
                
              </div><!-- /.box -->
              </div>
              </div>
              
    	</div>
    	
    </body>
    
</html>