{% 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 option in item.product.get_options %}
                            {% if option.property.display_on_product %}                                    
                               <div>
                                   {{option.property.name}} : {{option.value|option_name}} {{option.property.unit|safe}}
                               </div>
                            {% endif %}
                       {% endfor %}
                    </td>
                    <td class="number">
                       {{item.product_amount}} 
                    </td>
                    <td class="number">
                       {{item.product_price_gross|currency}} 
                    </td>
                    <td class="number">
                       {{item.price_gross|currency}}
                    </td>
                </tr>
            {% endfor %}        
            <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>
