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

{% 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.variant.product %}
                <figure class="item__figure">
                    {% if item.variant.image %}
                    <img class="item__image" src="{{item.variant.image.image.url}}" alt="{{item.variant.image.image}}">
                    {% else %}
                    <img class="item__image" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                    {% endif %}
                </figure>
                <div class="item__info">
                    <h3>{{product.name}}</h3>
                    <h2 class="item__variant">{{ item.variant.name }}</h2>
                {% for key, value in item.options.items %}
                    <p><strong>{{ key }}</strong>: {{ value }}</p>
                {% endfor %}
                    <form class="item__form" action="{% url 'storefront:cart-detail' %}" method="POST">
                        {% csrf_token %}
                        {{ item|initialize_update_form:forloop.counter0 }}
                        <input type="submit" value="Update">
                    </form>
                    <p><a href="{% url 'storefront:cart-remove' forloop.counter0 %}">Remove item</a></p>
                </div>
                <div class="item__price">
                    <p>
                        <strong>${{ item.variant.price }}</strong>
                        {% if cart.coupon and cart.coupon.type == 'specific_product' and item.variant in cart.coupon.variants.all %}
                        <br>Coupon: {{ cart.coupon.name }} <span>({{cart.coupon.discount_value}} {{cart.coupon.get_discount_value_type_display}})</span>
                        {% endif %}
                    </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="btn">
                </p>
            </form>
            <div class="cart__table-wrapper">
                <table class="cart__totals">
                    <tr>
                        <td>Subtotal</td>
                        <td>${{ cart.subtotal_price }}</td>
                    </tr>
                    {% if cart.coupon and cart.coupon.type == 'entire_order' %}
                    <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.subtotal_price_after_discount}}</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="btn" href="{% url 'storefront:checkout-address' %}">Proceed to Checkout</a>{% endif %}
            </p>
        </div>
    </section>
</article>
{% endblock %}
