{% extends "admin_base.html" %}
{% import "macros/admin_management_header.html" as mh %}

{% block page_title %}Product Delivery Rules{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/dist/platform-ui/platform.css">
<link rel="stylesheet" href="/plugins/delivery-slot/assets/css/delivery-slot.ui.css">
<!-- Include the reusable component CSS -->
<link rel="stylesheet" href="/plugins/catalog/assets/css/product-selector.css">
{% endblock %}

{% block admin_content %}
{{ mh::management_header_simple(
    title="Product Delivery Rules",
    subtitle="Select a profile and then choose which products it should apply to. This enforces lead times and slot restrictions for the chosen items.",
    title_heading="h1",
    include_actions_column=false
) }}

<main class="ds-page"><div class="ds-selection">
    <div class="min-w-0">
        <label class="mb-2 block text-sm font-semibold text-foreground">Active Delivery Profile</label>
        <select id="activeProfileSelect" class="blocks-input" disabled>
            <option value="0">Loading profiles…</option>
        </select>
    </div>
    <div class="text-right">
        <div id="selectionStats" class="text-muted" role="status" aria-live="polite">Select a profile to start</div>
    </div>
</div>

<div id="productSelectorContainer" class="ds-card product-selector-container">
    <div id="saveBar" class="ds-savebar hidden">
        <div class="ds-status">
            <span id="changeCount" class="inline-flex min-w-7 items-center justify-center rounded-full bg-brand px-2 py-0.5 text-xs font-semibold text-white">0</span> changes pending
        </div>
        <div class="ds-save-actions">
            <button id="cancelBtn" class="blocks-button blocks-button-secondary">Discard</button>
            <button id="saveBtn" class="blocks-button blocks-button-primary">Save Assignments</button>
        </div>
    </div>
    
    <div id="selectorTarget">
        <div class="rounded-xl border border-divider bg-surface p-6 text-center text-muted" role="status" aria-live="polite">
            <i class="fas fa-layer-group mb-3 text-3xl" aria-hidden="true"></i>
            <p class="m-0">Please select a delivery profile from the dropdown above to manage its product assignments.</p>
        </div>
    </div>
</div>
</main>

{% endblock %}

{% block scripts %}
<!-- Include the reusable component JS -->
<script src="/plugins/catalog/assets/js/product-selector.js"></script>
<script src="/plugins/delivery-slot/assets/js/admin_product_assignment.js"></script>
{% endblock %}