<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="flex items-center gap-2 mb-6">
    <a href="/account" class="text-gray-500 hover:text-indigo-600"><i class="fas fa-arrow-left"></i></a>
    <h1 class="text-2xl font-bold text-gray-800">My Orders</h1>
  </div>

  <% if (typeof orders !== 'undefined' && orders && orders.length) { %>
    <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">Date</th>
            <th class="px-6 py-4 font-medium">Items</th>
            <th class="px-6 py-4 font-medium">Status</th>
            <th class="px-6 py-4 font-medium text-right">Total</th>
            <th class="px-6 py-4 font-medium text-right">Action</th>
          </tr>
        </thead>
        <tbody>
          <% 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 text-gray-500"><%= new Date(order.createdAt).toLocaleDateString('en-IN') %></td>
              <td class="px-6 py-4"><%= order.items ? order.items.length : 0 %></td>
              <td class="px-6 py-4">
                <span class="px-2 py-1 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.charAt(0).toUpperCase() + order.status.slice(1) %></span>
              </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="/account/orders/<%= order.id %>" class="text-indigo-600 hover:underline text-sm">View</a>
              </td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <% 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 %>" 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>
    <% } %>
  <% } else { %>
    <div class="text-center py-16 bg-white rounded-xl shadow-sm border border-gray-200">
      <i class="fas fa-box-open text-5xl text-gray-300 mb-4"></i>
      <h3 class="text-lg font-medium text-gray-600">No orders yet</h3>
      <a href="/products" class="inline-block mt-4 bg-indigo-600 text-white px-6 py-2 rounded-lg text-sm hover:bg-indigo-700">Start Shopping</a>
    </div>
  <% } %>
</div>
