{% extends 'base.html' %}
{% load i18n %}
{% block title %}
    {% trans 'Plans Orders' %}
{% endblock %}
{% block body %}
    {% block order_header %}
        <h3 class="mt-4">
            {% trans "Plan Purchase History" %}<i class="fa-solid fa-clipboard-list ms-2 text-primary"></i>
        </h3>
    {% endblock %}
    {% if object_list %}
        {% block order_table %}
            <div class="table-responsive px-1 scrollbar mt-3">
                <table class="table align-items-center table-flush">
                    <thead>
                        <tr class="bg-body-highlight">
                            <th>ID</th>
                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Name' %}</th>
                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Created' context 'order created' %}</th>
                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Status' context 'order status' %}</th>
                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Completed' context 'order completed' %}</th>
                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Total' context 'total amount, value' %}</th>
                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Plan valid from' %}</th>
                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Plan valid until' %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in object_list %}
                            <tr class="{% if order.status == 2 %} success {% elif order.status == 3 %} danger {% elif order.status == 4 %} warning {% elif order.status == 5 %} info {% endif %}">
                                <td class="align-middle product white-space-nowrap">
                                    <a href="{{ order.get_absolute_url }}">{{ order.pk }}</a>
                                </td>
                                <td class="align-middle product white-space-nowrap">
                                    <a href="{{ order.get_absolute_url }}">{{ order.name }}</a>
                                </td>
                                <td class="date align-middle product white-space-nowrap">{{ order.created|date }}</td>
                                <td class="status align-middle product white-space-nowrap">{{ order.get_status_display }}</td>
                                <td class="date align-middle product white-space-nowrap">{{ order.completed|date|default:"-" }}</td>
                                <td class="number align-middle product white-space-nowrap">
                                    {{ order.total }}&nbsp;<span class="icon-saudi_riyal"></span>
                                </td>
                                <td class="date align-middle product white-space-nowrap">{{ order.plan_extended_from|date|default:"-" }}</td>
                                <td class="date align-middle product white-space-nowrap">{{ order.plan_extended_until|date|default:"-" }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endblock %}
        {% block pagination_second %}
            {% include "plans/pagination.html" %}
        {% endblock %}
    {% else %}
        <p class="text-center">{% trans "You do not have any orders so far." %}<p>
    {% endif %}
{% endblock %}