<div class="orderBox">

    <div class="orderHeader">

        <div class="innerOrderHeader">

            <div class="orderDate headerCol">
                <span class="headerLabel">Order placed</span>
                <span class="headerData">
                    {% if order.date_long is not empty %}
                        {{ order.date_long }}
                    {% else %}
                        &ndash;
                    {% endif %}
                </span>
            </div> <!-- .orderDate -->

            <div class="orderPostcode headerCol">
                <span class="headerLabel">Dispatched to</span>
                <span class="headerData">
                    {% if order.order_postcode is not empty %}
                        {{ order.order_postcode }}
                    {% else %}
                        &ndash;
                    {% endif %}
                </span>
            </div> <!-- .orderPostcode -->

            <div class="orderNumber headerCol">

                <span class="headerLabel">
                    Order #
                    {% if order.order_ref is not empty %}
                        {{ order.order_ref }}
                    {% else %}
                        ID{{ order.id }}
                    {% endif %}
                </span>

                <span class="headerData">
                     <a href="{{ route('members-order', {'id' : order.id}, false) }}">Order details</a>
                </span>
            </div> <!-- .orderNumber -->

        </div> <!-- .innerOrderHeader -->

    </div> <!-- .orderHeader -->

    <div class="orderBody">

        {% if item.item_name is not empty %}

            <div class="orderBodyWrap">

                <div class="orderBodyLeft">

                    <a href="{{ route('members-order', {'id' : order.id}, false) }}" class="imageWrap">

                        {% if order.no_image %}
                            <img src="{{ order.item_image }}" alt="{{ item.item_name }}">
                        {% else %}
                            <img src="/{{ image_folders['product_folders']['orders_thumb']['path'] }}/{{ order.item_image }}" alt="{{ item.item_name }}">
                        {% endif %}

                    </a>

                </div> <!-- .orderBodyLeft -->

                <div class="orderBodyRight">

                    <div class="orderContent">

                        <h5 class="orderTitle">

                            {% if item.item_name is not empty %}

                                {{ item.item_name }}

                                {% if order.num_items > 1 %}

                                    {% set plural = '' %}

                                    {% if order.num_items > 2 %}
                                        {% set plural = 's' %}
                                    {% endif %}

                                    {% set item_count = order.num_items - 1 %}

                                    &plus;{{ item_count }} other item{{ plural }}

                                {% endif %}
                            {% else %}
                                Various items
                            {% endif %}

                            {# {{ item.item_name ~ ' ' ~ (item.size|not_one_size) ~ ' x' ~ item.quantity }} #}

                        </h5>

                        <div class="orderTotal">
                            <span class="total">
                                Total: &pound;{{ order.cost_total|number_format(2) }}
                            </span>
                        </div> <!-- .orderTotal -->

                        {% if order.status is not empty %}
                            <div class="orderStatus">
                                Status: {{ order.status }}
                            </div> <!-- .orderStatus -->
                        {% endif %}

                        {% if order.can_reorder %}
                            <div class="reorderWrap">
                                <a href="{{ route('members-reorder', {'id' : order.id}, false) }}">
                                    Re-Order
                                </a>
                            </div> <!-- .reorderWrap -->
                        {% endif %}
                    </div> <!-- .orderContent -->

                </div> <!-- .orderBodyRight -->


            </div> <!-- .orderBodyWrap -->

        {% endif %}

    </div> <!-- .orderBody -->

</div> <!-- .orderBox -->





