<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5"
      lang="en">
<head th:replace="fragments/loggedInNav :: head(~{::title}, ~{}, ~{})">
  <meta charset="UTF-8">
  <title>ITems | Employee List</title>
</head>

<body>

<div th:block sec:authorize="!isAuthenticated()" th:replace="fragments/loggedOutNav :: nav(~{::navbar})"></div>
<div th:block sec:authorize="isAuthenticated()" th:replace="fragments/loggedInNav :: nav(~{::navbar})"></div>

<header class="masthead bg-light mb-3 border-bottom" >
  <div class="container">
    <div class="row gx-4 gx-lg-5 justify-content-center text-center">
      <div class="col-md-10 col-lg-8 col-xl-7">
        <div class="site-heading">
          <h1 class="mb-5 mt-5">ITems</h1>
        </div>
      </div>
    </div>
  </div>
</header>

<main>
  <div class="container w-auto">
    <h3>Employee List</h3>
    <hr/>
    <div th:if="${message}" th:text="${message}" class="alert alert-success" role="alert"/>
    <a th:href="@{/admin/register}" class="btn btn-info mb-2">Add New Employee</a>
    <div class="table-responsive-sm">
      <table class="border rounded-2 table table-striped table-hover mt-3 align-middle" id="userTable">
        <thead>
        <tr>
          <th scope="col">Employee Id</th>
          <th scope="col">Last Name</th>
          <th scope="col">First Name</th>
          <th scope="col">Email</th>
          <th scope="col">Department</th>
          <th scope="col">Location</th>
          <th scope="col">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr scope="row" th:each="employee: ${employees}">
          <td th:text="${employee.id}"></td>
          <td th:text="${employee.lastName}"></td>
          <td th:text="${employee.firstName}"></td>
          <td th:text="${employee.email}"></td>
          <td th:text="${employee.department}"></td>
          <td th:text="${employee.location.locationName}"></td>
          <td>
            <a th:href="@{/admin/updateEmployee(employeeId=${employee.id})}" class="btn btn-info m-1 w-100">Update</a>
            <a th:href="@{/admin/deleteEmployee(employeeId=${employee.id})}" class="btn btn-danger m-1 w-100">Delete</a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</main>
<div th:block th:replace="fragments/loggedInNav :: footer(~{::footer})"></div>

<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.11.3/datatables.min.js"></script>
<script>
  $(document).ready(function() {
    $("#userTable").DataTable({
      'aoColumnDefs': [{
        'bSortable': false,
        'aTargets': [-1] /* 1st one, start by the right */
      }]
    });
  })
</script>
</body>
</html>