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

{% block head %}
    <script defer src="{% static 'scripts/product_list.js' %}"></script>
    <link rel="stylesheet" href="{% static 'styles/checkout.css' %}" />
    <script src="https://js.stripe.com/v3/"></script>
    <script src="{% static 'scripts/checkout.js' %}" defer></script>
{% endblock %}

{% block content %}
<div class="site__banner site__banner--site">
    <h1>Subscriptions</h1>
    <h4>SUBSCRIBE AND SAVE</h4>
</div>
<article>
    <section class="">
        <form action="" class="create-subscription-form">
            {% csrf_token %}
            <div>
                <h4>Pick your coffee</h4>
                <div class="product__subscription-list">
                    {% for product in product_list %}
                    <div>
                        <label for="">{{ product.name }}
                            <figure class="product__figure">
                                <img class="product__image" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                            </figure>
                        </label>
                        <label for="">Quantity</label>
                        <input type="number" min="0" max="20" name="product_{{ product.pk }}">
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div>
                <h4>Pick your options</h4>
                {{ form.as_p }}
                <p>
                    <input type="submit" value="Continue to payment">
                </p>
            </div>
        </form>
    </section>
</article>
{% endblock %}
