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

{% block styles %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "oscar/js/bootstrap4-datetimepicker/tempusdominus-bootstrap-4.min.css" %}" />
{% endblock %}

{% block scripts %}
    {{ block.super }}
    <script src="{% static "oscar/js/bootstrap4-datetimepicker/moment-with-locales.min.js" %}"></script>
    <script src="{% static "oscar/js/bootstrap4-datetimepicker/tempusdominus-bootstrap-4.min.js" %}"></script>
{% endblock %}


{% block breadcrumbs %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'customer:summary' %}">{% trans 'Account' %}</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">{% trans 'Order history' %}</li>
        </ol>
    </nav>
{% endblock %}

{% block tabcontent %}

    {% if orders or form.is_bound %}
        <div class="card card-body bg-light">
            <h2>{% trans "Filter" %}</h2>
            <form method="get">
                {% include "oscar/partials/form_fields.html" with form=form style='horizontal' %}
                <div class="form-group row">
                    <div class="offset-sm-4 col-sm-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>
    {% endif %}

    {% if orders %}
        <h2>{{ form.description }}</h2>
        <table class="table table-striped table-bordered">
            <tr>
                <th>{% trans "Order number" %}</th>
                <th>{% trans "Num items" %}</th>
                <th>{% trans "Total inc tax" %}</th>
                <th>{% trans "Date submitted" %}</th>
            </tr>
            {% for order in orders %}
                <tr>
                    <td><a href="{% url 'customer:order' order_number=order.number %}">{{ order.number }}</a></td>
                    <td>{{ order.num_items }}</td>
                    <td>{{ order.total_incl_tax|currency:order.currency }}</td>
                    <td>{{ order.date_placed }}</td>
                </tr>
            {% endfor %}
        </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 %}
