{% extends "admin_base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/catalog/assets/css/catalog-collection-products.ui.css?v={{ asset_version | default(value='1') }}">
{% endblock %}

{% block page_title %}Collection Products{% endblock %}
{% block admin_content %}
<div class="mx-auto min-h-[calc(100vh-5rem)] max-w-screen-2xl p-4 text-foreground sm:p-6 lg:p-8">
    <!-- Header Section -->
    <div class="mb-6 flex flex-col gap-4 sm:mb-8 sm:flex-row sm:items-start sm:justify-between">
        <div class="min-w-0">
            <h2 id="collection-title" class="mb-1 flex flex-wrap items-center gap-2 text-2xl font-bold tracking-tight text-foreground">Collection</h2>
            <p id="collection-desc" class="text-sm text-muted">Add a whole product or choose individual variants below it.</p>
            <p id="item-count" class="mt-2 text-sm font-semibold text-brand" aria-live="polite"></p>
        </div>
        
        <div class="flex gap-3">
            <a href="/plugins/catalog/collections" class="inline-flex min-h-11 items-center gap-2 rounded-lg border border-divider bg-surface px-4 py-2 text-sm font-semibold text-foreground shadow-sm transition-colors hover:bg-canvas focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">
                <i class="fas fa-arrow-left"></i>
                <span>Back</span>
            </a>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="relative overflow-visible rounded-2xl border border-divider bg-surface pb-4 shadow-lg">
        <div data-catalog-collection-products-feedback class="blocks-workspace-notice mx-4 mt-4 sm:mx-6" role="status" aria-live="polite" tabindex="-1" hidden></div>
        <p class="px-4 pt-4 text-sm text-muted sm:px-6">Adding a product includes all its variants. Use a variant row to include or exclude that item individually.</p>
        <!-- Search / Filter Toolbar -->
        <div class="flex flex-col gap-3 border-b border-divider p-4 sm:flex-row sm:items-center sm:p-6">
            <div class="relative min-w-0 flex-1">
                <span class="blocks-control-icon" aria-hidden="true">
                    <i class="fas fa-search text-xs"></i>
                </span>
                <input id="search-products-input" type="search" class="blocks-control--leading-icon"
                    placeholder="Search products or variants…">
            </div>
            <select id="filter-availability-select" class="blocks-control--select blocks-control--filter-select appearance-none">
                <option value="">All Profiles</option>
            </select>
            <div class="flex gap-2">
                <button id="expand-all-btn" class="inline-flex min-h-11 items-center gap-2 rounded-lg border border-divider bg-surface px-3 text-sm font-semibold text-foreground hover:bg-canvas focus-visible:outline-2 focus-visible:outline-brand" title="Expand All">
                    <i class="fas fa-chevron-down"></i><span>Expand</span>
                </button>
                <button id="collapse-all-btn" class="inline-flex min-h-11 items-center gap-2 rounded-lg border border-divider bg-surface px-3 text-sm font-semibold text-foreground hover:bg-canvas focus-visible:outline-2 focus-visible:outline-brand" title="Collapse All">
                    <i class="fas fa-chevron-right"></i><span>Collapse</span>
                </button>
            </div>
        </div>

        <div class="max-w-full overflow-x-auto">
            <table class="w-full min-w-[900px] border-collapse text-left text-sm">
                <thead>
                    <tr>
                        <th class="w-12 border-b border-divider px-4 py-3">
                            <input type="checkbox" id="select-all-products">
                        </th>
                        <th class="min-w-56 border-b border-divider px-4 py-3">Product / variant</th>
                        <th class="border-b border-divider px-4 py-3 text-center">Variants</th>
                        <th class="border-b border-divider px-4 py-3 text-center">MRP (Base)</th>
                        <th class="min-w-40 border-b border-divider px-4 py-3">Unit Price</th>
                        <th class="min-w-48 border-b border-divider px-4 py-3">Availability</th>
                        <th class="w-20 border-b border-divider px-4 py-3 text-right">Action</th>
                    </tr>
                </thead>
                <tbody id="collection-products-body">
                    <!-- Products will be injected here -->
                </tbody>
            </table>
        </div>
        
        <!-- Empty State: loading / no-products / load-error (managed by collection-products.js) -->
        <div id="empty-state" class="p-12 text-center font-semibold text-muted" hidden>
            <i id="empty-state-icon" class="fas fa-sync fa-spin"></i>
            <p id="empty-state-text">Catalog is syncing...</p>
            <p id="empty-state-detail" class="mt-2 text-sm font-normal text-muted" hidden></p>
            <button id="cp-retry-btn" type="button" class="mt-4 inline-flex min-h-11 items-center gap-2 rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-white shadow-sm  focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand" hidden>
                <i class="fas fa-redo"></i>
                <span>Retry</span>
            </button>
        </div>

        <!-- Bulk Actions Bar -->
        <div id="bulk-actions" class="sticky bottom-0 flex items-center justify-between gap-4 border-t-2 border-brand bg-surface p-4 shadow-lg sm:px-6" hidden>
            <div>
                <span id="bulk-select-count" class="font-bold">0 Selected</span>
            </div>
            <div class="cp-actions">
                <button id="bulk-add-btn" class="inline-flex min-h-11 items-center gap-2 rounded-lg bg-brand px-4 text-sm font-semibold text-white  focus-visible:outline-2 focus-visible:outline-brand">
                    <i class="fas fa-plus"></i> Bulk Add
                </button>
                <button id="bulk-remove-btn" class="inline-flex min-h-11 items-center gap-2 rounded-lg border border-danger/30 bg-danger/5 px-4 text-sm font-semibold text-danger   focus-visible:outline-2 focus-visible:outline-danger">
                    <i class="fas fa-unlink"></i> Bulk Unlink
                </button>
            </div>
        </div>
    </div>
</div>

<div id="catalog-admin-data" 
    data-currency="{{ currency_symbol | default(value='₹') }}"
    data-image-provider="{{ plugin_settings.image_provider | default(value='url') }}"
    hidden></div>
{% endblock %}

{% block scripts %}
<script src="/plugins/catalog/assets/js/catalog-components.js"></script>
<script src="/plugins/catalog/assets/js/collection-products.js?v=variant-rows-v2"></script>
{% endblock %}