{# app/templates/admin/components.html #}
{% extends "admin/base.html" %}

{% block title %}UI Components{% endblock %}

{# ✅ CRITICAL: Link to Alpine.js component #}
{% block alpine_data %}adminComponents(){% endblock %}

{% block extra_head %}
{# Chart.js for charts section #}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" defer></script>
<style>
/* Add smooth scrolling */
html {
    scroll-behavior: smooth;
}
</style>
{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
        UI Components Library
    </h2>
    <a href="/admin/dashboard" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700">
        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
        Back to Dashboard
    </a>
</div>

<!-- Introduction -->
<div class="mb-8 p-6 bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg shadow-lg">
    <div class="flex items-start">
        <span x-html="$icon('collection', 'w-10 h-10 mr-4 flex-shrink-0 text-white')"></span>
        <div>
            <h3 class="text-xl font-bold mb-2 text-white">Quick Reference Library</h3>
            <p class="text-white opacity-90">
                Copy-paste ready UI components for your admin pages. All components support dark mode and are fully accessible.
            </p>
        </div>
    </div>
</div>

<!-- Layout: Sidebar + Content -->
<div class="flex gap-6 items-start">

    <!-- Sticky Navigation Sidebar -->
    <aside class="w-64 flex-shrink-0 sticky top-6 max-h-[calc(100vh-3rem)] overflow-y-auto">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
            <h3 class="text-sm font-semibold text-gray-600 dark:text-gray-400 uppercase mb-3">Sections</h3>
            <nav class="space-y-1">
                <template x-for="section in sections" :key="section.id">
                    <a
                        :href="'#' + section.id"
                        @click.prevent="goToSection(section.id)"
                        class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors"
                        :class="isSectionActive(section.id)
                            ? 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-200 font-medium'
                            : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
                    >
                        <span x-html="$icon(section.icon, 'w-4 h-4 mr-2')"></span>
                        <span x-text="section.name"></span>
                    </a>
                </template>
            </nav>
        </div>

        <!-- Quick Tips -->
        <div class="mt-4 bg-blue-50 dark:bg-gray-800 border border-blue-200 dark:border-gray-700 rounded-lg p-4">
            <div class="flex items-start">
                <span x-html="$icon('light-bulb', 'w-5 h-5 text-blue-600 dark:text-blue-400 mr-2 flex-shrink-0')"></span>
                <div>
                    <p class="text-xs font-semibold text-blue-900 dark:text-blue-200 mb-1">Pro Tip</p>
                    <p class="text-xs text-blue-800 dark:text-blue-300">
                        Click any code block to copy it to your clipboard!
                    </p>
                </div>
            </div>
        </div>
    </aside>

    <!-- Main Content - WIDELY SPACED SECTIONS -->
    <div class="flex-1 space-y-32">

        <!-- E-COMMERCE SECTION -->
        <section id="ecommerce" class="scroll-mt-24">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                    <span x-html="$icon('shopping-cart', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                    E-commerce Components
                </h2>

                <div class="mb-6 p-4 bg-green-50 dark:bg-gray-700 border border-green-200 dark:border-gray-600 rounded-lg">
                    <div class="flex items-start">
                        <span x-html="$icon('information-circle', 'w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0 mt-0.5')"></span>
                        <div>
                            <p class="text-sm text-green-800 dark:text-gray-200">
                                <strong>Shop Components:</strong> Reusable e-commerce components from <code class="bg-green-100 dark:bg-gray-600 px-1 rounded">shared/macros/shop/</code>. These support vendor theming via CSS variables and are designed for the shop frontend.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Available Shop Macros -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Available Shop Macro Files</h3>
                    <div class="grid gap-4 md:grid-cols-2">
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('cube', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                product-card.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Product cards with badges, ratings, wishlist</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">product_card(), product_badge()</code>
                        </div>
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('view-grid', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                product-grid.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Responsive product grid with loading states</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">product_grid(), product_skeleton()</code>
                        </div>
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('shopping-bag', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                add-to-cart.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Add to cart buttons and forms</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">add_to_cart_button(), add_to_cart_form()</code>
                        </div>
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('shopping-cart', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                mini-cart.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Cart dropdown, cart items, summary</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">mini_cart(), cart_item(), cart_summary()</code>
                        </div>
                    </div>
                </div>

                <!-- Product Card Demo -->
                <div class="mb-8 pt-8 border-t border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Product Cards</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        Versatile product cards with badges, ratings, wishlist, and quick-add functionality. Supports <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">sm</code>, <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">md</code>, and <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">lg</code> sizes.
                    </p>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 mb-4">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <template x-for="product in demoProducts" :key="product.id">
                                <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden max-w-[280px] mx-auto">
                                    <div class="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-700">
                                        <a :href="product.url">
                                            <img :src="product.image_url" :alt="product.name" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
                                        </a>
                                        <div class="absolute top-2 left-2 flex flex-col gap-1">
                                            <span x-show="product.sale_price" class="text-xs px-2 py-1 font-semibold text-white bg-red-500 rounded" x-text="'-' + Math.round((1 - product.sale_price / product.price) * 100) + '%'"></span>
                                            <span x-show="product.is_new" class="text-xs px-2 py-1 font-semibold text-white bg-green-500 rounded">New</span>
                                        </div>
                                        <button type="button" @click.prevent="demoToggleWishlist(product)" class="absolute top-2 right-2 p-1.5 rounded-full bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-800 transition-colors opacity-0 group-hover:opacity-100" :class="product.in_wishlist ? 'text-red-500' : 'text-gray-400 hover:text-red-500'">
                                            <span x-html="$icon('heart', 'w-5 h-5')" :class="product.in_wishlist && 'fill-current'"></span>
                                        </button>
                                        <div x-show="product.stock === 0" class="absolute inset-0 bg-black/50 flex items-center justify-center">
                                            <span class="text-white font-semibold text-xs px-2 py-1 bg-gray-900 rounded">Out of Stock</span>
                                        </div>
                                    </div>
                                    <div class="p-3">
                                        <h3 class="text-base font-medium text-gray-900 dark:text-gray-100 mb-1 line-clamp-2">
                                            <a :href="product.url" class="hover:text-purple-600 dark:hover:text-purple-400" x-text="product.name"></a>
                                        </h3>
                                        <div class="flex items-center gap-1 mb-2" x-show="product.rating">
                                            <div class="flex">
                                                <template x-for="i in 5" :key="i">
                                                    <span x-html="$icon('star', 'w-4 h-4')" :class="i <= Math.round(product.rating) ? 'text-yellow-400 fill-current' : 'text-gray-300 dark:text-gray-600'"></span>
                                                </template>
                                            </div>
                                            <span class="text-xs text-gray-500 dark:text-gray-400" x-text="'(' + product.review_count + ')'"></span>
                                        </div>
                                        <div class="flex items-center gap-2 mb-3">
                                            <span class="text-base font-bold" :class="product.sale_price ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'" x-text="'€' + (product.sale_price || product.price).toFixed(2)"></span>
                                            <span x-show="product.sale_price" class="text-sm text-gray-400 line-through" x-text="'€' + product.price.toFixed(2)"></span>
                                        </div>
                                        <button type="button" @click="demoAddToCart(product)" :disabled="product.stock === 0 || addingToCart" class="w-full text-sm px-3 py-2 font-medium text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
                                            <span x-show="addingToCart" x-html="$icon('spinner', 'w-5 h-5')"></span>
                                            <span x-show="!addingToCart" x-html="$icon('shopping-cart', 'w-5 h-5')"></span>
                                            <span x-text="product.stock === 0 ? 'Out of Stock' : 'Add to Cart'"></span>
                                        </button>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/product-card.html' import product_card %}

<template x-for=&quot;product in products&quot; :key=&quot;product.id&quot;>
    {{ product_card() }}
</template>

{# With options #}
{{ product_card(size='lg', show_vendor=true, show_wishlist=false) }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>

                <!-- Mini Cart Demo -->
                <div class="mb-8 pt-8 border-t border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Mini Cart</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        Cart icon button with badge and dropdown preview. Click the cart icon to see the dropdown.
                    </p>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 mb-4">
                        <div class="flex justify-center">
                            <div class="relative inline-block">
                                <button type="button" @click="showDemoCart = !showDemoCart" class="relative p-2 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                                    <span x-html="$icon('shopping-cart', 'w-6 h-6')"></span>
                                    <span x-show="demoCart.item_count > 0" x-text="demoCart.item_count" class="absolute w-5 h-5 text-xs -top-1.5 -right-1.5 flex items-center justify-center font-bold text-white bg-purple-600 dark:bg-purple-500 rounded-full"></span>
                                </button>
                                <div x-show="showDemoCart" x-transition @click.away="showDemoCart = false" class="absolute right-0 top-full mt-2 w-80 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-50">
                                    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                                        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Shopping Cart</h3>
                                        <p class="text-xs text-gray-500 dark:text-gray-400" x-text="demoCart.item_count + ' item' + (demoCart.item_count !== 1 ? 's' : '')"></p>
                                    </div>
                                    <div x-show="demoCart.items.length === 0" class="px-4 py-8 text-center">
                                        <div class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600">
                                            <span x-html="$icon('shopping-cart', 'w-full h-full')"></span>
                                        </div>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">Your cart is empty</p>
                                    </div>
                                    <div x-show="demoCart.items.length > 0" class="max-h-64 overflow-y-auto">
                                        <template x-for="item in demoCart.items" :key="item.id">
                                            <div class="flex gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                                                <img :src="item.image_url" :alt="item.name" class="w-14 h-14 object-cover rounded-lg" loading="lazy">
                                                <div class="flex-1 min-w-0">
                                                    <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" x-text="item.name"></h4>
                                                    <p class="text-xs text-gray-500 dark:text-gray-400" x-text="item.variant_name"></p>
                                                    <div class="flex items-center justify-between mt-1">
                                                        <span class="text-xs text-gray-500 dark:text-gray-400" x-text="'Qty: ' + item.quantity"></span>
                                                        <span class="text-sm font-medium text-gray-900 dark:text-gray-100" x-text="'€' + (item.price * item.quantity).toFixed(2)"></span>
                                                    </div>
                                                </div>
                                                <button type="button" @click="demoRemoveFromCart(item.id)" class="flex-shrink-0 p-1 text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors">
                                                    <span x-html="$icon('x', 'w-4 h-4')"></span>
                                                </button>
                                            </div>
                                        </template>
                                    </div>
                                    <div x-show="demoCart.items.length > 0" class="px-4 py-3 border-t border-gray-200 dark:border-gray-700">
                                        <div class="flex justify-between items-center mb-3">
                                            <span class="text-sm text-gray-600 dark:text-gray-400">Subtotal</span>
                                            <span class="text-lg font-bold text-gray-900 dark:text-gray-100" x-text="'€' + demoCart.subtotal.toFixed(2)"></span>
                                        </div>
                                        <div class="space-y-2">
                                            <a href="#" class="block w-full px-4 py-2 text-center text-sm font-medium text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/30 hover:bg-purple-100 dark:hover:bg-purple-900/50 rounded-lg transition-colors">View Cart</a>
                                            <a href="#" class="block w-full px-4 py-2 text-center text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 rounded-lg transition-colors">Checkout</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/mini-cart.html' import cart_icon_button, mini_cart %}

<div class=&quot;relative&quot;>
    {{ cart_icon_button(cart_count_var='cart.item_count', toggle_action='showCart = !showCart') }}
    {{ mini_cart(cart_var='cart', show_var='showCart') }}
</div>{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>

                <!-- Add to Cart Demo -->
                <div class="pt-8 border-t border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Add to Cart Button</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        Standardized add to cart buttons with loading states. Integrates with <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">number_stepper</code> for quantity selection.
                    </p>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 mb-4">
                        <div class="flex flex-wrap items-end gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Quantity</label>
                                <div class="flex" role="group" aria-label="Quantity">
                                    <button type="button" @click="demoQuantity = Math.max(1, demoQuantity - 1)" :disabled="demoQuantity <= 1" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-r-0 rounded-l-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                                        <span x-html="$icon('minus', 'w-4 h-4')"></span>
                                    </button>
                                    <input type="number" x-model.number="demoQuantity" min="1" max="99" class="no-spinner px-3 py-2 text-sm w-16 text-center text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-y border-gray-300 dark:border-gray-600 focus:border-purple-400 focus:outline-none" />
                                    <button type="button" @click="demoQuantity = Math.min(99, demoQuantity + 1)" :disabled="demoQuantity >= 99" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-l-0 rounded-r-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                                        <span x-html="$icon('plus', 'w-4 h-4')"></span>
                                    </button>
                                </div>
                            </div>
                            <button type="button" @click="demoAddToCart({})" :disabled="addingToCart" class="px-6 py-2.5 text-base font-medium text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2">
                                <span x-show="addingToCart" x-html="$icon('spinner', 'w-5 h-5')"></span>
                                <span x-show="!addingToCart" x-html="$icon('shopping-cart', 'w-5 h-5')"></span>
                                <span x-text="addingToCart ? 'Adding...' : 'Add to Cart'"></span>
                            </button>
                        </div>
                        <div x-show="addedToCart" x-transition class="mt-4 flex items-center gap-2 text-green-600 dark:text-green-400 text-sm">
                            <span x-html="$icon('check-circle', 'w-5 h-5')"></span>
                            <span>Added to cart!</span>
                        </div>
                    </div>
                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/add-to-cart.html' import add_to_cart_button, add_to_cart_form %}

{# Simple button #}
{{ add_to_cart_button(action='addToCart()') }}

{# Full form with quantity selector #}
{{ add_to_cart_form(product_var='product', quantity_var='quantity') }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>
            </div>
        </section>

        <!-- MACROS SECTION -->
        <section id="macros" class="scroll-mt-24">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                    <span x-html="$icon('template', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                    Jinja Macros
                </h2>

                <div class="mb-6 p-4 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg">
                    <div class="flex items-start">
                        <span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 mr-2 flex-shrink-0 mt-0.5')"></span>
                        <div>
                            <p class="text-sm text-blue-800 dark:text-gray-200">
                                <strong>Reusable Components:</strong> Use Jinja macros from <code class="bg-blue-100 dark:bg-gray-600 px-1 rounded">shared/macros/</code> instead of copy-pasting HTML. This ensures consistency and makes updates easier.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Available Macros -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Available Macro Files</h3>
                    <div class="grid gap-4 md:grid-cols-2">
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('dots-horizontal', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                pagination.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Table pagination with page numbers</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">pagination(), pagination_simple()</code>
                        </div>
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('exclamation', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                alerts.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Alerts, loading states, toasts</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">loading_state(), error_state(), alert(), toast()</code>
                        </div>
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('tag', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                badges.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Status badges and indicators</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">badge(), status_badge(), verification_badge(), role_badge()</code>
                        </div>
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('cursor-click', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                buttons.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Button variants and action buttons</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">btn_primary(), btn_secondary(), action_button()</code>
                        </div>
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('clipboard-list', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                forms.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Form inputs with validation</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">form_input(), form_select(), form_textarea()</code>
                        </div>
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('table', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                tables.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Table components and empty states</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">table_wrapper(), table_header(), table_empty_state()</code>
                        </div>
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('collection', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                cards.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Stat cards and info cards</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">stat_card(), card(), info_card(), coming_soon_card()</code>
                        </div>
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('menu-alt-2', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                headers.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Page headers and breadcrumbs</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">page_header(), section_header(), breadcrumbs()</code>
                        </div>
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('view-boards', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                tabs.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Tab navigation components</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">tabs_nav(), tabs_inline(), tab_button()</code>
                        </div>
                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
                                <span x-html="$icon('adjustments', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
                                inputs.html
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Specialized input components</p>
                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">search_autocomplete(), number_stepper()</code>
                        </div>
                    </div>
                </div>

                <!-- Usage Example -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Usage Example</h3>
                    <div class="bg-gray-900 rounded-lg p-4 mb-3 overflow-x-auto">
                        <pre class="text-sm text-gray-100"><code>{# Import at the top of your template #}
{% raw %}{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/badges.html' import status_badge, verification_badge %}
{% from 'shared/macros/buttons.html' import btn_primary, action_button %}
{% from 'shared/macros/cards.html' import stat_card %}
{% from 'shared/macros/headers.html' import page_header %}

{# Then use in your template #}
{{ page_header('User Management', action_label='Create User', action_url='/users/create') }}

{{ loading_state('Loading users...') }}
{{ error_state('Error loading users') }}

{# In your table #}
{{ pagination() }}{% endraw %}</code></pre>
                    </div>
                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/badges.html' import status_badge, verification_badge %}

{{ page_header('Page Title', action_label='Action', action_url='/action') }}
{{ loading_state('Loading...') }}
{{ pagination() }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>

                <!-- Number Stepper Component -->
                <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Number Stepper</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        A number input with +/- buttons. Use <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">number_stepper()</code> from <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">inputs.html</code>. Supports size variants and min/max bounds.
                    </p>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <!-- Live Demo -->
                        <div class="space-y-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Small Size</label>
                                <div class="flex" role="group" aria-label="Quantity">
                                    <button type="button" @click="demoQuantitySm = Math.max(1, demoQuantitySm - 1)" :disabled="demoQuantitySm <= 1" class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-r-0 rounded-l-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                                        <span x-html="$icon('minus', 'w-3 h-3')"></span>
                                    </button>
                                    <input type="number" x-model.number="demoQuantitySm" min="1" max="10" class="no-spinner px-2 py-1 text-xs w-12 text-center text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-y border-gray-300 dark:border-gray-600 focus:border-purple-400 focus:outline-none" />
                                    <button type="button" @click="demoQuantitySm = Math.min(10, demoQuantitySm + 1)" :disabled="demoQuantitySm >= 10" class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-l-0 rounded-r-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                                        <span x-html="$icon('plus', 'w-3 h-3')"></span>
                                    </button>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Medium Size (default)</label>
                                <div class="flex" role="group" aria-label="Quantity">
                                    <button type="button" @click="demoQuantityMd = Math.max(1, demoQuantityMd - 1)" :disabled="demoQuantityMd <= 1" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-r-0 rounded-l-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                                        <span x-html="$icon('minus', 'w-4 h-4')"></span>
                                    </button>
                                    <input type="number" x-model.number="demoQuantityMd" min="1" max="99" class="no-spinner px-3 py-2 text-sm w-16 text-center text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-y border-gray-300 dark:border-gray-600 focus:border-purple-400 focus:outline-none" />
                                    <button type="button" @click="demoQuantityMd = Math.min(99, demoQuantityMd + 1)" :disabled="demoQuantityMd >= 99" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-l-0 rounded-r-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                                        <span x-html="$icon('plus', 'w-4 h-4')"></span>
                                    </button>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Large Size (step: 100)</label>
                                <div class="flex" role="group" aria-label="Batch Size">
                                    <button type="button" @click="demoQuantityLg = Math.max(100, demoQuantityLg - 100)" :disabled="demoQuantityLg <= 100" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-r-0 rounded-l-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                                        <span x-html="$icon('minus', 'w-5 h-5')"></span>
                                    </button>
                                    <input type="number" x-model.number="demoQuantityLg" min="100" max="5000" step="100" class="no-spinner px-4 py-3 text-base w-20 text-center text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-y border-gray-300 dark:border-gray-600 focus:border-purple-400 focus:outline-none" />
                                    <button type="button" @click="demoQuantityLg = Math.min(5000, demoQuantityLg + 100)" :disabled="demoQuantityLg >= 5000" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-l-0 rounded-r-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                                        <span x-html="$icon('plus', 'w-5 h-5')"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/inputs.html' import number_stepper %}

{# Basic usage - cart quantity #}
{{ number_stepper(model='quantity', min=1, max=99) }}

{# Small size - compact for tables #}
{{ number_stepper(model='item.qty', min=1, max='item.stock', size='sm') }}

{# Large size with custom step #}
{{ number_stepper(model='batchSize', min=100, max=5000, step=100, size='lg', label='Batch Size') }}

{# With disabled state #}
{{ number_stepper(model='qty', min=1, disabled_var='isLoading') }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>
            </div>
        </section>

        <!-- PAGINATION SECTION -->
        <section id="pagination" class="scroll-mt-24">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                    <span x-html="$icon('dots-horizontal', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                    Pagination
                </h2>

                <!-- Full Pagination -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Full Pagination (with page numbers)</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        Use the <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">pagination()</code> macro. Requires Alpine.js properties: <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">pagination</code>, <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">startIndex</code>, <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">endIndex</code>, <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">totalPages</code>, <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">pageNumbers</code>.
                    </p>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <!-- Live example of pagination -->
                        <div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800 rounded-lg">
                            <span class="flex items-center col-span-3">
                                Showing <span class="mx-1 font-bold">1</span>-<span class="mx-1 font-bold">10</span> of <span class="mx-1 font-bold">97</span>
                            </span>
                            <span class="col-span-2"></span>
                            <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
                                <nav aria-label="Table navigation">
                                    <ul class="inline-flex items-center">
                                        <li>
                                            <button class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none opacity-50 cursor-not-allowed" disabled>
                                                <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
                                            </button>
                                        </li>
                                        <li><button class="px-3 py-1 rounded-md text-white bg-purple-600 border border-purple-600">1</button></li>
                                        <li><button class="px-3 py-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">2</button></li>
                                        <li><button class="px-3 py-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">3</button></li>
                                        <li><span class="px-3 py-1">...</span></li>
                                        <li><button class="px-3 py-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">10</button></li>
                                        <li>
                                            <button class="px-3 py-1 rounded-md rounded-r-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                                                <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
                                            </button>
                                        </li>
                                    </ul>
                                </nav>
                            </span>
                        </div>
                    </div>
                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/pagination.html' import pagination %}

{# In your template (inside the table wrapper) #}
{{ pagination() }}{% endraw %}

{# Required JS properties in your Alpine component: #}
pagination: { page: 1, per_page: 10, total: 0, pages: 0 },

get totalPages() { return this.pagination.pages; },
get startIndex() { return this.pagination.total === 0 ? 0 : (this.pagination.page - 1) * this.pagination.per_page + 1; },
get endIndex() { return Math.min(this.pagination.page * this.pagination.per_page, this.pagination.total); },
get pageNumbers() {
    const pages = [];
    const totalPages = this.totalPages;
    const current = this.pagination.page;
    if (totalPages <= 7) {
        for (let i = 1; i <= totalPages; i++) pages.push(i);
    } else {
        pages.push(1);
        if (current > 3) pages.push('...');
        for (let i = Math.max(2, current - 1); i <= Math.min(totalPages - 1, current + 1); i++) pages.push(i);
        if (current < totalPages - 2) pages.push('...');
        pages.push(totalPages);
    }
    return pages;
},
previousPage() { if (this.pagination.page > 1) { this.pagination.page--; this.load(); } },
nextPage() { if (this.pagination.page < this.totalPages) { this.pagination.page++; this.load(); } },
goToPage(n) { if (n !== '...' && n >= 1 && n <= this.totalPages) { this.pagination.page = n; this.load(); } }`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>

                <!-- Simple Pagination -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Simple Pagination (prev/next only)</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        Use <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">pagination_simple()</code> for a simpler prev/next navigation.
                    </p>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <div class="flex items-center justify-between px-4 py-3 bg-white border dark:border-gray-700 dark:bg-gray-800 rounded-lg">
                            <span class="text-sm text-gray-700 dark:text-gray-400">
                                Showing <span class="font-semibold">1</span>-<span class="font-semibold">10</span> of <span class="font-semibold">97</span> results
                            </span>
                            <div class="flex items-center space-x-2">
                                <button disabled class="px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md opacity-50 cursor-not-allowed">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                                </button>
                                <span class="text-sm text-gray-700 dark:text-gray-400">Page 1 of 10</span>
                                <button class="px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/pagination.html' import pagination_simple %}
{{ pagination_simple() }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>
            </div>
        </section>

        <!-- TABS SECTION -->
        <section id="tabs" class="scroll-mt-24">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                    <span x-html="$icon('view-boards', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                    Tabs
                </h2>

                <div class="mb-6 p-4 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg">
                    <div class="flex items-start">
                        <span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 mr-2 flex-shrink-0 mt-0.5')"></span>
                        <div>
                            <p class="text-sm text-blue-800 dark:text-gray-200">
                                <strong>Jinja Macros Available:</strong> Use the <code class="bg-blue-100 dark:bg-gray-600 px-1 rounded">tabs_nav</code>, <code class="bg-blue-100 dark:bg-gray-600 px-1 rounded">tabs_inline</code>, and <code class="bg-blue-100 dark:bg-gray-600 px-1 rounded">tab_button</code> macros from <code class="bg-blue-100 dark:bg-gray-600 px-1 rounded">shared/macros/tabs.html</code>.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Navigation Tabs -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Navigation Tabs (with icons)</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        Standalone tabs for page-level navigation. Use <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">tabs_nav()</code> with <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">tab_button()</code>.
                    </p>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <!-- Live Demo -->
                        <div class="mb-6">
                            <div class="border-b border-gray-200 dark:border-gray-700">
                                <nav class="-mb-px flex space-x-8">
                                    <button
                                        @click="demoActiveTab = 'tab1'"
                                        :class="demoActiveTab === 'tab1' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
                                    >
                                        <span x-html="$icon('home', 'inline w-5 h-5 mr-2')"></span>
                                        Dashboard
                                    </button>
                                    <button
                                        @click="demoActiveTab = 'tab2'"
                                        :class="demoActiveTab === 'tab2' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
                                    >
                                        <span x-html="$icon('cog', 'inline w-5 h-5 mr-2')"></span>
                                        Settings
                                    </button>
                                    <button
                                        @click="demoActiveTab = 'tab3'"
                                        :class="demoActiveTab === 'tab3' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
                                    >
                                        <span x-html="$icon('user', 'inline w-5 h-5 mr-2')"></span>
                                        Profile
                                    </button>
                                </nav>
                            </div>
                        </div>

                        <!-- Tab Content -->
                        <div class="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                            <div x-show="demoActiveTab === 'tab1'">
                                <p class="text-gray-600 dark:text-gray-400">Dashboard content goes here...</p>
                            </div>
                            <div x-show="demoActiveTab === 'tab2'">
                                <p class="text-gray-600 dark:text-gray-400">Settings content goes here...</p>
                            </div>
                            <div x-show="demoActiveTab === 'tab3'">
                                <p class="text-gray-600 dark:text-gray-400">Profile content goes here...</p>
                            </div>
                        </div>
                    </div>
                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}

{# Navigation tabs with icons #}
{% call tabs_nav() %}
    {{ tab_button('dashboard', 'Dashboard', icon='home') }}
    {{ tab_button('settings', 'Settings', icon='cog') }}
    {{ tab_button('profile', 'Profile', icon='user') }}
{% endcall %}

{# Tab content panels #}
<div x-show=&quot;activeTab === 'dashboard'&quot; x-transition>
    Dashboard content...
</div>
<div x-show=&quot;activeTab === 'settings'&quot; x-transition>
    Settings content...
</div>{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>

                <!-- Inline Tabs with Counts -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Inline Tabs (with count badges)</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        Compact tabs for use inside cards or alongside other elements. Use <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">tabs_inline()</code>.
                    </p>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <!-- Live Demo -->
                        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                                <div class="flex space-x-2 border-b border-gray-200 dark:border-gray-700">
                                    <button
                                        @click="demoActiveTab = 'all'"
                                        :class="demoActiveTab === 'all' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
                                    >
                                        All Items
                                        <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700">42</span>
                                    </button>
                                    <button
                                        @click="demoActiveTab = 'active'"
                                        :class="demoActiveTab === 'active' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
                                    >
                                        Active
                                        <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700">28</span>
                                    </button>
                                    <button
                                        @click="demoActiveTab = 'archived'"
                                        :class="demoActiveTab === 'archived' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
                                    >
                                        Archived
                                        <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700">14</span>
                                    </button>
                                </div>
                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                    Search or filters here...
                                </div>
                            </div>
                        </div>
                    </div>
                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/tabs.html' import tabs_inline, tab_button %}

{# Inline tabs with count badges - inside a card #}
<div class=&quot;flex justify-between gap-4&quot;>
    {% call tabs_inline() %}
        {{ tab_button('all', 'All Items', count_var='allItems.length') }}
        {{ tab_button('active', 'Active', count_var='activeItems.length') }}
        {{ tab_button('archived', 'Archived', count_var='archivedItems.length') }}
    {% endcall %}

    {# Search or other content alongside #}
    <div>Search...</div>
</div>{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>

                <!-- Tabs with Custom Click Handlers -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Tabs with Custom Click Handlers</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        When you need to run additional logic on tab change (e.g., load data), use the <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">onclick</code> parameter.
                    </p>
                    <div class="bg-gray-900 rounded-lg p-4 mb-3 overflow-x-auto">
                        <pre class="text-sm text-gray-100"><code>{% raw %}{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}

{# Tabs with custom click handlers and different tab variable #}
{% call tabs_nav() %}
    {{ tab_button('database', 'Database Logs',
                  tab_var='logSource',
                  icon='database',
                  onclick="logSource = 'database'; loadDatabaseLogs()") }}
    {{ tab_button('file', 'File Logs',
                  tab_var='logSource',
                  icon='document',
                  onclick="logSource = 'file'; loadFileLogs()") }}
{% endcall %}{% endraw %}</code></pre>
                    </div>
                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}

{% call tabs_nav() %}
    {{ tab_button('database', 'Database Logs',
                  tab_var='logSource',
                  icon='database',
                  onclick=&quot;logSource = 'database'; loadDatabaseLogs()&quot;) }}
    {{ tab_button('file', 'File Logs',
                  tab_var='logSource',
                  icon='document',
                  onclick=&quot;logSource = 'file'; loadFileLogs()&quot;) }}
{% endcall %}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>
            </div>
        </section>

        <!-- FORMS SECTION -->
        <section id="forms" class="scroll-mt-24">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                    <span x-html="$icon('clipboard-list', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                    Forms
                </h2>

                <!-- Basic Input -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Basic Input</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <label class="block mb-4 text-sm">
                            <span class="text-gray-700 dark:text-gray-400">Field Label</span>
                            <input
                                type="text"
                                x-model="exampleForm.textInput"
                                placeholder="Enter text..."
                                class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                            />
                        </label>
                    </div>
                    <button @click="copyCode(`<label class=&quot;block mb-4 text-sm&quot;>
    <span class=&quot;text-gray-700 dark:text-gray-400&quot;>Field Label</span>
    <input
        type=&quot;text&quot;
        x-model=&quot;formData.field&quot;
        class=&quot;block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input&quot;
    />
</label>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>

                <!-- Required Field with Error -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Required Field with Error</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <label class="block mb-4 text-sm">
                            <span class="text-gray-700 dark:text-gray-400">
                                Email Address <span class="text-red-600">*</span>
                            </span>
                            <input
                                type="email"
                                x-model="exampleForm.email"
                                required
                                class="block w-full mt-1 text-sm dark:text-gray-300 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input border-red-600 focus:border-red-400 focus:shadow-outline-red"
                            />
                            <span class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="exampleErrors.email"></span>
                        </label>
                    </div>
                    <button @click="copyCode(`<label class=&quot;block mb-4 text-sm&quot;>
    <span class=&quot;text-gray-700 dark:text-gray-400&quot;>
        Field Label <span class=&quot;text-red-600&quot;>*</span>
    </span>
    <input
        type=&quot;text&quot;
        x-model=&quot;formData.field&quot;
        class=&quot;block w-full mt-1 text-sm dark:text-gray-300 dark:bg-gray-700 focus:border-purple-400 form-input border-red-600&quot;
    />
    <span class=&quot;text-xs text-red-600 dark:text-red-400 mt-1&quot;>Error message</span>
</label>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>

                <!-- Textarea -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Textarea</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <label class="block text-sm">
                            <span class="text-gray-700 dark:text-gray-400">Description</span>
                            <textarea
                                x-model="exampleForm.textarea"
                                rows="3"
                                class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
                            ></textarea>
                        </label>
                    </div>
                    <button @click="copyCode(`<label class=&quot;block text-sm&quot;>
    <span class=&quot;text-gray-700 dark:text-gray-400&quot;>Description</span>
    <textarea
        rows=&quot;3&quot;
        class=&quot;block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 form-textarea&quot;
    ></textarea>
</label>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>

                <!-- Select -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Select</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <label class="block text-sm">
                            <span class="text-gray-700 dark:text-gray-400">Select Option</span>
                            <select
                                x-model="exampleForm.select"
                                class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-select"
                            >
                                <option value="option1">Option 1</option>
                                <option value="option2">Option 2</option>
                                <option value="option3">Option 3</option>
                            </select>
                        </label>
                    </div>
                    <button @click="copyCode(`<label class=&quot;block text-sm&quot;>
    <span class=&quot;text-gray-700 dark:text-gray-400&quot;>Select Option</span>
    <select class=&quot;block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select&quot;>
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</label>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>
            </div>
        </section>

        <!-- BUTTONS SECTION -->
        <section id="buttons" class="scroll-mt-24">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                    <span x-html="$icon('cursor-click', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                    Buttons
                </h2>

                <!-- Primary Button -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Primary Button</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 space-x-2">
                        <button class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
                            Primary Button
                        </button>
                        <button class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50" disabled>
                            Disabled
                        </button>
                    </div>
                    <button @click="copyCode(`<button class=&quot;px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700&quot;>
    Primary Button
</button>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>

                <!-- Secondary Button -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Secondary Button</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 space-x-2">
                        <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600">
                            Secondary Button
                        </button>
                    </div>
                    <button @click="copyCode(`<button class=&quot;px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600&quot;>
    Secondary Button
</button>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>

                <!-- Danger Button -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Danger Button</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 space-x-2">
                        <button class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
                            Delete
                        </button>
                    </div>
                    <button @click="copyCode(`<button class=&quot;px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700&quot;>
    Delete
</button>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>
            </div>
        </section>

        <!-- CARDS SECTION -->
        <section id="cards" class="scroll-mt-24">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                    <span x-html="$icon('collection', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                    Cards
                </h2>

                <!-- Basic Card -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Basic Card</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                            <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Card Title</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">
                                This is a basic card component with a title and description.
                            </p>
                        </div>
                    </div>
                    <button @click="copyCode(`<div class=&quot;bg-white dark:bg-gray-800 rounded-lg shadow-md p-4&quot;>
    <h4 class=&quot;text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2&quot;>Card Title</h4>
    <p class=&quot;text-sm text-gray-600 dark:text-gray-400&quot;>Card description</p>
</div>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>
            </div>
        </section>

        <!-- BADGES SECTION -->
        <section id="badges" class="scroll-mt-24">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                    <span x-html="$icon('tag', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                    Badges
                </h2>

                <!-- Status Badges -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Status Badges</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 flex flex-wrap gap-2">
                        <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
                            Active
                        </span>
                        <span class="px-2 py-1 text-xs font-semibold text-yellow-800 bg-yellow-100 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
                            Pending
                        </span>
                        <span class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
                            Inactive
                        </span>
                        <span class="px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100">
                            Info
                        </span>
                    </div>
                    <button @click="copyCode(`<span class=&quot;px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100&quot;>
    Active
</span>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>
            </div>
        </section>

        <!-- TABLES SECTION -->
        <section id="tables" class="scroll-mt-24">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                    <span x-html="$icon('table', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                    Tables
                </h2>

                <!-- Basic Table -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Basic Table</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 overflow-x-auto">
                        <table class="w-full whitespace-no-wrap">
                            <thead>
                                <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
                                    <th class="px-4 py-3">Name</th>
                                    <th class="px-4 py-3">Email</th>
                                    <th class="px-4 py-3">Status</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                                <tr class="text-gray-700 dark:text-gray-400">
                                    <td class="px-4 py-3">John Doe</td>
                                    <td class="px-4 py-3 text-sm">john@example.com</td>
                                    <td class="px-4 py-3 text-xs">
                                        <span class="px-2 py-1 font-semibold text-green-800 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
                                            Active
                                        </span>
                                    </td>
                                </tr>
                                <tr class="text-gray-700 dark:text-gray-400">
                                    <td class="px-4 py-3">Jane Smith</td>
                                    <td class="px-4 py-3 text-sm">jane@example.com</td>
                                    <td class="px-4 py-3 text-xs">
                                        <span class="px-2 py-1 font-semibold text-yellow-800 bg-yellow-100 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
                                            Pending
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <button @click="copyCode(`<table class=&quot;w-full whitespace-no-wrap&quot;>
    <thead>
        <tr class=&quot;text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800&quot;>
            <th class=&quot;px-4 py-3&quot;>Name</th>
            <th class=&quot;px-4 py-3&quot;>Email</th>
        </tr>
    </thead>
    <tbody class=&quot;bg-white divide-y dark:divide-gray-700 dark:bg-gray-800&quot;>
        <tr class=&quot;text-gray-700 dark:text-gray-400&quot;>
            <td class=&quot;px-4 py-3&quot;>John Doe</td>
            <td class=&quot;px-4 py-3&quot;>john@example.com</td>
        </tr>
    </tbody>
</table>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>
            </div>
        </section>

        <!-- MODALS SECTION -->
        <section id="modals" class="scroll-mt-24">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                    <span x-html="$icon('view-grid-add', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                    Modals
                </h2>

                <!-- Confirmation Modal -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Confirmation Modal</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <button
                            @click="showExampleModal = true"
                            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
                            Open Modal
                        </button>

                        <!-- Example Modal -->
                        <div
                            x-show="showExampleModal"
                            x-cloak
                            class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
                            @click.self="showExampleModal = false">

                            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 m-4 max-w-md w-full">
                                <div class="flex items-start justify-between mb-4">
                                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
                                        Confirm Action
                                    </h3>
                                    <button
                                        @click="showExampleModal = false"
                                        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                                        <span x-html="$icon('x', 'w-5 h-5')"></span>
                                    </button>
                                </div>

                                <p class="mb-6 text-sm text-gray-600 dark:text-gray-400">
                                    Are you sure you want to perform this action? This cannot be undone.
                                </p>

                                <div class="flex justify-end gap-3">
                                    <button
                                        @click="showExampleModal = false"
                                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600">
                                        Cancel
                                    </button>
                                    <button
                                        @click="showExampleModal = false"
                                        class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
                                        Confirm
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button @click="copyCode(`<!-- Modal Trigger -->
<button @click=&quot;showModal = true&quot;>Open Modal</button>

<!-- Modal -->
<div x-show=&quot;showModal&quot;
     class=&quot;fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50&quot;
     @click.self=&quot;showModal = false&quot;>
    <div class=&quot;bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 m-4 max-w-md w-full&quot;>
        <div class=&quot;flex items-start justify-between mb-4&quot;>
            <h3 class=&quot;text-lg font-semibold text-gray-800 dark:text-gray-200&quot;>Title</h3>
            <button @click=&quot;showModal = false&quot;>
                <span x-html=&quot;$icon('x', 'w-5 h-5')&quot;></span>
            </button>
        </div>
        <p class=&quot;mb-6 text-sm text-gray-600 dark:text-gray-400&quot;>Content</p>
        <div class=&quot;flex justify-end gap-3&quot;>
            <button @click=&quot;showModal = false&quot;>Cancel</button>
            <button @click=&quot;showModal = false&quot;>Confirm</button>
        </div>
    </div>
</div>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>
            </div>
        </section>

        <!-- ALERTS SECTION -->
        <section id="alerts" class="scroll-mt-24">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                    <span x-html="$icon('exclamation', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                    Alerts
                </h2>

                <!-- Toast Notifications -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Toast Notifications</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 space-x-2">
                        <button
                            @click="showToastExample('success')"
                            class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700">
                            Show Success
                        </button>
                        <button
                            @click="showToastExample('error')"
                            class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
                            Show Error
                        </button>
                        <button
                            @click="showToastExample('warning')"
                            class="px-4 py-2 text-sm font-medium text-white bg-yellow-600 rounded-lg hover:bg-yellow-700">
                            Show Warning
                        </button>
                        <button
                            @click="showToastExample('info')"
                            class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">
                            Show Info
                        </button>
                    </div>
                    <button @click="copyCode(`Utils.showToast('Message here', 'success'); // or 'error', 'warning', 'info'`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>
            </div>
        </section>

        <!-- CHARTS SECTION - NEW -->
        <section id="charts" class="scroll-mt-24">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                    <span x-html="$icon('chart-pie', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                    Charts
                </h2>

                <p class="mb-6 text-gray-600 dark:text-gray-400">
                    Charts are provided by
                    <a href="https://www.chartjs.org/" target="_blank" class="text-purple-600 dark:text-purple-400 hover:underline">
                        Chart.js
                    </a>. Note that default legends are disabled and you should provide descriptions for your charts in HTML.
                </p>

                <!-- Pie/Doughnut Chart -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Doughnut/Pie Chart</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <div class="bg-white dark:bg-gray-800 rounded-lg p-4">
                            <canvas id="examplePieChart"></canvas>
                            <div class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400">
                                <div class="flex items-center">
                                    <span class="inline-block w-3 h-3 mr-1 bg-teal-500 rounded-full"></span>
                                    <span>Shoes</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="inline-block w-3 h-3 mr-1 bg-purple-600 rounded-full"></span>
                                    <span>Shirts</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="inline-block w-3 h-3 mr-1 bg-blue-600 rounded-full"></span>
                                    <span>Bags</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button @click="copyCode(`<canvas id=&quot;pieChart&quot;></canvas>
<script>
const pieConfig = {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [33, 33, 33],
            backgroundColor: ['#0694a2', '#7e3af2', '#1c64f2'],
        }],
        labels: ['Shoes', 'Shirts', 'Bags'],
    },
    options: {
        responsive: true,
        cutoutPercentage: 80,
        legend: { display: false },
    },
};
new Chart(document.getElementById('pieChart'), pieConfig);
</script>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>

                <!-- Line Chart -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Line Chart</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <div class="bg-white dark:bg-gray-800 rounded-lg p-4">
                            <canvas id="exampleLineChart"></canvas>
                            <div class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400">
                                <div class="flex items-center">
                                    <span class="inline-block w-3 h-3 mr-1 bg-teal-500 rounded-full"></span>
                                    <span>Organic</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="inline-block w-3 h-3 mr-1 bg-purple-600 rounded-full"></span>
                                    <span>Paid</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button @click="copyCode(`<canvas id=&quot;lineChart&quot;></canvas>
<script>
const lineConfig = {
    type: 'line',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
        datasets: [{
            label: 'Organic',
            backgroundColor: '#0694a2',
            borderColor: '#0694a2',
            data: [43, 48, 40, 54, 67, 73, 70],
            fill: false,
        }, {
            label: 'Paid',
            fill: false,
            backgroundColor: '#7e3af2',
            borderColor: '#7e3af2',
            data: [24, 50, 64, 74, 52, 51, 65],
        }],
    },
    options: {
        responsive: true,
        legend: { display: false },
    },
};
new Chart(document.getElementById('lineChart'), lineConfig);
</script>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>

                <!-- Bar Chart -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Bar Chart</h3>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <div class="bg-white dark:bg-gray-800 rounded-lg p-4">
                            <canvas id="exampleBarChart"></canvas>
                            <div class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400">
                                <div class="flex items-center">
                                    <span class="inline-block w-3 h-3 mr-1 bg-teal-500 rounded-full"></span>
                                    <span>Shoes</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="inline-block w-3 h-3 mr-1 bg-purple-600 rounded-full"></span>
                                    <span>Bags</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button @click="copyCode(`<canvas id=&quot;barChart&quot;></canvas>
<script>
const barConfig = {
    type: 'bar',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
        datasets: [{
            label: 'Shoes',
            backgroundColor: '#0694a2',
            data: [43, 48, 40, 54, 67, 73, 70],
        }, {
            label: 'Bags',
            backgroundColor: '#7e3af2',
            data: [24, 50, 64, 74, 52, 51, 65],
        }],
    },
    options: {
        responsive: true,
        legend: { display: false },
    },
};
new Chart(document.getElementById('barChart'), barConfig);
</script>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                        Copy Code
                    </button>
                </div>
            </div>
        </section>

    </div>
</div>
{% endblock %}

{% block extra_scripts %}
{# ✅ CRITICAL: Load JavaScript file #}
<script src="{{ url_for('static', path='admin/js/components.js') }}"></script>
{% endblock %}