{% extends 'history/changed_detail.html' %}

{% load number_tags %}

{% block pane %}

<div class = 'required'>

    <h2 class='light-colored'>Before</h2>
    <table class="object-detail">
        {% for field_name, field in display_before %}
            {% if field %}
                <tr>
                    <th>{{ field_name|capfirst }}</th>
                    <td>{{ field }}</td>
                </tr>
            {% endif %}
        {% endfor %}
    </table>


    {% for item in items_before %}
        
        <h2 class='light-colored'>{{ item.product }}</h2>
        <table class="object-detail">
            <tr>
                <th>Qty</th>
                <td>{{ item.qty|pretty_number }}</td>
            </tr>
            <tr>
                <th>Price</th>
                <td>{{ item.price|pretty_number }}</td>
            </tr>
            {% if item.shipping_cost %}
                <tr>
                    <th>Shipping cost</th>
                    <td>{{ item.shipping_cost|pretty_number }}</td>
                </tr>
            {% endif %}
        </table>
    {% endfor %}

</div>

<div class = 'required'>
    <h2>After</h2>
    <table class="object-detail">
        {% for field_name, field in display_after %}
            {% if field %}
                <tr>
                    <th>{{ field_name|capfirst }}</th>
                    <td>{{ field }}</td>
                </tr>
            {% endif %}
        {% endfor %}
    </table>


    {% for item in items_after %}
        
        <h2 class='light-colored'>{{ item.product }}</h2>
        <table class="object-detail">
            <tr>
                <th>Qty</th>
                <td>{{ item.qty|pretty_number }}</td>
            </tr>
            <tr>
                <th>Price</th>
                <td>{{ item.price|pretty_number }}</td>
            </tr>
            {% if item.shipping_cost %}
                <tr>
                    <th>Shipping cost</th>
                    <td>{{ item.shipping_cost|pretty_number }}</td>
                </tr>
            {% endif %}
        </table>
    {% endfor %}

</div>

{% endblock %}