<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <h1 class="text-2xl font-bold text-gray-800 mb-6">Shopping Cart</h1>

  <% if (typeof items !== 'undefined' && items && items.length) { %>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- Cart Items -->
      <div class="lg:col-span-2 space-y-4">
        <% items.forEach(function(item) { %>
          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 flex items-center gap-4">
            <div class="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
              <% if (item.Product && item.Product.images && item.Product.images.length) { %>
                <img src="<%= item.Product.images[0].imagePath %>" class="w-full h-full object-cover">
              <% } else { %>
                <div class="w-full h-full flex items-center justify-center text-gray-400"><i class="fas fa-image"></i></div>
              <% } %>
            </div>
            <div class="flex-1 min-w-0">
              <a href="/products/<%= item.Product.slug %>" class="font-medium text-gray-800 hover:text-indigo-600 truncate block"><%= item.Product.name %></a>
              <% if (item.ProductVariant) { %>
                <p class="text-xs text-gray-500"><%= item.ProductVariant.type %>: <%= item.ProductVariant.value %></p>
              <% } %>
              <p class="text-sm text-indigo-600 font-medium mt-1">₹<%= parseFloat(item.unitPrice).toFixed(2) %></p>
            </div>
            <form action="/cart/update" method="POST" class="flex items-center">
              <input type="hidden" name="itemId" value="<%= item.id %>">
              <div class="flex items-center border border-gray-300 rounded">
                <button type="button" onclick="this.nextElementSibling.stepDown(); this.closest('form').submit()" class="px-2 py-1 text-sm text-gray-500">-</button>
                <input type="number" name="quantity" value="<%= item.quantity %>" min="1" max="99" class="w-12 text-center py-1 text-sm border-x border-gray-300" onchange="this.closest('form').submit()">
                <button type="button" onclick="this.previousElementSibling.stepUp(); this.closest('form').submit()" class="px-2 py-1 text-sm text-gray-500">+</button>
              </div>
            </form>
            <p class="font-bold text-gray-800 w-24 text-right">₹<%= (parseFloat(item.unitPrice) * item.quantity).toFixed(2) %></p>
            <form action="/cart/remove" method="POST">
              <input type="hidden" name="itemId" value="<%= item.id %>">
              <button type="submit" class="text-red-400 hover:text-red-600"><i class="fas fa-trash"></i></button>
            </form>
          </div>
        <% }) %>
      </div>

      <!-- Cart Summary -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 h-fit sticky top-24">
        <h3 class="font-semibold text-gray-800 mb-4">Order Summary</h3>
        
        <!-- Coupon -->
        <% if (typeof coupon !== 'undefined' && coupon) { %>
          <div class="bg-green-50 border border-green-200 rounded-lg p-3 mb-4 flex justify-between items-center">
            <div>
              <p class="text-sm font-medium text-green-700">Coupon: <%= coupon.code %></p>
              <p class="text-xs text-green-600">
                <%= coupon.type === 'fixed' ? '₹' + parseFloat(coupon.value).toFixed(2) + ' OFF' : coupon.value + '% OFF' %>
              </p>
            </div>
            <form action="/cart/coupon/remove" method="POST">
              <button type="submit" class="text-red-500 text-sm hover:text-red-700"><i class="fas fa-times"></i></button>
            </form>
          </div>
        <% } else { %>
          <form action="/cart/coupon" method="POST" class="flex gap-2 mb-4">
            <input type="text" name="code" placeholder="Coupon code" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm">
            <button type="submit" class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm hover:bg-gray-700">Apply</button>
          </form>
        <% } %>

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

        <a href="/checkout" class="block text-center bg-indigo-600 text-white py-3 rounded-lg font-medium hover:bg-indigo-700 transition mt-6">
          Proceed to Checkout
        </a>
        <a href="/products" class="block text-center text-indigo-600 text-sm mt-3 hover:underline">
          Continue Shopping
        </a>
      </div>
    </div>
  <% } else { %>
    <div class="text-center py-16">
      <i class="fas fa-shopping-cart text-6xl text-gray-300 mb-4"></i>
      <h2 class="text-xl font-medium text-gray-600 mb-2">Your cart is empty</h2>
      <p class="text-gray-400 mb-6">Looks like you haven't added anything yet.</p>
      <a href="/products" class="inline-block bg-indigo-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-indigo-700">Start Shopping</a>
    </div>
  <% } %>
</div>
