<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold">Manage Projects</h4>
    <a href="/projects/add" class="btn btn-primary">
      Add Project
    </a>
  </div>

  <div class="card shadow-sm border-0">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-hover align-middle">
          <thead class="table-light">
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Category</th>
              <th>Date</th>
              <th class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% if (projects.length > 0) { %>
              <% projects.forEach((project, index) => { %>
                <tr>
                  <td><%= index + 1 %></td>
                  <td><%= project.name %></td>
                  <td><%= project.category %></td>
                  <td><%= project.createdAt.toDateString() %></td>
                  <td class="text-end">

                    <a href="/projects/edit/<%= project._id %>" 
                       class="btn btn-sm btn-warning">
                       Edit
                    </a>

                    <form action="/projects/delete/<%= project._id %>?_method=DELETE" 
                          method="POST" 
                          class="d-inline">
                      <button class="btn btn-sm btn-danger"
                              onclick="return confirm('Delete this project?')">
                        Delete
                      </button>
                    </form>

                  </td>
                </tr>
              <% }) %>
            <% } else { %>
              <tr>
                <td colspan="5" class="text-center text-muted">
                  No Projects Found
                </td>
              </tr>
            <% } %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
