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

{% block page_title %}Orders{% 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">
    <div data-orders-feedback class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div>
    <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">Orders</h1>
            <p class="mt-1 text-sm text-muted">Manage your store orders and track fulfillment.</p>
        </div>
        <div class="flex flex-col gap-2 sm:flex-row">
            <a href="/plugins/orders/channel-settlements" class="blocks-button blocks-button-secondary inline-flex min-h-11 items-center justify-center gap-2">
                <i class="fas fa-money-check-alt" aria-hidden="true"></i> Channel payouts
            </a>
            <a href="/plugins/orders/pending-items" class="blocks-button blocks-button-primary inline-flex min-h-11 items-center justify-center gap-2">
                <i class="fas fa-clipboard-list" aria-hidden="true"></i> Pending items
            </a>
            <button type="button" id="orders-export-btn" class="blocks-button blocks-button-secondary inline-flex min-h-11 items-center justify-center gap-2">
                <i class="fas fa-file-export" aria-hidden="true"></i> Export orders
            </button>
        </div>
    </header>

    <section class="space-y-4" aria-label="Order list">
    <nav class="hidden overflow-x-auto rounded-xl border border-divider bg-surface px-3 sm:block sm:px-5" aria-label="Filter orders">
        <div class="blocks-filter-tabs" id="orders-filter-tabs">
            <a href="#active" class="orders-filter-tab filter-tab blocks-filter-tab active" data-tab="active">All orders</a>
            <a href="#purchase" class="orders-filter-tab filter-tab blocks-filter-tab" data-tab="purchase">Purchase</a>
            <a href="#history" class="orders-filter-tab filter-tab blocks-filter-tab" data-tab="history">History</a>
        </div>
    </nav>

    <div class="sm:hidden">
        <label class="sr-only" for="orders-mobile-filter">Filter orders</label>
        <select id="orders-mobile-filter" class="w-full min-h-11">
            <option value="active" selected>All orders</option>
            <option value="purchase">Purchase</option>
            <option value="history">History</option>
        </select>
    </div>

{{ crud::shell_open(config_url="/plugins/orders/assets/admin/orders_list.json", mount_id="orders-admin-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=8, lines=4, label="Loading orders…") }}
    </tbody>
    </table>
</div>

{{ crud::shell_close() }}

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

{% block scripts %}
<script src="/plugins/orders/assets/js/orders-feedback.js" defer></script>
<script src="/plugins/orders/assets/js/orders_list.js"></script>
<script src="/plugins/orders/assets/js/orders_admin_list.js"></script>
{% endblock %}