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

{% block head %}
<script defer src="https://www.paypal.com/sdk/js?client-id=AVELl5svEDTPo3FRNViyjWnqODfFsAHbKKdm5BlwpKCwZCVxTraFF9Ax3N1xlkoEWSpOj7AI_T9xYMRu&currency=USD"></script>
<script type="module" defer src="{% static 'scripts/payment.js' %}"></script>
{% endblock %}

{% block content %}
<article>
    <h2>Checkout</h2>
    <section class="order__details">
        <div class="order__shipping">
            <h3>Shipping Address</h3>
            <address>
                {{shipping_address.first_name}}
                {{shipping_address.last_name}}<br>
                {{shipping_address.street_address_1}}<br>
                {% if shipping_address.street_address_2 %}
                    {{shipping_address.street_address_2}}<br>
                {% endif %}
                {{shipping_address.city}}, {{shipping_address.state}}, {{shipping_address.postal_code}}
            </address>
            <a class="action-button" href="{% url 'storefront:checkout-address' %}">edit</a>
        </div>
        <div class="order__list">
            <h3>Cart Summary</h3>
            {% for item in cart %}
            <div class="cart__item">
            {% with product=item.product %}
                <figure class="item__figure">
                    {{item.quantity}} x
                    <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>
                </div>
            {% endwith %}
            </div>
            {% endfor %}
        </div>
        <div class="order__total">
            <form action="" method="POST" class="order__form">
                {% csrf_token %}
                {{form.as_p}}
                {# <input type="submit" value="Place order"> #}
            </form>
            <h4>Total: ${{cart.get_total_price}}</h4>
            <div id="paypal-button-container"></div>
        </div>
    </section>
</article>
{% endblock %}
