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

{% block head_title %}Fulfill Order No. {{ order.pk }} | {% endblock %}

{% block content %}
<article>
    <p>
        <a href="{% url 'dashboard:order-detail' order.pk %}">&larr; Back to order</a>
    </p>
    <header class="object-header">
        <h1><img src="{% static 'images/box.png' %}"> Order No. {{order.pk}}</h1>
    </header>
    <section class="panel">        
        <header class="panel-header">
            <h3>Fulfillment</h3>
        </header>
        <form method="POST">
            {% csrf_token %}
            {{ form.management_form }}
            <table>
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>SKU</th>
                        <th>Options</th>
                        <th>Quantity to fulfill</th>
                    </tr>
                </thead>
                <tbody>
                    {% for form in form %}
                    <tr>
                    {% if form.instance.variant %}
                        {% with product=form.instance.variant.product %}
                            {{form.id}}
                            <td>
                                <figure class="product-figure">
                                    {% if item.variant.image %}
                                    <img class="product-image" src="{{item.variant.image.image.url}}" alt="{{item.variant.image.image}}">
                                    {% else %}
                                    <img class="product-image" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                                    {% endif %}
                                    <figcaption><strong>{{form.instance.variant}}</strong></figcaption>
                                </figure>
                            </td>
                            <td>{{product.sku}}</td>
                            <td>{{form.instance.customer_note}}</td>
                            <td>{{form.quantity_fulfilled}} / {{form.instance.quantity}}</td>
                        {% endwith %}
                    {% elif form.instance.product %}
                        {% with product=form.instance.product %}
                            {{form.id}}
                            <td>
                                <figure class="product-figure">
                                    {% if item.variant.image %}
                                    <img class="product-image" src="{{item.variant.image.image.url}}" alt="{{item.variant.image.image}}">
                                    {% else %}
                                    <img class="product-image" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                                    {% endif %}
                                    <figcaption><strong>{{form.instance.product}}</strong></figcaption>
                                </figure>
                            </td>
                            <td>{{product.sku}}</td>
                            <td>{{form.instance.customer_note}}</td>
                            <td>{{form.quantity_fulfilled}} / {{form.instance.quantity}}</td>
                        {% endwith %}
                    {% endif %}
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                {% for dict in form.errors %}
                    <tr>
                        {% for error in dict.values %}
                        <td>{{ error }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
                    <tr>
                        <td colspan="3"></td>
                        <td class="text-right">
                            <input class="btn" type="submit" value="Fulfill order">
                        </td>
                    </tr>
                </tfoot>
            </table>
        </form>
    </section>
</article>
{% endblock content %}
