{% load i18n %}
{% load lfs_tags %}
<html>
    <head>
        <style type="text/css">
            table.orders,
            table.order-general,
            table.order-items,
            table.order-addresses,
            table.order-message,
            table.manage-overview,
            .selected-accessories table,
            .selectable-products table {
                width: 100%;
                border-collapse: collapse;
            }
            th {
                text-align:left;
                background-color: #eee;
            }
            td {
                vertical-align: top;
                text-align: left;
            }
            .number {
                text-align:right;
            }
            .total {
                font-weight:bold;
            }

            .tax {
                font-size: 90%;
            }
        </style>
    </head>
    <body>
        <table class="order-general">
            <tr>
                <th colspan="4">
                    {% trans 'General' %}
                </th>
            </tr>
            <tr>
                <td class="label">
                    {% trans 'Customer name' %}:
                </td>
                <td>
                    {{ order.customer_firstname }} {{ order.customer_lastname }}
                </td>
                <td class="label">
                    {% trans 'Date' %}:
                </td>
                <td>
                    {{ order.created|date:_("DATETIME_FORMAT") }}
                </td>
            </tr>
            <tr>
                <td class="label">
                    {% trans 'E-mail' %}:
                </td>
                <td>
                    {{ order.customer_email }}
                </td>
                <td class="label">
                    {% trans 'State' %}:
                </td>
                <td>
                    {{ order.get_state_display }}
                </td>
            </tr>
            <tr>
                <td class="label">
                    {% trans 'Phone' %}:
                </td>
                <td>
                    {{ order.shipping_phone }}
                </td>
                <td class="label">
                    {% trans 'Total' %}:
                </td>
                <td>
                    {{ order.price|currency }}
                </td>
            </tr>

        </table>
        <table class="order-addresses">
            <tr>
                <th>
                    {% trans 'Shipping address' %}
                </th>
                <th>
                    {% trans 'Invoice address' %}
                </th>
                <th>
                    {% trans 'Shipping method' %}
                </th>
                <th>
                    {% trans 'Payment method' %}
                </th>
            </tr>
            <tr>
                <td>
                    <div>
                        {{ order.shipping_firstname }}
                    </div>
                    <div>
                        {{ order.shipping_lastname }}
                    </div>
                    <div>
                        {{ order.shipping_company_name }}
                    </div>
                    <div>
                        {{ order.shipping_street }}
                    </div>
                    <div>
                        {{ order.shipping_zip_code }} {{ order.shipping_city }}
                    </div>
                    <div>
                        {{ order.shipping_country }}
                    </div>
                    <div>
                        {{ order.shipping_phone }}
                    </div>
                    <div>
                        {{ order.shipping_email }}
                    </div>
                </td>
                <td>
                    <div>
                        {{ order.invoice_firstname }}
                    </div>
                    <div>
                        {{ order.invoice_lastname }}
                    </div>
                    <div>
                        {{ order.invoice_company_name }}
                    </div>
                    <div>
                        {{ order.invoice_street }}
                    </div>
                    <div>
                        {{ order.invoice_zip_code }} {{ order.invoice_city }}
                    </div>
                    <div>
                        {{ order.invoice_country }}
                    </div>
                    <div>
                        {{ order.invoice_phone }}
                    </div>
                    <div>
                        {{ order.invoice_email }}
                    </div>
                </td>
                <td>
                    <div>
                        {{ order.shipping_method }}
                    </div>
                </td>
                <td>
                    <div>
                        {{ order.payment_method.name }}
                    </div>
                    {% ifequal order.payment_method.id 1 %}
                        <div>
                            {{ order.account_number }}
                        </div>
                        <div>
                            {{ order.bank_identification_code }}
                        </div>
                        <div>
                            {{ order.bank_name }}
                        </div>
                        <div>
                            {{ order.depositor }}
                        </div>
                    {% endifequal %}
                    {% ifequal order.payment_method.id 3 %}
                        <div>
                            <a href="{{ order.get_pay_link }}"
                               class="order-pay-link">{% trans 'Pay now' %}</a>
                        </div>
                    {% endifequal %}
                </td>
            </tr>

        </table>

        <table class="order-items"
               width="100%">
            <tr>
                <th>
                    {% trans 'SKU' %}
                </th>
                <th>
                    {% trans 'Name' %}
                </th>
                <th class="number">
                    {% trans 'Amount' %}
                </th>
                <th class="number">
                    {% trans 'Price' %}
                </th>
                <th class="number">
                    {% trans 'Total' %}
                </th>
            </tr>
            {% for item in order.items.all %}
                <tr>
                    <td>
                       {{ item.product_sku }}
                    </td>
                    <td>
                        {{ item.product_name }}
                        {% for property in item.product.get_variant_properties %}
                            <div>
                                {{ property.title }} : {{ property.value }} {{ property.unit|safe }}
                            </div>
                        {% endfor %}

                        {% for property in item.product.get_displayed_properties %}
                            <div>
                                {{ property.title }} : {{ property.value }} {{ property.unit|safe }}
                            </div>
                        {% endfor %}

                        {% if item.product.is_configurable_product %}
                            {% for property in item.get_properties %}                    
                                <div>
                                    {{ property.title }} : {{ property.value }} {{ property.unit|safe }}
                                    {% if property.display_price %}
                                        ({{ property.price|currency }})
                                    {% endif %}
                                </div>
                            {% endfor %}
                        {% endif %}

                    </td>
                    <td class="number">
                        {{ item.product_amount }} {{ item.product.unit }}
                        {% if item.product.active_packing_unit %} 
                            <span class="packing-unit">
                                ({{ item|packages }} {{ item.product.packing_unit_unit }})
                            </span>
                        {% endif %}                      
                    </td>
                    <td class="number">
                       {{ item.product_price_gross|currency }}{% if item.product.price_unit %} / {{ item.product.price_unit }}{% endif %}
                    </td>
                    <td class="number">
                       {{ item.price_gross|currency }}
                    </td>
                </tr>
            {% endfor %}

            {% if order.voucher_number %}
                <tr>
                    <td></td>
                    <td>
                        {% trans 'Voucher' %} ({{ order.voucher_number }})
                    </td>
                    <td class="number">
                        1
                    </td>
                    <td class="number">
                        - {{ order.voucher_price|currency }}
                    </td>
                    <td class="number">
                        - {{ order.voucher_price|currency }}
                    </td>
                </tr>
            {% endif %}

            <tr>
                <td></td>
                <td>
                    {% trans 'Shipping' %} ({{ order.shipping_method }})
                </td>
                <td class="number">
                    1
                </td>
                <td class="number">
                    {{ order.shipping_price|currency }}
                </td>
                <td class="number">
                    {{ order.shipping_price|currency }}
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    {% trans 'Payment' %} ({{ order.payment_method }})
                </td>
                <td class="number">
                    1
                </td>
                <td class="number">
                    {{ order.payment_price|currency }}
                </td>
                <td class="number">
                    {{ order.payment_price|currency }}
                </td>
            </tr>
            <tr class="total">
                <td colspan="5"
                    class="number total">
                    {{ order.price|currency }}
                </td>
            </tr>
            <tr>
                <td colspan="5"
                    class="number tax">
                    <span class="total-label">{% trans 'Inclusive VAT' %}:</span>
                    {{ order.tax|currency }}
                </td>
            </tr>
        </table>
        {% if order.message %}
            <table class="order-message">
                <tr>
                    <th colspan="5">
                        {% trans 'Your message to us' %}
                    </th>
                </tr>
                <tr>
                    <td colspan="5">
                        {{ order.message }}
                    </td>
                </tr>
            </table>
        {% endif %}
    </body>
</html>
