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

{% block head_title %}Cart | {% endblock %}

{% block content %}
<article>
    <header>
        <h1>Shopping Cart</h1>
    </header>
    <section class="cart__list">
        {% for item in cart %}
            <div class="cart__item">
            {% with product=item.product %}
                <figure class="item__figure">
                    <img class="item__image" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                </figure>
                <div class="item__info">
                    <h3>{{product.name}}</h3>
                    <h5>Grind:</h5>
                {% for key, value in item.variations.items %}
                    <p><strong>{{ key|get_grind_display }}</strong><br>
                        <form class="item__form" action="{% url 'storefront:cart-update' product.pk key %}" method="POST">
                            {% csrf_token %}
                                {{ value.update_quantity_form }}
                                <input type="submit" value="Update">
                                <a href="{% url 'storefront:cart-remove' product.pk key %}">Remove item</a>
                        </form>
                    </p>
                {% endfor %}
                </div>
                <div class="item__price">
                    <p><strong>${{item.price}}</strong></p>
                </div>
            {% endwith %}
            </div>
        {% empty %}
            <div>
                <p>No items in cart yet.</p>
            </div>
        {% endfor %}
    </section>
    <section class="cart__summary">
        <h4>Cart Totals</h4>
        <div>
            <form class="coupon__form" action="{% url 'storefront:coupon-apply' %}" method="post">
                {% csrf_token %}
                <p>
                    {{ coupon_apply_form }}
                    <input type="submit" value="Apply" class="action-button">
                </p>
            </form>
            <div class="cart__table-wrapper">
                <table class="cart__totals">
                    <tr>
                        <td>Subtotal</td>
                        <td>${{ cart.get_total_price|floatformat:"2" }}</td>
                    </tr>
                    {% if cart.coupon %}
                    <tr>
                        <td>Coupon</td>
                        <td>{{cart.coupon.discount_value}} {{cart.coupon.get_discount_value_type_display}}</td>
                    </tr>
                    {% endif %}
                    <tr>
                        <th>Total</th>
                        <td><strong>${{cart.get_subtotal_price_after_discount|floatformat:"2"}}</strong></td>
                    </tr>
                </table>
            </div>
            <p class="cart__proceed">
                <a href="{% url 'storefront:product-list' %}">Continue Shopping</a>{% if cart|length > 0 %}&emsp;or&emsp;<a class="action-button" href="{% url 'storefront:checkout-address' %}">Proceed to Checkout</a>{% endif %}
            </p>
        </div>
    </section>
</article>
{% endblock %}
