<div class="private_area_content">
    <div class="title_container">
        <a class="back_link" title="Volver" href="javascript:initMisPedidos2AreaPrivada('section_link_mis_pedidos');"></a>
        <span class="title_order_details">
            {{i18n "mobile.detallePedidoTemplate.pedido"}}
            <span class="order_id">{{order.order_id}}</span>
        </span>
    </div>
    <div class="top_container">
        <span class="user_data"><span></span>{{user_basic_data.firstname}} {{user_basic_data.surname1}} {{user_basic_data.surname2}}<br>{{user_basic_data.email}}</span>
        <span class="buy_data"><span class="title">{{i18n "mobile.detallePedidoTemplate.datosPedido"}}</span>{{shipping_address.description}}<br>{{shipping_address.first_name}} {{shipping_address.surname1}} {{shipping_address.surname2}}<br> {{shipping_address.street}}, {{shipping_address.house_number}} - {{shipping_address.block}} {{shipping_address.flat}} {{shipping_address.door}} <br>{{shipping_address.postal_code_rep_item_description}}<br>{{shipping_address.city_rep_item_description}}<br>Tel. {{shipping_address.phone_number}}</span>
        <p class="delivery_data"><span></span>{{i18n "mobile.infoPedidoTemplate.pedidoEntregado"}}</p>
    </div>



    {{#if order.has_items}}


        <div class="shopping_cart_info">
            <p class="cart_products">{{i18n "mobile.detallePedidoTemplate.tienes"}} <span>{{order.num_items}} {{i18n "mobile.detallePedidoTemplate.productos"}}</span></p>
            <a id="products-button" class="white_button" title="{{i18n "mobile.detallePedidoTemplate.misProductos"}}" href="javascript:void(0);">{{i18n "mobile.detallePedidoTemplate.mostrar"}} <span class="show_prod"></span></a>
        </div>

        <div class="shopping_cart_products">
            <div id="my_products">
                <div class="header_list">
                    <span class="list_title products">{{i18n "mobile.detallePedidoTemplate.productos"}}</span>
                    <span class="list_title units">{{i18n "mobile.detallePedidoTemplate.unidades"}}</span>
                    <span class="list_title unit_price">{{i18n "mobile.detallePedidoTemplate.precioUnidad"}}</span>
                    <span class="list_title saving">{{i18n "mobile.detallePedidoTemplate.Ahorro"}}</span>
                    <span class="list_title price">{{i18n "mobile.detallePedidoTemplate.precio"}}</span>
                </div>
                <ul id="cart_list" class="item_list">
                    {{#order.commerce_items}}
                        <li class="item">
                            <span class="item_block products">
                                {{#if promotion_media}}
                                    <img class="promo_image" alt="{{promotion_text}}" src="{{MEDIA_CONTENT_URL}}/resize_66x20{{promotion_media}}" width="66" height="20">
                                {{/if}}

                                {{#if promotionsImage}}
                                    {{#each promotionsImage}}
                                        <img class="promo_image" src="{{MEDIA_CONTENT_URL}}{{this}}">
                                    {{/each}}
                                {{/if}}

                                <span id="item_description_{{catalog_ref_id}}"  class="product_name">{{description}}</span>

                                <img class="product_image" alt="{{description}}" data-original="{{MEDIA_CONTENT_URL}}/resize_64x67{{product_large_image}}" src="{{MEDIA_CONTENT_URL}}/resize_64x67{{product_large_image}}" width="64" height="67">

                            </span>

                            <span class="item_block units">{{quantity}}</span>

                            <!-- unit price -->
                            {{#if sale_price_apply }}
                                    <span class="item_block unit_price"><span id="sale_price_{{catalog_ref_id}}"></span>{{i18n "mobile.commons.euro_symbol"}}<span id="list_price_{{catalog_ref_id}}" class="before">{{list_price}}</span><span>{{i18n "commons.euro_symbol"}}</span>
                                    </span>
                                    <script>
                                        formatNumber('{{sale_price}}','sale_price_{{catalog_ref_id}}');
                                        formatNumber('{{list_price}}','list_price_{{catalog_ref_id}}');
                                    </script>
                            {{else}}
                                    <span id="list_price_{{catalog_ref_id}}" class="item_block unit_price"><span></span>{{i18n "mobile.commons.euro_symbol"}}</span>
                                    <script>
                                        formatNumber('{{list_price}}','list_price_{{catalog_ref_id}}');
                                    </script>
                            {{/if}}

                            <!-- ahorro -->
                            {{#if promotionDiscount }}
                                <span class="item_block saving"><span class="total_saving"><span id="total_discount_{{catalog_ref_id}}"></span>{{i18n "mobile.commons.euro_symbol"}}</span></span>
                                <script>
                                    formatNumber('{{promotionDiscount}}','total_discount_{{catalog_ref_id}}');
                                </script>
                            {{else}}
                                <span class="item_block saving"></span>
                            {{/if}}
                            <!-- en ahorro -->



                        <!-- total price -->
                            <span class="item_block price"><span id="total_price_{{catalog_ref_id}}"></span>{{i18n "mobile.commons.euro_symbol"}}
                            </span>
                            <script>
                                formatNumber('{{amount}}','total_price_{{catalog_ref_id}}');
                            </script>



                        </li>

                    {{/order.commerce_items}}


                </ul>
            </div>

        {{/if}}


        <p class="gift_title">{{i18n "mobile.detallePedidoTemplate.obsequiamosCompra"}}</p>
        <ul class="item_list gift">
            {{#order.gift_items}}

                <li class="item">
                    <span class="item_block products">
                        <span class="product_name">{{description}}</span>
                        <img class="product_image"  alt="{{description}}" data-original="{{MEDIA_CONTENT_URL}}/resize_64x67{{product_large_image}}" src="{{MEDIA_CONTENT_URL}}/resize_64x67{{product_large_image}}" width="64" height="67">
                    </span>
                    <span class="item_block units">1</span>
                <span class="item_block price"><span class="gift">{{i18n "mobile.shoppingCart.giftListTemplate.gift"}}</span></span>
                </li>

            {{/order.gift_items}}

            {{#if discountPromotionEntries}}
                <li class="item gift">
                    <span class="item_block products">
                        <img class="product_image" alt="{{i18n "mobile.shoppingCart.giftListTemplate.discount"}}" data-original="{{STATIC_CONTENT_URL}}/images/voucher-discount.png" src="{{STATIC_CONTENT_URL}}/images/voucher-discount.png" width="64" height="67" style="display: block;">
                        <span class="product_name">
                            {{#each discountPromotionEntries}}
                                {{this}}<br><br>
                            {{/each}}
                        </span>
                    </span>
                </li>
            {{/if}}

            {{#if infoPromotionEntries}}
                <li class="item gift">
                    <span class="item_block products">
                        <img class="product_image" alt="{{i18n "mobile.shoppingCart.giftListTemplate.promotion"}}" data-original="{{STATIC_CONTENT_URL}}/images/info-discount.png" src="{{STATIC_CONTENT_URL}}/images/info-discount.png" width="64" height="67" style="display: block;">
                        <span class="product_name">
                            {{#each infoPromotionEntries}}
                                {{this}}<br><br>
                            {{/each}}
                        </span>
                    </span>
                </li>
            {{/if}}



        </ul>



    <div class="step_content_bottom">
        <div class="left_container">
            <span class="image_left"></span>
        </div>
        <div class="right_container">

            <p class="total_products_price">{{i18n "mobile.shoppingCartContainerTemplate.totalProductos"}}
                <span id="partial_price" class="total"><span>
                <script>
                    formatNumberWithCurrency('{{order.order_price_info.rawSubtotal}}', '{{i18n "mobile.commons.euro_symbol"}}', 'partial_price');
                </script>
            </p>

            <div class="buy_options_container">
                <div class="delivery_container">

                    {{#eq shipping_address.type "RT"}}
                        <p class="delivery_text">{{i18n "mobile.infoPedidoTemplate.recogidaTienda"}} <span> {{shipping_address.description}} </span></p>
                    {{else}}
                        <p class="delivery_text">{{i18n "mobile.infoPedidoTemplate.envioDomicilio"}} <span> {{shipping_address.description}} </span></p>
                    {{/eq}}

                    <span class="delivery_price"><span id="shipping_price"></span>{{i18n "mobile.commons.euro_symbol"}}</span>
                        <script>
                            formatNumber('{{order.order_price_info.shipping}}','shipping_price');
                        </script>
                </div>
            </div>

            <p class="total_buy_price">{{i18n "mobile.shoppingCartContainerTemplate.totalCompra"}}
                <span class="total"><span id="total_price"></span><span class="currency">{{i18n "mobile.commons.euro_symbol"}}</span></span>
                <script>
                    formatNumber('{{mobile.order.order_price_info.total}}','total_price');
                </script>
            </p>

        </div

    </div>

</div>



<script>
    $(document).ready(function() {
        $('.product_image').lazyload();

        $('#products-button').click(function() {
            var button = $(this);

            if ( button.find('span').hasClass('show_prod') ) {
                $('#my_products').stop().fadeIn(250, function() {
                    $('.product_image').lazyload();
                });
                button.html('Ocultar <span class="hide_prod"></span>');
            } else {
                $('#my_products').stop().fadeOut(250, function() {
                    button.html('Mostrar <span class="show_prod"></span>');
                });
            }
        });
    });
</script>