{% extends "base.html" %}
{% block title %}Cart — KiwiCrib{% endblock %}
{% block content %}
<h1 class="text-2xl font-bold mb-4">Your Cart</h1>
{% if not cart %}
<p>Your cart is empty.</p>
{% else %}
<table class="min-w-full border">
    <thead>
        <tr class="bg-gray-100">
            <th class="border px-2 py-1">Product</th>
            <th class="border px-2 py-1">Qty</th>
            <th class="border px-2 py-1">Unit Price</th>
            <th class="border px-2 py-1">Total</th>
        </tr>
    </thead>
    <tbody>
        {% for item in cart %}
        <tr class="border-t">
            <td class="border px-2 py-1">
                {{ item.product.name }}
                {% if item.options %}
                <ul class="text-sm text-gray-600">
                    {% for key, val in item.options.items %}
                    <li>{{ key|title }}: {{ val }}</li>
                    {% endfor %}
                </ul>
                {% endif %}
            </td>
            <td class="border px-2 py-1">{{ item.quantity }}</td>
            <td class="border px-2 py-1">${{ item.unit_price }}</td>
            <td class="border px-2 py-1">${{ item.total_price }}</td>
        </tr>
        {% endfor %}
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3" class="text-right font-bold border px-2 py-1">Cart Total</td>
            <td class="border px-2 py-1 font-bold">${{ cart.total_price }}</td>
        </tr>
    </tfoot>
</table>
<div class="mt-4">
    <a href="{% url 'orders:checkout' %}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">Proceed to Checkout</a>
</div>
{% endif %}
{% endblock %}