{% extends "dashboard.html" %}

{% block content %}
<article>
    <h1>Fulfill Order #{{order.pk}}</h1>
    <section>
        <form method="POST" action="">
            {% csrf_token %}
            {{ form.management_form }}

            <section class="object__list">
                {% for dict in form.errors %}
                    {% for error in dict.values %}
                        <div class="object__item">
                            {{ error }}
                        </div>
                    {% endfor %}
                {% endfor %}
                <div class="object__item panel__header object__item--col4">
                    <span>Product</span>
                    <span>SKU</span>
                    <span>Quantity to fulfill</span>
                    <span>Grind</span>
                </div>
            {% for form in form %}
                <div class="object__item object__item--col4">
                {% with product=form.instance.product %}
                    {{form.id}}
                    <figure class="item__figure">
                        <img class="product__image product__image--small" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                        <figcaption><strong>{{product.name}}</strong></figcaption>
                    </figure>
                    <span>{{product.sku}}</span>
                    <span>{{form.quantity_fulfilled}} / {{form.instance.quantity}}</span>
                    <span>{{form.instance.customer_note}}</span>
                {% endwith %}
                </div>
            {% endfor %}
                <div class="object__item object__item--col5">
                    <a href="{% url 'dashboard:order-detail' order.pk %}">cancel</a> <input class="action-button order__fulfill" type="submit" value="Fulfill">
                </div>
            </section>
        </form>
    </section>
</article>
{% endblock content %}
