{% extends "admin_base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/theme-colors/assets/css/theme-colors.ui.css">
{% endblock %}

{% block page_title %}Theme Colors{% endblock %}
{% block admin_content %}
<main class="tc-theme-studio">
<div id="theme-colors-config" hidden data-light="{{ light | default(value=[]) | json_encode }}"
    data-dark="{{ dark | default(value=[]) | json_encode }}"
    data-unify-brand-colors='{% if unify_brand_colors %}true{% else %}false{% endif %}'
    data-currency-symbol='{{ currency_symbol | default(value=settings.currency_symbol) | default(value="₹") }}' data-save-url="/plugins/theme-colors/save"
    data-inherited-theme="{{ theme_inherited_values | default(value=[]) | json_encode }}" data-editor-schema="/plugins/theme-colors/assets/admin/theme_editor.json" data-preview-url="/"></div>

<header class="tc-studio-heading">
    <div><p class="tc-eyebrow">Site design</p><h1>Make it feel like your brand</h1>
        <p>Select a part of your page, adjust its colors, and preview before saving.</p></div>
    <span id="tc-draft-state" class="tc-draft-state" role="status" aria-live="polite">All changes saved</span>
</header>
<div class="tc-studio-tools" role="toolbar" aria-label="Preview controls">
    <div class="tc-segmented" role="group" aria-label="Preview content">
        <button type="button" data-preview-view="site" aria-pressed="true">Your site</button>
        <button type="button" data-preview-view="components" aria-pressed="false">Component library</button>
    </div>
    <div class="tc-segmented" role="group" aria-label="Device preview">
        <button type="button" data-preview-device="desktop" aria-pressed="true">Desktop</button>
        <button type="button" data-preview-device="mobile" aria-pressed="false">Mobile</button>
    </div>
    <div class="tc-history-actions">
        <button type="button" id="tc-undo" title="Undo" disabled>Undo</button>
        <button type="button" id="tc-redo" title="Redo" disabled>Redo</button>
    </div>
</div>
<div class="tc-layout" data-preview-device="desktop" data-preview-view="site">
    <!-- Color inspector -->
    <div class="tc-editor-panel">
        <!-- Tabs -->
        <div class="tc-tabs" role="tablist" aria-label="Theme palette" data-blocks-admin-tabs>
            <button type="button" class="tc-tab active" data-tab="light" id="tab-light" role="tab" aria-selected="true" aria-controls="panel-light" tabindex="0">
                <i class="fas fa-sun"></i> Light Theme
            </button>
            <button type="button" class="tc-tab" data-tab="dark" id="tab-dark" role="tab" aria-selected="false" aria-controls="panel-dark" tabindex="-1">
                <i class="fas fa-moon"></i> Dark Theme
            </button>
        </div>

        <div class="tc-brand-strip" id="tc-brand-chrome-strip">
            <label class="tc-brand-strip-toggle" for="tc-unify-brand-colors">
                <input type="checkbox" id="tc-unify-brand-colors">
                <span>Brand chrome &amp; sharing</span>
            </label>
            <button type="button" class="tc-brand-strip-jump" id="tc-jump-brand-preview" title="Scroll preview to brand chrome mocks">
                Preview
            </button>
        </div>
        <p class="tc-brand-strip-hint" id="tc-brand-chrome-off-hint">Off — PWA and Search &amp; Social use their own color fields.</p>
        <p class="tc-brand-strip-hint tc-brand-strip-hint--on" id="tc-brand-chrome-on-hint" hidden>On — uses <strong>Primary</strong> and <strong>Body background</strong> (light). Click mocks in the preview panel.</p>

        <div id="tc-contrast-panel" class="tc-contrast-panel" hidden></div>
        <div id="tc-inspector-bar" class="tc-inspector-bar" hidden>
            <span class="tc-inspector-label" id="tc-inspector-label"></span>
            <button type="button" class="tc-inspector-clear" id="tc-inspector-clear">Clear selection</button>
        </div>

        <!-- Light Theme Editor -->
        <div class="tc-tab-content active" id="panel-light" role="tabpanel" aria-labelledby="tab-light" tabindex="0">
            <div class="tc-section-label">Layout readability</div>
            <p class="tc-section-hint">Click a preview block on the right to focus this list, or use <strong>Clear selection</strong> for the full palette.</p>
            <div class="tc-pair-list" id="light-pairs"></div>

            <div id="light-token-groups"></div>
        </div>

        <!-- Dark Theme Editor -->
        <div class="tc-tab-content" id="panel-dark" role="tabpanel" aria-labelledby="tab-dark" tabindex="0" hidden>
            <div class="tc-section-label">Layout readability</div>
            <p class="tc-section-hint">Click a preview block on the right to focus this list, or use <strong>Clear selection</strong> for the full palette.</p>
            <div class="tc-pair-list" id="dark-pairs"></div>

            <div id="dark-token-groups"></div>
        </div>

        <div class="tc-actions">
            <button class="btn btn-primary tc-save-btn" id="tc-save-btn" disabled>
                <i class="fas fa-save"></i> Save
            </button>
            <button type="button" class="btn btn-outline" id="tc-save-draft" disabled>Save draft</button>
            <button type="button" class="btn btn-outline" id="tc-recovery-toggle" aria-expanded="false" aria-controls="tc-recovery" disabled>Drafts &amp; history</button>
            <button class="btn btn-outline tc-export-btn" id="tc-export-btn" title="Export theme to JSON">
                <i class="fas fa-download"></i> Export
            </button>
            <button class="btn btn-outline tc-import-btn" id="tc-import-btn" title="Import theme from JSON">
                <i class="fas fa-upload"></i> Import
            </button>
            <input type="file" id="tc-import-input" accept=".json" class="hidden">
            <button class="btn btn-outline tc-reset-btn" id="tc-reset-btn">
                <i class="fas fa-undo"></i> Reset draft
            </button>
            <span class="tc-status-msg" id="tc-status-msg" role="status" aria-live="polite"></span>
        </div>
    </div>

    <!-- RIGHT PANEL: Live Preview -->
    <div class="tc-preview-panel">
        <div class="tc-preview-header">
            <div class="tc-preview-header-text">
                <span class="tc-preview-label"><i class="fas fa-eye"></i> Live Preview</span>
                <span class="tc-preview-hint">Click an element to edit its shared colors. Preview changes stay private until you save.</span>
            </div>
        </div>

        <section id="tc-site-preview" class="tc-site-preview" aria-label="Live site preview">
            <form id="tc-preview-location" class="tc-preview-location">
                <label for="tc-preview-path">Page</label>
                <input id="tc-preview-path" type="text" value="/" placeholder="/your-page" spellcheck="false">
                <button type="submit">Preview</button>
            </form>
            <p id="tc-preview-state" class="tc-preview-state" role="status">Loading your site…</p>
            <div class="tc-site-viewport">
                <iframe id="tc-site-frame" title="Your site — select an element to edit its colors"
                    sandbox="allow-same-origin" referrerpolicy="same-origin"></iframe>
            </div>
            <p class="tc-preview-footnote">Page layout and colors are live. Forms, links and scripts are paused in this preview. Use the component library for interactive widget samples.</p>
        </section>

        <!-- Scoped preview: CSS vars set directly on this element.
             data-overlay-stack="none" keeps mock .crud-modal / .modal samples
             in this frame (BlocksOverlayStack otherwise parks them on <body>). -->
        <div class="tc-preview-frame" id="tc-preview-root" hidden data-overlay-stack="none">

            <!-- Brand chrome & sharing (PWA, browser, OG) -->
            <div class="pv-section pv-brand-chrome-section" id="pv-brand-chrome-section">
                <div class="pv-label">
                    <i class="fas fa-mobile-alt"></i> Brand chrome &amp; sharing
                    <span class="pv-brand-status pv-brand-status--off" id="pv-brand-status-off">Not active</span>
                    <span class="pv-brand-status pv-brand-status--on" id="pv-brand-status-on" hidden>Unified</span>
                </div>
                <p class="pv-brand-chrome-lead">Light-theme <strong>Primary</strong> and <strong>Body background</strong> drive these when unified. OG URL and meta description stay in Platform Settings → Search &amp; Social.</p>
                <div class="pv-brand-chrome-grid">
                    <div class="tc-preview-zone pv-brand-mock" data-tc-inspect="brand-browser" tabindex="0" role="button"
                        title="Browser theme-color — uses Primary">
                        <span class="pv-brand-mock-label">Browser chrome</span>
                        <div class="pv-brand-phone">
                            <div class="pv-brand-browser-bar" id="pv-brand-browser-bar"></div>
                            <div class="pv-brand-browser-page">
                                <span class="pv-brand-browser-url">yoursite.com</span>
                            </div>
                        </div>
                        <span class="pv-brand-mock-token">Primary</span>
                    </div>
                    <div class="tc-preview-zone pv-brand-mock" data-tc-inspect="brand-pwa" tabindex="0" role="button"
                        title="PWA install UI — Primary bar + Body background">
                        <span class="pv-brand-mock-label">PWA install</span>
                        <div class="pv-brand-pwa-mock">
                            <div class="pv-brand-pwa-bar" id="pv-brand-pwa-bar"></div>
                            <div class="pv-brand-pwa-body" id="pv-brand-pwa-body">
                                <div class="pv-brand-pwa-icon"></div>
                                <span class="pv-brand-pwa-name">Your App</span>
                            </div>
                        </div>
                        <span class="pv-brand-mock-token">Primary + Body</span>
                    </div>
                    <div class="tc-preview-zone pv-brand-mock" data-tc-inspect="brand-og" tabindex="0" role="button"
                        title="Social OG letterbox — Body background behind logo">
                        <span class="pv-brand-mock-label">Social share (OG)</span>
                        <div class="pv-brand-og-mock" id="pv-brand-og-bg">
                            <div class="pv-brand-og-logo"></div>
                        </div>
                        <span class="pv-brand-mock-token">Body background</span>
                    </div>
                </div>
            </div>

            <!-- Section: Admin shell (sidebar + content) -->
            <div class="pv-section" data-tc-inspect="admin-shell" tabindex="0" role="button"
                title="Click to edit related colors">
                <div class="pv-label"><i class="fas fa-th-large"></i> Admin shell (sidebar + content)</div>
                <div class="pv-admin-shell">
                    <aside class="tc-preview-sidebar-shell">
                        <div class="sidebar-header">
                            <div class="brand">
                                <span class="nav-text">Acme</span>
                            </div>
                        </div>
                        <nav class="tc-preview-sidebar-nav">
                            <div class="nav-group">
                                <a href="#" class="nav-item active" onclick="return false">
                                    <span class="nav-icon"><i class="fas fa-home"></i></span>
                                    <span class="nav-text">Home</span>
                                </a>
                                <a href="#" class="nav-item" onclick="return false">
                                    <span class="nav-icon"><i class="fas fa-box"></i></span>
                                    <span class="nav-text">Catalog</span>
                                </a>
                            </div>
                        </nav>
                    </aside>
                    <div class="pv-admin-shell-main">
                        <div class="pv-admin-shell-topbar">Page title</div>
                        <div class="pv-admin-shell-body">Main content area uses body background.</div>
                    </div>
                </div>
            </div>

            <!-- Section: User Layout (Navbar & Footer) -->
            <div class="pv-section" data-tc-inspect="user-public" tabindex="0" role="button"
                title="Click to edit related colors">
                <div class="pv-label"><i class="fas fa-desktop"></i> User Layout (Public Site)</div>
                <div class="pv-user-navbar">
                    <div class="pv-user-brand"><i class="fas fa-shopping-cart"></i> <span class="logo-text">StoreFront</span></div>
                    <div class="pv-user-links">
                        <span>Home</span>
                        <span>Catalog</span>
                        <span>About</span>
                    </div>
                </div>
                <div class="pv-user-content-strip">
                    Page Content Area
                </div>
                <div class="pv-user-bottom-navbar">
                    <div class="pv-user-nav-item active"><i class="fas fa-home"></i><span>Home</span></div>
                    <div class="pv-user-nav-item"><i class="fas fa-search"></i><span>Search</span></div>
                    <div class="pv-user-nav-item"><i class="fas fa-shopping-bag"></i><span>Cart</span></div>
                    <div class="pv-user-nav-item"><i class="fas fa-user"></i><span>Profile</span></div>
                </div>
                <div class="pv-user-footer">
                    <div class="pv-user-footer-links">
                        <span>Privacy</span>
                        <span>Terms</span>
                        <span>Support</span>
                    </div>
                    <div class="pv-user-copyright">© 2026 StoreFront. All rights reserved.</div>
                </div>
            </div>

            <!-- Section: Mobile layout (header + bottom nav) -->
            <div class="pv-section" id="pv-mobile-layout-section" data-tc-inspect="mobile-layout" tabindex="0" role="button"
                title="Click to edit related colors">
                <div class="pv-label"><i class="fas fa-mobile-alt"></i> Mobile layout</div>
                <div class="pv-mobile-phone">
                    <header class="pv-mobile-header">
                        <div class="pv-mobile-brand">
                            <i class="fas fa-shopping-cart"></i>
                            <span class="logo-text">StoreFront</span>
                        </div>
                        <span class="pv-mobile-menu-btn" aria-hidden="true"><i class="fas fa-bars"></i></span>
                    </header>
                    <div class="pv-mobile-body">Page content area</div>
                    <nav class="pv-mobile-bottom-nav" aria-label="Mobile navigation preview">
                        <div class="pv-mobile-nav-item active"><i class="fas fa-home"></i><span>Home</span></div>
                        <div class="pv-mobile-nav-item"><i class="fas fa-search"></i><span>Search</span></div>
                        <div class="pv-mobile-nav-item"><i class="fas fa-shopping-bag"></i><span>Cart</span></div>
                        <div class="pv-mobile-nav-item"><i class="fas fa-user"></i><span>Profile</span></div>
                    </nav>
                </div>
            </div>

            <!-- Section: Dashboard Widgets -->

            <div class="pv-section" data-tc-inspect="dashboard-widgets" tabindex="0" role="button"
                title="Click to edit related colors">
                <div class="pv-label"><i class="fas fa-chart-pie"></i> Store Dashboard Preview</div>

                <div class="pv-widget-grid">
                    <div class="pv-widget">
                        <div class="pv-widget-icon"><i class="fas fa-shopping-bag"></i></div>
                        <div class="pv-widget-label">Total Revenue</div>
                        <div class="pv-widget-value">{{ currency_symbol }}1,24,500</div>
                        <div class="pv-widget-trend"><i class="fas fa-arrow-up"></i> 12%</div>
                    </div>
                    <div class="pv-widget">
                        <div class="pv-widget-icon"><i class="fas fa-users"></i></div>
                        <div class="pv-widget-label">New Customers</div>
                        <div class="pv-widget-value">348</div>
                        <div class="pv-widget-trend"><i class="fas fa-arrow-up"></i> 5.4%</div>
                    </div>
                    <div class="pv-widget">
                        <div class="pv-widget-icon"><i class="fas fa-clock"></i></div>
                        <div class="pv-widget-label">Avg. Service Time</div>
                        <div class="pv-widget-value">24m</div>
                        <div class="pv-widget-trend" style="color:var(--pv-danger); opacity:0.8;"><i
                                class="fas fa-arrow-down"></i> 2%</div>
                    </div>
                </div>

                <div class="pv-widget-group-container" style="margin-top:2rem;">
                    <div class="pv-widget-group">
                        <div class="pv-widget-group-header">Inventory Insights</div>
                        <div class="pv-widget-mini-grid">
                            <div class="pv-widget-mini-card">
                                <div class="pv-widget-mini-value">12</div>
                                <div class="pv-widget-mini-label">Low Stock</div>
                            </div>
                            <div class="pv-widget-mini-card">
                                <div class="pv-widget-mini-value">5</div>
                                <div class="pv-widget-mini-label">Out of Stock</div>
                            </div>
                            <div class="pv-widget-mini-card">
                                <div class="pv-widget-mini-value">124</div>
                                <div class="pv-widget-mini-label">New Items</div>
                            </div>
                            <div class="pv-widget-mini-card">
                                <div class="pv-widget-mini-value">8</div>
                                <div class="pv-widget-mini-label">Reorders</div>
                            </div>
                        </div>
                    </div>
                    <div class="pv-widget-group">
                        <div class="pv-widget-group-header">Orders History</div>
                        <div class="pv-widget-mini-grid">
                            <div class="pv-widget-mini-card">
                                <div class="pv-widget-mini-value">45</div>
                                <div class="pv-widget-mini-label">Processing</div>
                            </div>
                            <div class="pv-widget-mini-card">
                                <div class="pv-widget-mini-value">328</div>
                                <div class="pv-widget-mini-label">Shipped</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Section: Table toolbar + table + pagination (separate click targets = correct editor jump) -->
            <div class="pv-section">
                <div class="pv-label"><i class="fas fa-table"></i> Admin table (click a zone below to edit those tokens)</div>
                <div class="tc-preview-zone" data-tc-inspect="table-toolbar" tabindex="0" role="button"
                    title="Toolbar &amp; search field colors">
                    <div class="table-toolbar pv-table-toolbar-demo">
                        <div class="table-search-group">
                            <input type="search" class="table-search-input" placeholder="Search…" readonly aria-label="Search demo">
                        </div>
                        <button type="button" class="btn btn-primary btn-sm">Add New</button>
                    </div>
                </div>
                <div class="tc-preview-zone" data-tc-inspect="table-surface" tabindex="0" role="button"
                    title="Table surface, header, cells, borders, row hover">
                    <div class="pv-table-container">
                        <table class="blocks-admin-table">
                            <thead>
                                <tr>
                                    <th>SKU</th>
                                    <th>Name</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>SKU-1</td>
                                    <td>Sample row</td>
                                    <td>
                                        <button type="button" class="btn-action btn-edit"><i class="fas fa-pen"></i> Edit</button>
                                        <button type="button" class="btn-action btn-delete"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>SKU-2</td>
                                    <td>Another row</td>
                                    <td>
                                        <button type="button" class="btn-action btn-edit"><i class="fas fa-pen"></i> Edit</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>SKU-3</td>
                                    <td>Icon actions</td>
                                    <td class="actions-cell">
                                        <button type="button" class="btn-icon" title="Edit"><i class="fas fa-edit"></i></button>
                                        <button type="button" class="btn-icon text-danger" title="Delete"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tc-preview-zone" data-tc-inspect="table-pagination-zone" tabindex="0" role="button"
                    title="Pagination bar colors">
                    <div class="table-pagination">
                        <div class="pagination-info">Showing 1–2 of 24</div>
                        <div class="pagination-controls">
                            <button type="button" class="pagination-btn" disabled aria-label="Previous">‹</button>
                            <button type="button" class="pagination-btn active">1</button>
                            <button type="button" class="pagination-btn">2</button>
                            <button type="button" class="pagination-btn" aria-label="Next">›</button>
                        </div>
                    </div>
                </div>
                <div class="tc-preview-zone" data-tc-inspect="table-badges" tabindex="0" role="button"
                    title="Badge chips (semantic tokens)">
                    <div class="pv-badge-row">
                        <span class="pv-badge pv-badge-blue">Info</span>
                        <span class="pv-badge pv-badge-green">Success</span>
                        <span class="pv-badge pv-badge-gray">Neutral</span>
                    </div>
                </div>
            </div>

            <!-- Section: Data Tables (compact) -->
            <div class="pv-section" data-tc-inspect="data-table" tabindex="0" role="button"
                title="Click to edit table component colors">
                <div class="pv-label"><i class="fas fa-table"></i> Data Tables (compact)</div>
                <div class="pv-table-container">
                    <table class="blocks-admin-table">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Category</th>
                                <th>Price</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>Blue Denim Jacket</strong></td>
                                <td>Apparel</td>
                                <td>{{ currency_symbol }}2,499</td>
                                <td><span class="pv-status">In Stock</span></td>
                            </tr>
                            <tr>
                                <td><strong>Leather Wallet</strong></td>
                                <td>Accessories</td>
                                <td>{{ currency_symbol }}999</td>
                                <td><span class="pv-status">In Stock</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Section: Topbar -->
            <div class="pv-section" data-tc-inspect="app-topbar" tabindex="0" role="button"
                title="Click to edit related colors">
                <div class="pv-label"><i class="fas fa-heading"></i> App Topbar</div>
                <div class="pv-topbar">
                    <div class="pv-topbar-brand"><i class="fas fa-cubes"></i> My Store</div>
                    <div class="pv-topbar-actions">
                        <span class="pv-avatar"><i class="fas fa-user"></i></span>
                    </div>
                </div>
                <div class="pv-body-bg-strip">
                    Body background — <span class="pv-var-tag">--bg-body</span>
                </div>
            </div>

            <!-- Section: Sidebar -->
            <div class="pv-section" data-tc-inspect="sidebar-nav" tabindex="0" role="button"
                title="Click to edit related colors">
                <div class="pv-label"><i class="fas fa-columns"></i> Sidebar</div>
                <aside class="tc-preview-sidebar-shell tc-preview-sidebar-standalone">
                    <div class="sidebar-header">
                        <div class="brand">
                            <span class="nav-text">Acme</span>
                        </div>
                    </div>
                    <nav class="tc-preview-sidebar-nav">
                        <div class="nav-group">
                            <a href="#" class="nav-item active" onclick="return false">
                                <span class="nav-icon"><i class="fas fa-home"></i></span>
                                <span class="nav-text">Dashboard</span>
                            </a>
                            <a href="#" class="nav-item" onclick="return false">
                                <span class="nav-icon"><i class="fas fa-box"></i></span>
                                <span class="nav-text">Products</span>
                            </a>
                            <a href="#" class="nav-item" onclick="return false">
                                <span class="nav-icon"><i class="fas fa-users"></i></span>
                                <span class="nav-text">Customers</span>
                            </a>
                            <a href="#" class="nav-item" onclick="return false">
                                <span class="nav-icon"><i class="fas fa-cog"></i></span>
                                <span class="nav-text">Settings</span>
                            </a>
                        </div>
                    </nav>
                </aside>
            </div>

            <!-- Section: Buttons & Accents -->
            <div class="pv-section" data-tc-inspect="buttons-accents" tabindex="0" role="button"
                title="Click to edit related colors">
                <div class="pv-label"><i class="fas fa-mouse-pointer"></i> Buttons & Accents</div>
                <div class="pv-buttons-row">
                    <button type="button" class="btn btn-primary btn-sm">Primary Button</button>
                    <button type="button" class="btn btn-primary btn-sm tc-preview-btn-hover">Hover State</button>
                    <button type="button" class="btn btn-sm tc-preview-btn-danger">Danger Action</button>
                    <button type="button" class="btn btn-outline btn-sm">Outline Button</button>
                </div>
                <div class="pv-accent-strip">
                    <span class="pv-chip pv-chip-primary">Primary Chip</span>
                    <a href="#" class="nav-item active tc-preview-accent-nav" onclick="return false">Sidebar Accent</a>
                </div>
            </div>

            <!-- Section: Color Tokens -->
            <div class="pv-section" data-tc-inspect="typography" tabindex="0" role="button"
                title="Click to edit related colors">
                <div class="pv-label"><i class="fas fa-font"></i> Typography & Tokens</div>
                <div class="pv-card" style="gap:0.5rem; display:flex; flex-direction:column;">
                    <p class="pv-text-main">Main text color for headings and body. <span
                            class="pv-var-tag">--text-main</span></p>
                    <p class="pv-text-muted">Muted text color for secondary info. <span
                            class="pv-var-tag">--text-muted</span></p>
                    <p class="pv-text-sidebar-ex">Sidebar navigation text color. <span
                            class="pv-var-tag">--text-sidebar</span></p>
                    <div class="pv-text-inverse-wrap">
                        <span class="pv-text-inverse-ex">Action labels on primary background</span>
                    </div>
                </div>
            </div>

            <!-- Section: Form Elements -->
            <div class="pv-section" data-tc-inspect="forms" tabindex="0" role="button"
                title="Click to edit related colors">
                <div class="pv-label"><i class="fas fa-edit"></i> Form Elements</div>
                <div class="pv-card">
                    <div class="pv-form-row">
                        <label class="pv-form-label">Input Label</label>
                        <input class="pv-input" type="text" placeholder="Text input" readonly>
                    </div>
                    <div class="pv-form-row">
                        <label class="pv-form-label">Select</label>
                        <select class="pv-input" disabled>
                            <option>Option A</option>
                        </select>
                    </div>
                    <div class="pv-form-row">
                        <label class="pv-form-label">Helper &amp; link</label>
                        <p class="pv-form-hint">Use a <a href="#" class="pv-form-link" onclick="return false;">support link</a> for details.</p>
                    </div>
                </div>
            </div>

            <!-- Section: Modal UI (CRUD classes) -->
            <div class="pv-section" data-tc-inspect="modal-crud" tabindex="0" role="button"
                title="Click to edit related colors">
                <div class="pv-label"><i class="fas fa-window-maximize"></i> Modal UI (crud-modal)</div>
                <div class="pv-crud-modal-host">
                    <div class="crud-modal tc-crud-modal-inline" style="display:flex;" data-overlay-stack="none" data-modal-no-auto-wire>
                        <div class="modal-content">
                            <div class="modal-header">
                                <h3>Edit item</h3>
                                <button type="button" class="close-btn" aria-label="Close">&times;</button>
                            </div>
                            <div class="modal-body">Modal body uses theme tokens. Scrollable region in real dialogs.</div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary btn-sm">Save</button>
                                <button type="button" class="btn btn-outline btn-sm">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Section: Toasts -->
            <div class="pv-section" data-tc-inspect="toasts" tabindex="0" role="button"
                title="Click to edit related colors">
                <div class="pv-label"><i class="fas fa-bell"></i> Toasts</div>
                <div class="pv-toast-stack">
                    <div class="toast toast-success toast-visible pv-toast-demo">
                        <span class="toast-icon"><i class="fas fa-check-circle"></i></span>
                        <span class="toast-message">Saved successfully</span>
                    </div>
                    <div class="toast toast-warning toast-visible pv-toast-demo">
                        <span class="toast-icon"><i class="fas fa-exclamation-triangle"></i></span>
                        <span class="toast-message">Review warnings below</span>
                    </div>
                    <div class="toast toast-error toast-visible pv-toast-demo">
                        <span class="toast-icon"><i class="fas fa-times-circle"></i></span>
                        <span class="toast-message">Something went wrong</span>
                    </div>
                </div>
            </div>

            <!-- Section: Loading & empty state -->
            <div class="pv-section">
                <div class="pv-label"><i class="fas fa-spinner"></i> Loading &amp; empty table</div>
                <div class="tc-preview-zone" data-tc-inspect="table-loading" tabindex="0" role="button"
                    title="Loading strip uses toolbar tokens">
                    <div class="table-view-loading pv-loading-demo">Loading data…</div>
                </div>
                <div class="tc-preview-zone" data-tc-inspect="table-empty" tabindex="0" role="button"
                    title="Empty state uses table tokens">
                    <div class="pv-table-container" style="margin-top:0.75rem;">
                        <table class="blocks-admin-table">
                            <tbody>
                                <tr>
                                    <td class="no-data" colspan="3">No records yet</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Section: layout readability preview -->
            <div class="pv-section" data-tc-inspect="contrast-pairs" tabindex="0" role="button"
                title="Click to edit related colors">
                <div class="pv-label"><i class="fas fa-swatchbook"></i> Layout readability</div>
                <div class="pv-pair-preview-grid">
                    <div class="pv-pair-card" style="background: var(--pv-bg-body); color: var(--pv-text-main);">
                        <span class="pv-pair-name">Main Text on Body</span>
                        <span class="pv-pair-sample">The quick brown fox jumps over the lazy dog.</span>
                    </div>
                    <div class="pv-pair-card" style="background: var(--pv-bg-body); color: var(--pv-text-muted);">
                        <span class="pv-pair-name">Muted Text on Body</span>
                        <span class="pv-pair-sample">Secondary information looks like this.</span>
                    </div>
                    <div class="pv-pair-card" style="background: var(--pv-bg-card); color: var(--pv-text-main);">
                        <span class="pv-pair-name">Main Text on Card</span>
                        <span class="pv-pair-sample">Content inside a white or dark card component.</span>
                    </div>
                    <div class="pv-pair-card" style="background: var(--pv-bg-sidebar); color: var(--pv-text-sidebar);">
                        <span class="pv-pair-name">Sidebar Navigation</span>
                        <span class="pv-pair-sample"><i class="fas fa-home"></i> Dashboard Menu Item</span>
                    </div>
                    <div class="pv-pair-card" style="background: var(--pv-primary); color: var(--pv-text-on-primary);">
                        <span class="pv-pair-name">Primary Action</span>
                        <span class="pv-pair-sample">Click Me (Primary Button Style)</span>
                    </div>
                    <div class="pv-pair-card" style="background: var(--pv-danger); color: var(--pv-text-on-primary);">
                        <span class="pv-pair-name">Danger Action</span>
                        <span class="pv-pair-sample">Delete (Danger Button Style)</span>
                    </div>
                    <div class="pv-pair-card" style="background: var(--pv-bg-navbar); color: var(--pv-text-navbar);">
                        <span class="pv-pair-name">Navbar links</span>
                        <span class="pv-pair-sample">Home · Catalog · About</span>
                    </div>
                    <div class="pv-pair-card" style="background: var(--pv-bg-navbar); color: var(--pv-text-navbar-brand, var(--pv-primary));">
                        <span class="pv-pair-name">Logo text</span>
                        <span class="pv-pair-sample logo-text">StoreFront</span>
                    </div>
                    <div class="pv-pair-card" style="background: var(--pv-bg-bottom-nav); color: var(--pv-text-bottom-nav);">
                        <span class="pv-pair-name">Bottom Nav Preview</span>
                        <span class="pv-pair-sample"><i class="fas fa-home"></i> Home Item</span>
                    </div>
                    <div class="pv-pair-card" style="background: var(--pv-bg-footer); color: var(--pv-text-footer);">
                        <span class="pv-pair-name">Footer Preview</span>
                        <span class="pv-pair-sample">© 2026 All Rights Reserved</span>
                    </div>
                </div>
            </div>

        </div><!-- end tc-preview-root -->
    </div>
</div>
<section id="tc-recovery" hidden aria-label="Saved drafts and publication history">
    {% include "partials/configuration_recovery.html" %}
</section>
</main>
{% endblock %}

{% block scripts %}
<script src="/static/js/blocks-theme-tokens.js"></script>
<script src="/static/js/blocks-draft.js"></script>
<script src="/static/js/blocks-configuration-client.js"></script>
<script src="/static/js/blocks-configuration-session.js"></script>
<script src="/static/js/blocks-configuration-recovery.js"></script>
<script src="/static/js/blocks-theme-preview.js"></script>
<script src="/plugins/theme-colors/assets/js/theme_colors_admin.js"></script>
{% endblock %}