{{ header }}
{% if OSP.CustomCSS %}
	<style>
        {{ OSP.CustomCSS }}
    </style>
{% endif %}
{% if OSP.CustomJS %}
	<script type="text/javascript">
        {{ OSP.CustomJS }}
    </script>
{% endif %}
<div class="container">
    <ul class="breadcrumb">
    	{% for breadcrumb in breadcrumbs %}
    		<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
	    {% endfor %}
    </ul>

	<div class="row">
        {{ column_left }}
        {% if column_left and column_right %}
            {% set class = 'col-sm-6' %}
        {% elseif column_left or column_right %}
            {% set class = 'col-sm-9' %}
        {% else %}
            {% set class = 'col-sm-12' %}
        {% endif %}
        <div id="content" class="{{ class }}">
            {{ content_top }}
            <h1 class='h1-osp'>{{ heading_title }}</h1>
            <div class='osp-content'>
            	{% if OSP.PageText[current_language] %}
                	<span class='osp-pagetext'>
                    	{{ OSP.PageText[current_language] }}
                    </span>
                {% endif %}
                
                {% if OSP.AddThisShow == 'yes' and OSP.AddThisURL %}
                    <div class="osp-sharing" style="text-align:center;">
                        <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-55534c28671b3948" async="async"></script>
                        <div class="addthis_sharing_toolbox" data-url="{{ OSP.AddThisURL }}"></div>
                    </div>
                {% endif %}
                
                {% if OSP.OrderDetailsShow == 'yes' or OSP.OrderPaymentShippingShow == 'yes' or OSP.OrderProductsShow == 'yes' %}
                	<h2 class="osp-h2 osp-orderdetails">{{ text_order_detail }}</h2>
                {% endif %}
                
                {% if OSP.OrderDetailsShow and OSP.OrderDetailsShow == 'yes' %}
                    <table class="table table-bordered table-hover table-orderdetails">
                        <thead>
                            <tr>
                                <td class="text-left" colspan="2">{{ text_order_detail }}</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-left" style="width: 50%;">
                                    {% if OSP_orderinfo.invoice_no %}
                                        <b>{{ text_invoice_no }}</b> {{ OSP_orderinfo.invoice_no }}<br />
                                    {% endif %}
                                    <b>{{ text_order_id|format(osp_order_id) }}</b><br />
                                    <b>{{ text_date_added }}</b> {{ OSP_orderinfo.date_added }}
                                </td>
                                <td class="text-left">
                                    {% if OSP_orderinfo.payment_method %}
                                        <b>{{ text_payment_method }}</b> {{ OSP_orderinfo.payment_method }}<br />
                                    {% endif %}
                                    {% if OSP_orderinfo.shipping_method %}
                                    <b>{{ text_shipping_method }}</b> {{ OSP_orderinfo.shipping_method }}
                                    {% endif %}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                {% endif %}
				
                {% if OSP.OrderPaymentShippingShow and OSP.OrderPaymentShippingShow == 'yes' %}
                    <table class="table table-bordered table-hover table-orderpaymentshipping">
                        <thead>
                            <tr>
                                <td class="text-left" style="width: 50%;">{{ text_payment_address }}</td>
                                {% if OSP_orderinfo.shipping_address %}
                                    <td class="text-left">{{ text_shipping_address }}</td>
                                {% endif %}
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-left">{{ OSP_orderinfo.payment_address }}</td>
                                {% if OSP_orderinfo.shipping_address %}
                                    <td class="text-left">{{ OSP_orderinfo.shipping_address }}</td>
                                {% endif %}
                            </tr>
                        </tbody>
                    </table>                
                {% endif %}
                 
                {% if OSP.OrderProductsShow and OSP.OrderProductsShow == 'yes' %}
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover table-orderproducts">
                            <thead>
                                <tr>
                                	<td class="text-left"></td>
                                    <td class="text-left">{{ column_name }}</td>
                                    <td class="text-left">{{ column_model }}</td>
                                    <td class="text-right">{{ column_quantity }}</td>
                                    <td class="text-right">{{ column_price }}</td>
                                    <td class="text-right">{{ column_total }}</td>
                                </tr>
                            </thead>
                            <tbody>
                                {% for product in OSP_orderinfo.products %}
                                    <tr>
                                    	<td class="text-center"><a href="{{ product.href }}"><img class="osp-productimage" src="{{ product.image }}" alt="{{ product.name }}" /></a></td>
                                        <td class="text-left">{{ product.name }}
                                        {% for option in product.option %}
                                        <br />
                                        &nbsp;<small> - {{ option.name }}: {{ option.value }}</small>
                                        {% endfor %}</td>
                                        <td class="text-left">{{ product.model }}</td>
                                        <td class="text-right">{{ product.quantity }}</td>
                                        <td class="text-right">{{ product.price }}</td>
                                        <td class="text-right">{{ product.total }}</td>
                                    </tr>
                                {% endfor %}
                                {% for voucher in OSP_orderinfo.vouchers %}
                                        <tr>
                                        	<td class="text-left"></td>
                                            <td class="text-left">{{ voucher.description }}</td>
                                            <td class="text-left"></td>
                                            <td class="text-right">1</td>
                                            <td class="text-right">{{ voucher.amount }}</td>
                                            <td class="text-right">{{ voucher.amount }}</td>
                                        </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot>
                                {% for total in OSP_orderinfo.totals %}
                                    <tr>
                                        <td colspan="4"></td>
                                        <td class="text-right"><b>{{ total.title }}</b></td>
                                        <td class="text-right">{{ total.text }}</td>
                                    </tr>
                                {% endfor %}
                            </tfoot>
                        </table>
                    </div>
                {% endif %}
                
                {% if OSP.OrderCommentsShow == 'yes' %}
                    {% if OSP_orderinfo.comment %}
                        <table class="table table-bordered table-hover table-ordercomments">
                            <thead>
                                <tr>
                                    <td class="text-left">{{ text_comment }}</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-left">{{ OSP_orderinfo.comment }}</td>
                                </tr>
                            </tbody>
                        </table>
                    {% endif %}                
                {% endif %}
				
                {% if OSP.ShowProducts == 'yes' and promoted_products and promoted_products.count > 0 %}
                	<h2 class="osp-h2 osp-promotedproducts">{{ OSP.PromotedTitle[current_language] }}</h2>
                    <div class="row osp-promotedwidget">
                        {% for product in promoted_products %}
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                            <div class="product-thumb transition">
                                <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
                                <div class="caption">
                                    <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
                                    <p>{{ product.description }}</p>
                                    {% if product.rating %}
                                        <div class="rating">
                                            {% for i in 1..5 %}
                                                {% if product.rating < i %}
                                                    <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                                                {% else %}
                                                    <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    {% if product.price %}
                                        <p class="price">
                                            {% if product.special %}
                                                {{ product.price }}
                                            {% else %}
                                                <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span>
                                            {% endif %}
                                        </p>
                                    {% endif %}
                                </div>
                                <div class="button-group">
                                    <button type="button" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
                                    <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
                                    <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>                   
                {% endif %}
                
            </div>
            <div class="buttons">
                <div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
            </div>
            {{ content_bottom }}
        </div>
        {{ column_right }}
	</div>
</div>
{{ footer }}
