{% extends "customer/baseaccountpage.html" %}
{% load i18n %}
{% load currency_filters %}
{% load staticfiles %}
{% load bootstrap4 %}


{% block tabcontent %}

    {% if orders or form.is_bound %}
        <div class="container pt-5 mb-5">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <form method="get" class="form-horizontal">
                                <div class="row">
                                    <div class="col-md-3">
                                        {% bootstrap_field form.date_from %}
                                    </div>
                                    <div class="col-md-3">
                                        {% bootstrap_field form.date_to %}
                                    </div>
                                    <div class="col-md-3">
                                        {% bootstrap_field form.order_number %}
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-offset-4 col-sm-8">
                                            <button type="submit" class="btn btn-primary btn-hook"
                                                    data-loading-text="{% trans 'Filtering...' %}">{% trans 'Filter results' %}</button>
                                            <a href="{% url 'customer:order-list' %}"
                                               class="btn btn-default">{% trans 'Reset' %}</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    <div class="container">
        <div class="row">
            {% if orders %}
                <div class="col-lg-8 offset-md-2">
                    <h2 class="text-center">{{ form.description }}</h2>
                    {% for order in orders %}
                        <div class="card shadow-sm mb-3">
                            <div class="card-body">
                                <div class="row flex-row">
                                    <div class="col-lg-8">
                                        <div class="d-block small">
                                            <strong>Items</strong>
                                        </div>
                                        <hr class="mb-2 mt-0">
                                        <ol class="small pl-3">
                                            {% for line in order.lines.all %}
                                                <li>{{ line.title }}</li>
                                            {% endfor %}
                                        </ol>
                                    </div>
                                    <div class="col-lg-4 text-right">
                                        <div class="d-block small">
                                            <strong>Total: </strong>{{ order.total_incl_tax|currency:order.currency }}
                                        </div>
                                        <div class="d-block small">
                                            <strong>Date: </strong> {{ order.date_placed|date }}
                                        </div>
                                        <div class="d-block small mb-2">
                                            <strong>Order No: </strong> {{ order.number }}
                                        </div>
                                        <div class="d-block">
                                            <a href="{% url 'customer:order' order_number=order.number %}   "
                                               class="btn btn-primary btn-hook btn-sm">Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}

                    <div class="d-block mt-3 mb-3">
                        {% include "partials/pagination.html" %}
                    </div>

                </div>
            {% else %}
                {% if form.is_bound %}
                    <div class="col-12 mt-5">
                        <p>{% trans "No orders match your search." %}</p>
                    </div>
                {% else %}
                    <div class="col-12 mt-5">
                        <p>{% trans "You haven't placed any orders." %}</p>
                    </div>
                {% endif %}
            {% endif %}
        </div>
    </div>

{% endblock tabcontent %}