<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold">Blog Management</h4>
    <a href="/blogs/add" class="btn btn-primary">
      <i class="bi bi-plus-circle"></i> Add Blog
    </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>Title</th>
              <th>Author</th>
              <th>Date</th>
              <th class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% if (blogs.length > 0) { %>
              <% blogs.forEach((blog, index) => { %>
                <tr>
                  <td><%= index + 1 %></td>
                  <td><%= blog.title %></td>
                  <td><%= blog.author %></td>
                  <td><%= blog.createdAt.toDateString() %></td>
                  <td class="text-end">

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

                    <form action="/blogs/delete/<%= blog._id %>?_method=DELETE" 
                          method="POST" 
                          class="d-inline">
                      <button type="submit" 
                              class="btn btn-sm btn-danger"
                              onclick="return confirm('Are you sure?')">
                        Delete
                      </button>
                    </form>

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