<%- layout('layout/dashboard-template')%>
<div class="">
  <h1>Products</h1>
  <div class="d-flex justify-content-center align-items-center">
    <h5 class="px-3">Filter by:</h5>
    <button class="btn btn-primary btn-sm mx-2" data-bs-toggle="collapse"
    data-bs-target="#small-pack" aria-expanded="false"
    aria-controls="small-pack">Small Pack</button>
    <button class="btn btn-primary btn-sm mx-2" data-bs-toggle="collapse"
      data-bs-target="#big-pack" aria-expanded="false"
      aria-controls="big-pack">Big Pack</button>
    <button class="btn btn-primary btn-sm mx-2" data-bs-toggle="collapse"
      data-bs-target="#combo-pack" aria-expanded="false"
      aria-controls="combo-pack">Combo Pack</button>
  </div>


  <table class="table">
    <thead class="table-light">
      <tr>
        <th scope="col"></th>
        <th scope="col">Product Name</th>
        <th scope="col">Intensity</th>
        <th scope="col">Weight</th>
        <th scope="col">Price</th>
        <th scope="col"></th>
      </tr>
    </thead>

    <!-------- BIG PACKS' PRODUCTS ---------------->
    <tbody class="table-primary collapse" id="big-pack">
      <% for (let product of products) { %>
      <% if (product.category === 'big') { %>
      <tr>
        <th scope="row"><a class="btn btn-primary btn-sm"
          href="/dashboard/products/<%= product._id %>/edit">
            Edit</a></th>
        <td><%= product.name %></td>
        <td><%= product.intensity %></td>
        <td><%= product.weight %></td>
        <td><%= product.price %></td>
        <td>
          <form class="" action="/dashboard/suppliers?_method=DELETE" method="post">
            <button class="btn btn-danger btn-sm">Delete</button>
          </form>
        </td>
      </tr>
      <% } else { break } %>
      <% } %>
    </tbody>

    <!-------- COMBO PACKS' PRODUCTS ---------------->
    <tbody class="table-primary collapse" id="combo-pack">
      <% for (let product of products) { %>
      <% if (product.category === 'combo') { %>
      <tr>
        <th scope="row"><a class="btn btn-primary btn-sm" href="/dashboard/products/<%= product._id %>/edit">
            Edit</a></th>
        <td><%= product.name %></td>
        <td><%= product.intensity %></td>
        <td><%= product.weight %></td>
        <td><%= product.price %></td>
        <td>
          <form class="" action="/dashboard/suppliers?_method=DELETE" method="post">
            <button class="btn btn-danger btn-sm">Delete</button>
          </form>
        </td>
      </tr>
      <% } else { break } %>
      <% } %>
    </tbody>

  <tbody class="table-primary collapse" id="small-pack">
    <% for (let product of products) { %>
    <% if (product.category === 'small') { %>
    <tr>
      <th scope="row"><a class="btn btn-primary btn-sm"
        href="/dashboard/products/<%= product._id %>/edit">Edit</a></th>
      <td><%= product.name %></td>
      <td><%= product.intensity %></td>
      <td><%= product.weight %></td>
      <td><%= product.price %></td>
      <td>
        <form class="" action="/dashboard/suppliers?_method=DELETE" method="post">
          <button class="btn btn-danger btn-sm">Delete</button>
        </form>
      </td>
    </tr>
    <% } else { break } %>
    <% } %>
  </tbody>
</table>

  <a class="btn btn-primary btn-sm"
  href="/dashboard/products/new">Add new</a>
</div>
