<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="flex items-center gap-2 mb-6">
    <a href="/account/orders" 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">Order #<%= order.orderNumber %></h1>
  </div>

  <!-- Status -->
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
    <div class="flex flex-wrap items-center justify-between gap-4">
      <div>
        <p class="text-sm text-gray-500">Order Status</p>
        <span class="text-lg font-semibold
          <%= order.status === 'delivered' ? 'text-green-600' : '' %>
          <%= order.status === 'shipped' ? 'text-blue-600' : '' %>
          <%= order.status === 'processing' ? 'text-yellow-600' : '' %>
          <%= order.status === 'pending' ? 'text-gray-600' : '' %>
          <%= order.status === 'cancelled' ? 'text-red-600' : '' %>
        "><%= order.status.charAt(0).toUpperCase() + order.status.slice(1) %></span>
      </div>
      <div class="text-right">
        <p class="text-sm text-gray-500">Payment</p>
        <span class="font-medium"><%= order.paymentMethod.toUpperCase() %> - 
          <span class="<%= order.paymentStatus === 'paid' ? 'text-green-600' : 'text-yellow-600' %>"><%= order.paymentStatus.charAt(0).toUpperCase() + order.paymentStatus.slice(1) %></span>
        </span>
      </div>
      <div class="text-right">
        <p class="text-sm text-gray-500">Order Date</p>
        <span class="font-medium"><%= new Date(order.createdAt).toLocaleDateString('en-IN', { year: 'numeric', month: 'long', day: 'numeric' }) %></span>
      </div>
    </div>
  </div>

  <!-- Items -->
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
    <h2 class="font-semibold text-gray-800 mb-4">Order Items</h2>
    <div class="space-y-4">
      <% order.items.forEach(function(item) { %>
        <div class="flex items-center gap-4 p-4 border border-gray-100 rounded-lg">
          <div class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
            <i class="fas fa-box text-gray-400 text-2xl"></i>
          </div>
          <div class="flex-1">
            <p class="font-medium text-gray-800"><%= item.productName %></p>
            <% if (item.variantInfo) { %><p class="text-xs text-gray-500"><%= item.variantInfo %></p><% } %>
            <p class="text-sm text-gray-500">Qty: <%= item.quantity %> × ₹<%= parseFloat(item.unitPrice).toFixed(2) %></p>
          </div>
          <p class="font-bold text-gray-800">₹<%= parseFloat(item.total).toFixed(2) %></p>
        </div>
      <% }) %>
    </div>

    <hr class="my-4">
    <div class="space-y-2 text-sm">
      <div class="flex justify-between"><span class="text-gray-500">Subtotal</span><span>₹<%= parseFloat(order.subtotal).toFixed(2) %></span></div>
      <% if (parseFloat(order.discountAmount) > 0) { %><div class="flex justify-between text-green-600"><span>Discount</span><span>-₹<%= parseFloat(order.discountAmount).toFixed(2) %></span></div><% } %>
      <div class="flex justify-between"><span class="text-gray-500">Shipping</span><span><%= parseFloat(order.shippingAmount) > 0 ? '₹' + parseFloat(order.shippingAmount).toFixed(2) : 'FREE' %></span></div>
      <div class="flex justify-between"><span class="text-gray-500">Tax</span><span>₹<%= parseFloat(order.taxAmount).toFixed(2) %></span></div>
      <hr>
      <div class="flex justify-between text-lg font-bold"><span>Total</span><span class="text-indigo-600">₹<%= parseFloat(order.total).toFixed(2) %></span></div>
    </div>
  </div>

  <!-- Shipping -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <h2 class="font-semibold text-gray-800 mb-3">Shipping Address</h2>
      <div class="text-sm text-gray-600 space-y-1">
        <p class="font-medium text-gray-800"><%= order.shippingName %></p>
        <p><%= order.shippingPhone %></p>
        <p><%= order.shippingAddress %></p>
        <p><%= order.shippingCity %>, <%= order.shippingState %></p>
        <p>Pincode: <%= order.shippingPincode %></p>
      </div>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <h2 class="font-semibold text-gray-800 mb-3">Billing Address</h2>
      <div class="text-sm text-gray-600 space-y-1">
        <p class="font-medium text-gray-800"><%= order.billingName || order.shippingName %></p>
        <p><%= order.billingAddress || order.shippingAddress %></p>
      </div>
    </div>
  </div>
</div>
