{% extends 'base.html' %}
{% block content %}
<h2 class="fw-bold mb-4">Your Shopping Cart</h2>

{% if cart %}
<div class="card border-0 shadow-sm rounded-4 p-4">
    <table class="table table-borderless align-middle">
        <thead class="border-bottom">
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Subtotal</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            {% for prod_id, item in cart.items() %}
            <tr>
                <td><span class="fs-4 me-2">{{ item.image }}</span> <span class="fw-bold">{{ item.name }}</span></td>
                <td>{{ currency }} {{ item.price }}</td>
                <td>{{ item.qty }}</td>
                <td class="fw-bold text-success">{{ currency }} {{ item.price * item.qty }}</td>
                <td>
                    <a href="{{ url_for('web.remove_from_cart', product_id=prod_id) }}"
                        class="btn btn-sm btn-outline-danger rounded-pill">Remove</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <div class="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
        <h4 class="fw-bold">Total: {{ currency }} {{ total }}</h4>
        <a href="{{ url_for('web.checkout') }}" class="btn btn-success btn-lg rounded-pill px-5 fw-bold">Proceed to
            Checkout</a>
    </div>
</div>
{% else %}
<div class="text-center py-5">
    <h1 style="font-size: 80px;">🛒</h1>
    <h3 class="text-muted mt-3">Your cart is empty</h3>
    <a href="/" class="btn btn-primary rounded-pill mt-3 px-4">Continue Shopping</a>
</div>
{% endif %}
{% endblock %}