<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold text-gray-800">Orders</h1>
  <div class="flex gap-2">
    <a href="?status=pending" class="px-3 py-1.5 rounded-lg text-sm border <%= status === 'pending' ? 'bg-indigo-600 text-white border-indigo-600' : 'border-gray-300 text-gray-600 hover:bg-gray-50' %>">Pending</a>
    <a href="?status=processing" class="px-3 py-1.5 rounded-lg text-sm border <%= status === 'processing' ? 'bg-indigo-600 text-white border-indigo-600' : 'border-gray-300 text-gray-600 hover:bg-gray-50' %>">Processing</a>
    <a href="?status=shipped" class="px-3 py-1.5 rounded-lg text-sm border <%= status === 'shipped' ? 'bg-indigo-600 text-white border-indigo-600' : 'border-gray-300 text-gray-600 hover:bg-gray-50' %>">Shipped</a>
    <a href="?status=delivered" class="px-3 py-1.5 rounded-lg text-sm border <%= status === 'delivered' ? 'bg-indigo-600 text-white border-indigo-600' : 'border-gray-300 text-gray-600 hover:bg-gray-50' %>">Delivered</a>
    <a href="/admin/orders" class="px-3 py-1.5 rounded-lg text-sm border border-gray-300 text-gray-600 hover:bg-gray-50">All</a>
  </div>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
  <table class="w-full text-sm">
    <thead class="bg-gray-50">
      <tr class="text-left text-gray-500">
        <th class="px-6 py-4 font-medium">Order #</th>
        <th class="px-6 py-4 font-medium">Customer</th>
        <th class="px-6 py-4 font-medium">Date</th>
        <th class="px-6 py-4 font-medium">Status</th>
        <th class="px-6 py-4 font-medium">Payment</th>
        <th class="px-6 py-4 font-medium text-right">Total</th>
        <th class="px-6 py-4 font-medium text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      <% if (typeof orders !== 'undefined' && orders && orders.length) { %>
        <% orders.forEach(function(order) { %>
          <tr class="border-t hover:bg-gray-50">
            <td class="px-6 py-4 font-medium"><%= order.orderNumber %></td>
            <td class="px-6 py-4"><%= order.shippingName || 'N/A' %></td>
            <td class="px-6 py-4 text-gray-500"><%= new Date(order.createdAt).toLocaleDateString('en-IN') %></td>
            <td class="px-6 py-4">
              <span class="px-2 py-0.5 rounded-full text-xs font-medium
                <%= order.status === 'delivered' ? 'bg-green-100 text-green-700' : '' %>
                <%= order.status === 'shipped' ? 'bg-blue-100 text-blue-700' : '' %>
                <%= order.status === 'processing' ? 'bg-yellow-100 text-yellow-700' : '' %>
                <%= order.status === 'pending' ? 'bg-gray-100 text-gray-700' : '' %>
                <%= order.status === 'cancelled' ? 'bg-red-100 text-red-700' : '' %>
              "><%= order.status %></span>
            </td>
            <td class="px-6 py-4"><%= order.paymentMethod %> / <%= order.paymentStatus %></td>
            <td class="px-6 py-4 text-right font-medium">₹<%= parseFloat(order.total).toFixed(2) %></td>
            <td class="px-6 py-4 text-right">
              <a href="/admin/orders/<%= order.id %>" class="text-indigo-600 hover:underline text-sm">View</a>
            </td>
          </tr>
        <% }) %>
      <% } else { %>
        <tr><td colspan="7" class="px-6 py-12 text-center text-gray-400">No orders found.</td></tr>
      <% } %>
    </tbody>
  </table>
</div>

<% if (typeof totalPages !== 'undefined' && totalPages > 1) { %>
  <div class="flex justify-center mt-6 gap-2">
    <% for (let p = 1; p <= totalPages; p++) { %>
      <a href="?page=<%= p %><%= status ? '&status='+status : '' %>" class="px-4 py-2 rounded-lg text-sm <%= p === currentPage ? 'bg-indigo-600 text-white' : 'bg-white border border-gray-300 text-gray-600' %>"><%= p %></a>
    <% } %>
  </div>
<% } %>
