{% extends "oscar/customer/baseaccountpage.html" %}
{% load currency_filters %}
{% load i18n %}
{% load static %}

{% block tabcontent %}
 {% if orders or form.is_bound %}
    <div class="row">
        <div class="col-xl-8 me-auto">
            <div class="btn btn-primary mb-3 d-lg-none btn-block w-100" data-bs-toggle="collapse" data-bs-target="#filter-collapse">Filter <i class="fa fa-sliders"></i></div>
            <div class="collapse collapse-open-desktop" id="filter-collapse">
                <div class="card card-body bg-light mb-5">
                    <h2>{% trans "Filter" %}</h2>
                    <form method="get">
                        <div class="row">
                        {% for field in form %}
                            {% if field.name == "date_from" or field.name == "date_to" %}
                            <div class="col-xl-6 mb-0">
                            {% else %}
                            <div class="col-xl-12 mb-0">
                            {% endif %}
                            {% if field.name == "order_number" %}
                            {% include "oscar/partials/form_field.html" with field=field placeholder=field.label nolabel=True %}
                            {% else %}
                            {% include "oscar/partials/form_field.html" with field=field placeholder=field.label %}
                            {% endif %}
                            </div>
                        {% endfor %}
                        </div>
                        <div class="form-group row">
                            <div class="col-xl-8">
                                <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Filtering...' %}">{% trans 'Filter results' %}</button>
                                <a href="{% url 'customer:order-list' %}" class="btn btn-secondary">{% trans 'Reset' %}</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endif %}

{% if orders %}
<table class="table table-card">
    <thead>
        <tr>
            {% block table_heading %}
                <th class="border-0">{% trans "Order number" %}</th>
                <th class="border-0">{% trans "Date submitted" %}</th>
                <th class="border-0">{% trans "Num items" %}</th>
                <th class="border-0">{% trans "Total inc tax" %}</th>
                <th class="border-0" colspan="2">{% trans "Status" %}</th>
            {% endblock table_heading %}
        </tr>
    </thead>
    <tbody>
    {% for order in orders %}
        <tr>
            {% block table_data %}
                <td data-label="{% trans 'Order' %}" class="table-row-header">
                    <span><a href="{% url 'customer:order' order_number=order.number %}" class="text-dark stretched-link"><b>{{ order.number }}</b></a></span>
                </td>
                <td data-label="{% trans 'Date submitted' %}:">
                    <span>{{ order.date_placed|date:"d-m-Y" }}</span>
                </td>
                <td data-label="{% trans 'Num items' %}:">
                    <span>{{ order.num_items }}</span>
                </td>
                <td data-label="{% trans 'Total inc tax' %}:">
                    <span>{{ order.total_incl_tax|currency:order.currency }}</span>
                </td>
                <td data-label="{% trans 'Paid' %}:">
                    <span>
                        {% if order.status in "paid,completed" %}
                        <i class="fa fa-check text-success" title="{% trans order.status %}"></i>
                        {% else %}
                        {% trans order.status %}
                        {% endif %}
                    </span>
                </td>
                {% block additional_row_data %}{% endblock additional_row_data %}
                <td data-label="{% trans 'Actions' %}">
                    {% if order.status in "new,pending-payment" %}
                    <a class="btn btn-primary btn-sm" href="{{ order.get_try_again_url }}">{% trans "Pay now" %}</a>
                    {% endif %}
                </td>
            {% endblock table_data %}
        </tr>
    {% endfor %}
    </tbody>
</table>
{% include "oscar/partials/pagination.html" %}
{% else %}
{% if form.is_bound %}
<p>{% trans "No orders match your search." %}</p>
{% else %}
<p>{% trans "You haven't placed any orders." %}</p>
{% endif %}
{% endif %}
{% endblock tabcontent %}