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

{% block head %}
<script src="{% static 'scripts/subscriptions.js' %}" defer></script>
{% endblock %}

{% block content %}
<div class="site__banner site__banner--site">
    <h1>Subscriptions</h1>
    <h2>Subscribe and save 10%</h2>
</div>
<article>
    <header>
        <h1>Subscription</h1>
    </header>
    <section class="checkout__address">
        <h3>Shipping address</h3>
        <p>{{shipping_address.email}}</p>
        <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="btn" href="{% url 'storefront:subscription-address' %}">Change</a>
    </section>
    <section class="cart__list">
        <h3>Items</h3>
        <h4>Size: {{ sub_cart.size }}</h4>
        <h4>Grind: {{ sub_cart.grind }}</h4>
        {% for item in sub_cart.items %}
        <div class="cart__item">
        {% with product=item.product %}
            <figure>
                <img src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
            </figure>
            <div>
                <h2>{{ item.quantity }} &times; {{product.name}}</h2>
            </div>
        {% endwith %}
        </div>
        {% endfor %}
    </section>
    <section class="cart__summary">
        <h3>Subscription summary</h3>
        <div class="cart__table-wrapper">
            <table class="cart__totals">
                <tr>
                    <td>Subtotal</td>
                    <td>{{ sub_cart.subtotal_price }}</td>
                </tr>
                <tr>
                    <td>Shipping</td>
                    <td>${{ sub_cart.shipping_cost }}</td>
                </tr>
                <tr>
                    <th>Total</th>
                    <td><strong>${{ sub_cart.total_price }}</strong></td>
                </tr>
                <tr>
                    <th>Schedule</th>
                    <td><strong>{{ sub_cart.schedule }}</strong></td>
                </tr>
            </table>
        </div>
        <form action="{% url 'storefront:subscription-create' %}" method="POST">
            {% csrf_token %}
            {{ form.as_p }}
            <input type="submit" value="Checkout">
        </form>
    </section>
</article>
{% endblock %}
