{# 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 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">

        <!-- Sticky Navigation Sidebar -->
        <div class="w-64 flex-shrink-0">
            <div class="sticky top-6">
                <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 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>
            </div>
        </div>

        <!-- Main Content -->
        <div class="flex-1 space-y-8">

            <!-- FORMS SECTION -->
            <section id="forms">
                <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-4 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;
        required
        :class=&quot;{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.field }&quot;
        class=&quot;block w-full mt-1 text-sm dark:text-gray-300 dark:bg-gray-700 focus:border-purple-400 focus:outline-none form-input&quot;
    />
    <span x-show=&quot;errors.field&quot; class=&quot;text-xs text-red-600 dark:text-red-400 mt-1&quot; x-text=&quot;errors.field&quot;></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 mb-4 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>
                                <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">Helper text goes here</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;>Description</span>
    <textarea
        x-model=&quot;formData.description&quot;
        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 focus:outline-none focus:shadow-outline-purple 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 Dropdown -->
                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Select Dropdown</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">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="">Choose option</option>
                                    <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 mb-4 text-sm&quot;>
    <span class=&quot;text-gray-700 dark:text-gray-400&quot;>Select Option</span>
    <select
        x-model=&quot;formData.select&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 form-select&quot;
    >
        <option value=&quot;&quot;>Choose option</option>
        <option value=&quot;option1&quot;>Option 1</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>

                    <!-- Checkbox -->
                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Checkbox</h3>
                        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                            <label class="flex items-center text-sm">
                                <input
                                    type="checkbox"
                                    x-model="exampleForm.checkbox"
                                    class="text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
                                />
                                <span class="ml-2 text-gray-700 dark:text-gray-400">I agree to the terms and conditions</span>
                            </label>
                        </div>
                        <button @click="copyCode(`<label class=&quot;flex items-center text-sm&quot;>
    <input
        type=&quot;checkbox&quot;
        x-model=&quot;formData.checkbox&quot;
        class=&quot;text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple&quot;
    />
    <span class=&quot;ml-2 text-gray-700 dark:text-gray-400&quot;>Checkbox label</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>

                    <!-- Disabled Input -->
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Disabled/Read-Only 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">Read-Only Field</span>
                                <input
                                    type="text"
                                    x-model="exampleForm.disabled"
                                    disabled
                                    class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
                                />
                            </label>
                        </div>
                        <button @click="copyCode(`<input
    type=&quot;text&quot;
    disabled
    value=&quot;Read-only value&quot;
    class=&quot;block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed&quot;
/>`)" 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">
                <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-4 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 flex gap-3">
                            <button class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                                Primary Button
                            </button>
                            <button class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none">
                                <span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
                                With Icon
                            </button>
                        </div>
                        <button @click="copyCode(`<button class=&quot;px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none&quot;>
    Button Text
</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 flex gap-3">
                            <button class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg hover:border-gray-400 focus:outline-none dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
                                Secondary Button
                            </button>
                            <button class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg hover:border-gray-400 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
                                <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
                                Back
                            </button>
                        </div>
                        <button @click="copyCode(`<button class=&quot;px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg hover:border-gray-400 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800&quot;>
    Button Text
</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 class="mb-8">
                        <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 flex gap-3">
                            <button class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none">
                                Delete
                            </button>
                            <button class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none">
                                <span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
                                Delete Item
                            </button>
                        </div>
                        <button @click="copyCode(`<button class=&quot;px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none&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>

                    <!-- Button States -->
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Button States</h3>
                        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 flex gap-3">
                            <button disabled class="px-4 py-2 text-sm font-medium leading-5 text-white bg-purple-400 border border-transparent rounded-lg cursor-not-allowed">
                                Disabled
                            </button>
                            <button class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white bg-purple-600 border border-transparent rounded-lg cursor-wait">
                                <span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                                Loading...
                            </button>
                        </div>
                        <button @click="copyCode(`<button disabled class=&quot;px-4 py-2 text-sm font-medium leading-5 text-white bg-purple-400 border border-transparent rounded-lg cursor-not-allowed&quot;>
    Disabled
</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">
                <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-4 flex items-center">
                        <span x-html="$icon('collection', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                        Cards
                    </h2>

                    <!-- Stats Card -->
                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Stats Card</h3>
                        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                            <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                                <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
                                    <span x-html="$icon('user-group', 'w-5 h-5')"></span>
                                </div>
                                <div>
                                    <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Users</p>
                                    <p class="text-lg font-semibold text-gray-700 dark:text-gray-200">1,234</p>
                                </div>
                            </div>
                        </div>
                        <button @click="copyCode(`<div class=&quot;flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800&quot;>
    <div class=&quot;p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500&quot;>
        <span x-html=&quot;$icon('user-group', 'w-5 h-5')&quot;></span>
    </div>
    <div>
        <p class=&quot;mb-2 text-sm font-medium text-gray-600 dark:text-gray-400&quot;>Label</p>
        <p class=&quot;text-lg font-semibold text-gray-700 dark:text-gray-200&quot;>Value</p>
    </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>

                    <!-- Info Card -->
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Info Card</h3>
                        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                            <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
                                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title</h3>
                                <div class="space-y-3">
                                    <div>
                                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Field Label</p>
                                        <p class="text-sm text-gray-700 dark:text-gray-300">Field Value</p>
                                    </div>
                                    <div>
                                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Another Label</p>
                                        <p class="text-sm text-gray-700 dark:text-gray-300">Another Value</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button @click="copyCode(`<div class=&quot;px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800&quot;>
    <h3 class=&quot;mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200&quot;>Card Title</h3>
    <div class=&quot;space-y-3&quot;>
        <div>
            <p class=&quot;text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase&quot;>Label</p>
            <p class=&quot;text-sm text-gray-700 dark:text-gray-300&quot;>Value</p>
        </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>

            <!-- BADGES SECTION -->
            <section id="badges">
                <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-4 flex items-center">
                        <span x-html="$icon('tag', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                        Badges
                    </h2>

                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
                        <div class="flex flex-wrap gap-3">
                            <!-- Success -->
                            <span class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
                                <span x-html="$icon('check-circle', 'w-3 h-3 mr-1')"></span>
                                Active
                            </span>
                            <!-- Warning -->
                            <span class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:bg-orange-700 dark:text-orange-100">
                                <span x-html="$icon('clock', 'w-3 h-3 mr-1')"></span>
                                Pending
                            </span>
                            <!-- Danger -->
                            <span class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
                                <span x-html="$icon('exclamation', 'w-3 h-3 mr-1')"></span>
                                Inactive
                            </span>
                            <!-- Info -->
                            <span class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100">
                                <span x-html="$icon('information-circle', 'w-3 h-3 mr-1')"></span>
                                Info
                            </span>
                        </div>
                    </div>
                    <button @click="copyCode(`<span class=&quot;inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100&quot;>
    <span x-html=&quot;$icon('check-circle', 'w-3 h-3 mr-1')&quot;></span>
    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>
            </section>

            <!-- ALERTS SECTION -->
            <section id="alerts">
                <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-4 flex items-center">
                        <span x-html="$icon('exclamation', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
                        Alerts & Toasts
                    </h2>

                    <div class="space-y-4">
                        <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 Toast
                        </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 Toast
                        </button>
                        <button @click="showToastExample('warning')" class="px-4 py-2 text-sm font-medium text-white bg-orange-600 rounded-lg hover:bg-orange-700">
                            Show Warning Toast
                        </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 Toast
                        </button>
                    </div>

                    <div class="mt-4">
                        <button @click="copyCode(`Utils.showToast('Operation successful!', 'success');`)" 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 Toast Code
                        </button>
                    </div>
                </div>
            </section>

            <!-- MORE SECTIONS -->
            <section id="tables">
                <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-4">Tables</h2>
                    <p class="text-gray-600 dark:text-gray-400">
                        See your existing table components in the vendor and user list pages.
                    </p>
                </div>
            </section>

            <section id="modals">
                <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-4">Modals</h2>
                    <p class="text-gray-600 dark:text-gray-400">
                        Modal dialogs for confirmations and forms.
                    </p>
                </div>
            </section>

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

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