{% extends "admin_base.html" %}

{% block page_title %}Categories{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-7xl space-y-5 px-4 py-5 sm:px-6 lg:py-8">
    <header class="flex flex-col gap-4 rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:flex-row sm:items-center sm:justify-between sm:p-6">
        <div class="min-w-0">
            <a href="/plugins/catalog/index" class="inline-flex min-h-11 items-center text-sm font-medium text-brand hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">← Catalog</a>
            <h1 class="mt-2 text-2xl font-bold text-foreground">Categories</h1>
            <p class="mt-1 max-w-2xl text-sm leading-6 text-muted">Preview how customers browse your store. Expand a category to see its subcategories and products.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <button type="button" class="blocks-button blocks-button-secondary min-h-11" id="catalog-refresh-tree"><i class="fas fa-sync-alt" aria-hidden="true"></i> Refresh tree</button>
            <button type="button" class="blocks-button blocks-button-primary min-h-11" id="catalog-add-root-category"><i class="fas fa-plus" aria-hidden="true"></i> Add category</button>
            <button type="button" class="blocks-button blocks-button-primary min-h-11" id="catalog-add-product"><i class="fas fa-box" aria-hidden="true"></i> Add product</button>
        </div>
    </header>

    <section class="min-w-0 overflow-visible rounded-2xl border border-divider bg-surface p-3 shadow-sm sm:p-5" aria-label="Category tree">
        <div id="catalog-category-tree" class="catalog-category-tree" aria-live="polite" aria-busy="true">
            <p class="catalog-tree-loading rounded-lg bg-canvas p-4 text-center text-sm text-muted" role="status">Loading categories and products…</p>
        </div>
    </section>
</main>

{# CrudManager / TableView require a container id; tree page uses modals only — host is visually hidden #}
<div id="categories-table" class="catalog-categories-crud-host" aria-hidden="true"></div>
<div id="catalog-products-crud-host" class="catalog-categories-crud-host" aria-hidden="true"></div>

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

{% block scripts %}
<link rel="stylesheet" href="/plugins/catalog/assets/css/catalog-categories.ui.css?v={{ asset_version | default(value='1') }}">
<script src="/static/js/tree-selection.js"></script>
<script src="/plugins/catalog/assets/catalog-schemas.js"></script>
<script src="/static/js/blocks-plugin-bridge.js"></script>
<script src="/plugins/catalog/assets/js/catalog-product-form-extensions.js?v=linked-fields-v1"></script>
<script src="/plugins/catalog/assets/categories.js?v=linked-fields-v1"></script>
{% endblock %}