<%- include('partials/header') %>

<div align='center'>
<h1>The Cutlery Shop</h1>

<div class="resize shadow padded">
<table id="cutlery-table" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Price</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
</div>

<script>
$(document).ready(function () {

  localStorage.setItem('cutleries', '<%- JSON.stringify(cutleries) %>')

  let cutleries = JSON.parse(localStorage.getItem('cutleries')).data

  $.each(cutleries, function(_, cutlery) {
    $('#cutlery-table tbody').append(`
      <tr>
        <td>${cutlery.id}</td>
        <td>${cutlery.name}</td>
        <td>${cutlery.price}</td>
        <td>
          <a href="/edit/${cutlery.id}" class="btn btn-primary">Edit</a>
          <a href="/delete/${cutlery.id}" class="btn btn-danger">Delete</a>
        </td>
      </tr>
    `)
  })
  $('#cutlery-table').DataTable();
});

</script>

<%- include('partials/footer') %>
