{% extends 'master.html' %}
{% load static %}

{% block content %}
<div class="container mt-5">
    <h2 class="text-center fw-bold">Your Cart</h2>
    <div class="table-responsive">
        <table class="table table-bordered text-center align-middle shadow-sm">
            <thead class="table-dark">
                <tr>
                    <th>Template</th>
                    <th>Title</th>
                    <th>Description</th>
                    <th>Color</th>
                    <th>Font Style</th>
                    <th>Custom Image</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for item in cart_items %}
                <tr>
                    <td>
                        <img src="{{ item.template.image.url }}" class="img-thumbnail rounded" width="100">
                        <p class="fw-semibold mt-2">{{ item.template.name }}</p>
                    </td>
                    <td>{{ item.title }}</td>
                    <td>{{ item.description }}</td>
                    <td>
                        <div style="background: {{ item.color }}; width: 30px; height: 30px; border-radius: 50%;"></div>
                    </td>
                    <td>{{ item.font_style }}</td>
                    <td>
                        {% if item.image %}
                        <img src="{{ item.image.url }}" class="img-thumbnail rounded" width="100">
                        {% else %}
                        <span class="text-muted">No Image</span>
                        {% endif %}
                    </td>
                    <td>
                        <a href="{% url 'order_payment' item.id %}" class="btn btn-success btn-sm rounded-3">Proceed to Payment</a>
                        <a href="{% url 'remove_from_cart' item.id %}" class="btn btn-danger btn-sm rounded-3">Remove</a>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="7" class="text-center text-muted fw-semibold">Your cart is empty.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}