<div class="d-flex justify-content-between flex-wrap flex-md nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">Search</h1>
  <div class="btn-toolbar mb-2 mb-md 0">
    <div class="btn-group me-2">
      <a href="/add" class="btn btn-sm btn-outline-secondary">+ New User</a>
    </div>
  </div>
</div>

<div class="table-responsive">
  <% if (customers != "") { %>
  
    <table class="table table-striped table-sm">
      <thead>
        <tr>
          <th scope="col">First Name</th>
          <th scope="col">Last Name</th>
          <th scope="col">Tel</th>
          <th scope="col">Email Name</th>
          <th scope="col">Action</th>
        </tr>
      </thead>
      <tbody>
        <% customers.forEach(element => { %>
          <tr class="align-middle">
            <td><%= element.firstName %></td>
            <td><%= element.lastName %></td>
            <td><%= element.tel %></td>
            <td><%= element.email %></td>
            <td>

              <div class="d-flex flex-row justify-content-end gap-2">

                <a href="/view/<%= element._id %>" type="button" class="btn btn-primary btn-small">
                  <i class="bi bi-eye"></i>
                </a>
  
                <a href="/edit/<%= element._id %>" type="button" class="btn btn-warning btn-small">
                  <i class="bi bi-pencil"></i>
                </a>
  
                <form action="/edit/<%= element._id %>?_method=DELETE" method="POST" class="position-relative">
                  <button type="submit" class="btn btn-danger btn-small">
                    <i class="bi bi-person-x"></i>
                  </button>
                </form>
  
              </div>

            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>

  <% } else { %>
    <h2>No results found.</h2>
  <% } %>

</div>