{% extends "base.html" %}

{% block title %}Pending Deliveries{% endblock %}
{% block page_title %}Pending Deliveries{% endblock %}
{% block page_subtitle %}Orders awaiting delivery{% endblock %}

{% block content %}
{% include "partials/breadcrumb.html" %}

<div class="toolbar-tablet">
    <div class="toolbar-tablet-actions" style="margin-left:auto">
        <a href="?export=csv" class="btn-secondary">Export CSV</a>
        <a href="?export=xlsx" class="btn-secondary">Export Excel</a>
    </div>
</div>

<div class="table-scroll-card card">
    {% if orders %}
    <div class="table-scroll">
    <table>
        <thead>
            <tr>
                <th>Order #</th><th>Customer</th><th>Mobile</th><th>Expected Delivery</th><th>Balance</th><th>Status</th>
            </tr>
        </thead>
        <tbody>
            {% for order in orders %}
            <tr>
                <td class="font-medium">
                    <a href="{% url 'orders:detail' order.pk %}" class="table-action-link text-brand-600">{{ order.order_number }}</a>
                </td>
                <td>{{ order.customer.name }}</td>
                <td>{{ order.customer.mobile_number }}</td>
                <td>{{ order.expected_delivery_date|date:"d M Y" }}</td>
                <td>₹{{ order.balance_amount }}</td>
                <td><span class="badge badge-counter">{{ order.get_status_display }}</span></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    {% else %}
    {% include "partials/empty_state.html" with title="No pending deliveries" message="All orders have been delivered or none match the criteria." %}
    {% endif %}
</div>
{% endblock %}