{% extends "base.html" %}

{% block content %}
<article>
    <section>
        <p>{{user}}</p>

        {% for item in cart %}
            <div class="cart__item">
            {% with product=item.product %}
                <figure class="item__figure">
                    <img class="product__image product__image--small" src="{{product.productphoto_set.first.image.url}}" alt="{{product.productphoto_set.first.image}}">
                </figure>
                <div class="item__details">
                    <p>{{product.name}}<br> ${{item.price}}</p>
                    <p><strong>Grind options</strong>: {{item.customer_note}}</p>
                    <p></p>
                    <form class="product__form" action="{% url 'storefront:cart-add' product.pk %}" method="POST">
                        {% csrf_token %}
                        {{ item.update_quantity_form }}
                        <input type="submit" value="Update">
                    </form>
                    <p>
                        <a href="{% url 'storefront:cart-remove' product.pk %}">Remove from cart</a>
                    </p>
                </div>
            {% endwith %}
            </div>
        {% empty %}
            <p>No items in cart yet.</p>
        {% endfor %}
    </section>
    <section>
        <p class="cart__total_price">Cart total: <strong>${{cart.get_total_price}}</strong></p>
        <p class="cart__total">
            <a href="{% url 'storefront:product-list' %}">Continue Shopping</a>&emsp;or&emsp;<a class="action-button action-button--large" href="{% url 'storefront:checkout-address' %}">Proceed to Checkout</a>
        </p>
    </section>
</article>
{% endblock %}
