<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold text-gray-800">My Account</h1>
    <span class="text-sm text-gray-500">Welcome, <%= user.name %></span>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
    <!-- Sidebar -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
      <nav class="space-y-1">
        <a href="/account" class="flex items-center gap-3 px-4 py-2.5 rounded-lg bg-indigo-50 text-indigo-600 font-medium text-sm">
          <i class="fas fa-tachometer-alt"></i> Dashboard
        </a>
        <a href="/account/orders" class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 text-sm">
          <i class="fas fa-box"></i> Orders
        </a>
        <a href="/account/wishlist" class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 text-sm">
          <i class="fas fa-heart"></i> Wishlist
        </a>
        <a href="/account/profile" class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 text-sm">
          <i class="fas fa-user"></i> Profile
        </a>
      </nav>
    </div>

    <!-- Content -->
    <div class="md:col-span-3">
      <!-- Stats -->
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center">
          <p class="text-3xl font-bold text-indigo-600"><%= typeof recentOrders !== 'undefined' ? recentOrders.length : 0 %></p>
          <p class="text-sm text-gray-500 mt-1">Recent Orders</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center">
          <p class="text-3xl font-bold text-green-600"><%= cartCount %></p>
          <p class="text-sm text-gray-500 mt-1">Cart Items</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center">
          <p class="text-3xl font-bold text-purple-600">0</p>
          <p class="text-sm text-gray-500 mt-1">Wishlist Items</p>
        </div>
      </div>

      <!-- Recent Orders -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex justify-between items-center mb-4">
          <h2 class="font-semibold text-gray-800">Recent Orders</h2>
          <a href="/account/orders" class="text-sm text-indigo-600 hover:underline">View All</a>
        </div>
        <% if (typeof recentOrders !== 'undefined' && recentOrders && recentOrders.length) { %>
          <div class="overflow-x-auto">
            <table class="w-full text-sm">
              <thead>
                <tr class="text-left text-gray-500 border-b">
                  <th class="pb-3 font-medium">Order</th>
                  <th class="pb-3 font-medium">Date</th>
                  <th class="pb-3 font-medium">Status</th>
                  <th class="pb-3 font-medium text-right">Total</th>
                </tr>
              </thead>
              <tbody>
                <% recentOrders.forEach(function(order) { %>
                  <tr class="border-b last:border-0">
                    <td class="py-3"><a href="/account/orders/<%= order.id %>" class="text-indigo-600 hover:underline">#<%= order.orderNumber %></a></td>
                    <td class="py-3 text-gray-500"><%= new Date(order.createdAt).toLocaleDateString('en-IN') %></td>
                    <td class="py-3">
                      <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="py-3 text-right font-medium">₹<%= parseFloat(order.total).toFixed(2) %></td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        <% } else { %>
          <p class="text-gray-400 text-center py-8">No orders yet. <a href="/products" class="text-indigo-600 hover:underline">Start shopping!</a></p>
        <% } %>
      </div>
    </div>
  </div>
</div>
