{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}
{% import "macros/loading_spinner.html" as spinner %}

{% block page_title %}Pending Items{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-7xl space-y-6 px-4 py-6 sm:px-6 lg:px-8">
    <header class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-foreground">Pending items</h1>
            <p class="mt-1 text-sm text-muted">Consolidated pick list — products grouped across open orders.</p>
        </div>
        <a href="/plugins/orders" class="blocks-button blocks-button-secondary inline-flex min-h-11 items-center justify-center gap-2">
            <i class="fas fa-shopping-bag" aria-hidden="true"></i> All orders
        </a>
    </header>

{{ crud::shell_open(config_url="/plugins/orders/assets/admin/pending_items_list.json", mount_id="pending-items-list", custom_mount=true) }}

<div class="overflow-x-auto rounded-xl border border-divider bg-surface">
    <table class="min-w-full">
        <thead></thead>
        <tbody>
        {{ spinner::table_skeleton(colspan=4, lines=3, label="Loading pending items…") }}
    </tbody>
    </table>
</div>

{{ crud::shell_close() }}

<div id="pending-items-config" hidden
     data-context-selector="#pending-items-config"
     data-currency-symbol="{{ settings.currency_symbol | default(value='₹') }}">
</div>
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/orders/assets/js/pending_items_list.js"></script>
{% endblock %}