<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th>Biển Số Xe</th>
        <th>Tên Xe</th>
        <th>Trạng Thái</th>
        <th style="text-align: right;">Hành Động</th>
      </tr>
    </thead>
    <tbody>
      <% if (vehicles.length === 0) { %>
        <tr>
          <td colspan="4" style="text-align: center; color: var(--text-muted); padding: 3rem 0;">
            Chưa có xe nào trong danh mục này.
          </td>
        </tr>
      <% } else { %>
        <% vehicles.forEach(vehicle => { %>
          <tr>
            <td data-label="Biển Số">
              <span class="v-plate"><%= vehicle.plate_number %></span>
            </td>
            <td data-label="Tên Xe">
              <div style="font-weight: 600;"><%= vehicle.name %></div>
            </td>
            <td data-label="Trạng Thái">
              <% if (vehicle.status === 'available') { %>
                <span class="badge badge-success">Đang Rảnh</span>
              <% } else if (vehicle.status === 'in_use') { %>
                <span class="badge badge-warning">Đang Hoạt Động</span>
              <% } else { %>
                <span class="badge badge-danger">Bảo Dưỡng</span>
              <% } %>
            </td>
            <td style="text-align: right;">
              <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
                <button class="btn btn-secondary btn-sm" 
                  onclick="openEditModal('<%= vehicle.id %>', '<%= vehicle.plate_number %>', '<%= vehicle.name %>', '<%= vehicle.status %>')">
                  <i class="fas fa-edit"></i> Sửa
                </button>
                <form action="/vehicles/delete/<%= vehicle.id %>" method="POST" onsubmit="return confirm('Bạn có chắc chắn muốn xóa xe này?');" style="display: inline;">
                  <button type="submit" class="btn btn-danger btn-sm" <%= vehicle.status === 'in_use' ? 'disabled' : '' %>>
                    <i class="fas fa-trash-alt"></i> Xóa
                  </button>
                </form>
              </div>
            </td>
          </tr>
        <% }) %>
      <% } %>
    </tbody>
  </table>
</div>

<% if (totalPages > 1) { %>
  <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; border-top: 1px dashed var(--border-color); padding-top: 1.25rem;">
    <span style="font-size: 0.85rem; color: var(--text-secondary);">Trang <strong><%= currentPage %></strong> / <%= totalPages %></span>
    <div style="display: flex; gap: 0.5rem;">
      <% if (currentPage > 1) { %>
        <a href="/vehicles?activeTab=<%= activeTab %>&page_<%= type %>=<%= currentPage - 1 %>&<%= pageParams %>" class="btn btn-secondary btn-sm" style="padding: 0.35rem 0.75rem;"><i class="fas fa-chevron-left"></i> Trước</a>
      <% } %>
      <% if (currentPage < totalPages) { %>
        <a href="/vehicles?activeTab=<%= activeTab %>&page_<%= type %>=<%= currentPage + 1 %>&<%= pageParams %>" class="btn btn-secondary btn-sm" style="padding: 0.35rem 0.75rem;">Sau <i class="fas fa-chevron-right"></i></a>
      <% } %>
    </div>
  </div>
<% } %>
