<!DOCTYPE html>
<!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 | Location List</title>
</head>
<body>

<div th:block sec:authorize="isAuthenticated()" th:replace="fragments/loggedInNav :: nav(~{::navbar})"></div>
<div th:block sec:authorize="isAnonymous()" th:replace="fragments/loggedOutNav :: 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">
    <h3>List Locations</h3>
    <hr/>
    <div th:if="${message}" th:text="${message}" class="alert alert-success" role="alert"/>
    <a th:href="@{/admin/addLocation}" class="btn btn-info mb-2">Add Location</a>
    <div class="table-responsive-sm">
      <table class="table table-bordered table-striped align-middle" id="locationTable">
        <thead>
        <tr>
          <th scope="col">Location Name</th>
          <th scope="col">Address</th>
          <th scope="col">City</th>
          <th scope="col">Province</th>
          <th scope="col">Postal Code</th>
          <th scope="col">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr scope="row" th:each="location: ${locations}">
          <td th:text="${location.locationName}"></td>
          <td th:text="${location.address}"></td>
          <td th:text="${location.city}"></td>
          <td th:text="${location.province}"></td>
          <td th:text="${location.postalCode}"></td>
          <td>
            <a th:href="@{/admin/updateLocation(locationId=${location.id})}" class="btn btn-info m-1 w-100">Update</a>
            <a th:href="@{/admin/deleteLocation(locationId=${location.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/bs4/jq-3.6.0/dt-1.11.3/datatables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("#locationTable").DataTable({
      'aoColumnDefs':[{
        'bSortable': false,
        'aTargets':[-1]
      }]
    });
  })
</script>
</body>
</html>