{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="container my-5">
    <h1 class="mb-4">Shopping Cart</h1>
    {% if cart_items %}
    <table class="table">
        <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            {% for item in cart_items %}
            <tr>
                <td>{{ item.product.name }}</td>
                <td>${{ item.product.price }}</td>
                <td>{{ item.quantity }}</td>
                <td>${{ item.total }}</td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <th colspan="3" class="text-end">Total:</th>
                <th>${{ cart_total }}</th>
            </tr>
        </tfoot>
    </table>
    <div class="d-flex justify-content-end">
        <a href="{% url 'checkout' %}" class="btn btn-primary">Checkout</a>
    </div>
    {% else %}
    <p>Your cart is empty.</p>
    {% endif %}
</div>
{% endblock %}