{% 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>
    <section>
        <form action="{% url 'storefront:subscription-form' %}" method="POST" class="subscription-create-form">
            {% csrf_token %}
            <h4>Pick your coffee:</h4>
            <section class="subscription-coffee">
            {% for product in product_list %}
                <div>
                    <figure class="product__figure">
                        <img class="product__image" src="{{ product.get_first_img.image.url }}">
                    </figure>
                    <strong>{{ product }}</strong>
                    <input type="number" min="0" max="20" pattern="[0-9]*" data-id="{{ product.pk }}" name="product_{{ product.name }}" placeholder="Quantity">
                </div>
            {% endfor %}
            </section>
            <h4>Pick your grind:</h4>
            <section>
            {{ form.as_p }}
            </section>
            <h4>Pick your size:</h4>
            <section class="subscription-products">
            {% for product in stripe_products %}
                <div>
                    <input data-weight="{{ product.weight_per_item }}" type="radio" name="stripe_product" id="{{ product.id }}" value="{{ product.id }}">
                    <label for="{{ product.id }}"><h5>{{ product.name }}</h5></label><br>
                    <h5>{{ product.cost }} / bag</h5>
                    <div class="product-prices">
                        <h5>Pick your Schedule:</h5>
                        <select name="stripe_price">
                        {% for price in product.prices %}
                            <option value="{{ price.id }}">Every {{ price.interval_count }} / {{ price.interval }}{{ price.interval_count|pluralize }}</option>
                        {% endfor %}
                        </select>
                    </div>
                </div>
            {% endfor %}
            </section>
            <section>
                <table class="subscription-totals"></table>
                <p>
                    <input type="submit" value="Continue" disabled>
                </p>
            </section>
        </form>
    </section>
</article>
{% endblock %}
