{% extends "oscar/customer/order/order_detail.html" %}
{% load currency_filters %}
{% load display_tags %}
{% load i18n %}
{% load reviews_tags product_tags ocyan_thumbnail %}

{% block extra_breadcrumbs %}
<li class="breadcrumb-item">
    <a class="breadcrumb-link" href="{% url 'customer:order-list' %}">{% trans 'Order history' %}</a>
</li>
{% endblock %}

{% block tabcontent %}
<table class="table table-card table-borderless">
    <thead>
        <tr>
            <th>{% trans 'Address' %}</th>
            <th>{% trans 'Contact Number' %}</th>
            <th>{% trans 'Shipping Notes' %}</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
            {% for field in order.shipping_address.ordered_active_address_fields %}
            {{ field }}<br/>
            {% endfor %}
            </td>
            <td>{{ order.shipping_address.phone_number|default:"-" }}</td>
            <td>{{ order.shipping_address.notes|linebreaks }}</td>
        </tr>
    </tbody>
</table>

<div class="products order-products row">
    {% for line in order.lines.all %}
    {% with product=line.product %}
    <div class="col-12">
        <article class="product">
            {% block product_image %}
            {% with image=product.primary_image %}
            <a class="product-image" href="{{ product.get_absolute_url }}" aria-label="Product image">
            {% if product %}
            {% picture image.original '305x305' upscale=False alt=image.caption|default:line.title %}
            {% endif %}
            </a>
            {% endwith %}
            {% endblock %}

            {% block product_description %}
            <div class="product-description-wrapper">
                {% block product_title %}
                <a class="product-title" href="{{ product.get_absolute_url }}" title="{{ line.title }}">
                    {{ line.title|truncatechars:50 }}
                </a>
                {% endblock %}

                {% block product_review %}
                {% iffeature "reviews" %}
                <div class="product-rating {% if product.rating != None %}{{ product.rating|as_stars }}{% else %}none{% endif %} stars-{{ product.rating }}">
                    {% include "oscar/catalogue/reviews/partials/stars.html" with rating=product.rating %}
                    
                    <span class="product-rating-count"><small>({{product.num_approved_reviews}})</small></span>
                </div>
                {% endiffeature %}
                {% endblock %}

                {% if product.description %}
                <div class="product-description">
                    {{ product.description|striptags|truncatechars:80 }}
                </div>
                {% endif %}
            </div>
            {% endblock %}

            {% block product_price %}
            <div class="product-addtobasket">
                <div class="product-quantity">
                    <small class="text-muted">{% trans "Quantity" %}: {{line.quantity}}</small>
                </div>
                {% if product and product.is_public %}
                {% include "oscar/catalogue/partials/stock_record.html" %}
                <form id="line_form_{{ line.id }}" action="{% url 'customer:order-line' order_number=order.number line_id=line.id %}" method="POST" class="basket-button-wrapper">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="reorder" >
                    <button id="reorder_line_{{ line.id }}" class="btn btn-primary" type="submit" data-loading-text="{% trans 'Re-ordering...' context 'Buy again' %}"><i class="fa fa-shopping-cart-solid"></i>  {% trans 'Re-order' context 'Buy again' %}</button>
                </form>
                {% else %}
                {% trans 'Not available anymore' %}
                {% endif %}
            </div>
            {% endblock %}
        </article>
    </div>
    {% endwith %}
    {% endfor %}
    {% block order_actions %}
    <form class="mt-3" id="order_form_{{ order.id }}" action="{% url 'customer:order' order_number=order.number %}" method="post">
        {% csrf_token %}
        <input type="hidden" name="order_id" value="{{ order.id }}" />
        <input type="hidden" name="action" value="reorder" />
        <button type="submit" class="btn btn-success" data-loading-text="{% trans 'Re-ordering...' context 'Buy again' %}">{% trans 'Re-order all items' context 'Buy again' %}</button>
    </form>
    {% endblock %}
</div>
{% endblock tabcontent %}