django-cfg 1.4.75__py3-none-any.whl → 1.4.76__py3-none-any.whl

django_cfg/templates/admin/sections/commands_section.html

@@ -1,7 +1,7 @@
 {% load unfold %}
 
 <!-- Commands Section -->
-<div class="space-y-8">
+<div class="space-y-8" x-data="commandsSection({{ data.commands|length }})">
     <div class="flex items-center justify-between mb-6">
         <div>
             <h1 class="text-2xl font-bold text-font-important-light dark:text-font-important-dark">{{ title|default:"Management Commands" }}</h1>
@@ -10,7 +10,7 @@
             </p>
         </div>
         <div class="text-sm text-font-subtle-light dark:text-font-subtle-dark">
-            Total: <span id="commands-total" class="font-mono font-semibold text-font-important-light dark:text-font-important-dark">{{ data.commands|length }}</span> commands
+            Total: <span x-text="visibleCommands" class="font-mono font-semibold text-font-important-light dark:text-font-important-dark"></span> commands
         </div>
     </div>
 
@@ -20,14 +20,15 @@
             <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-base-400 dark:text-base-500">search</span>
             <input
                 type="text"
-                id="command-search"
+                x-model="searchQuery"
+                @input="search()"
                 placeholder="Search commands..."
                 class="w-full pl-10 pr-10 py-2 border border-base-200 dark:border-base-700 rounded-default bg-white dark:bg-base-800 text-font-important-light dark:text-font-important-dark placeholder-font-subtle-light dark:placeholder-font-subtle-dark focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
             />
             <button
-                id="clear-search"
-                class="hidden absolute right-3 top-1/2 -translate-y-1/2 text-base-400 dark:text-base-500 hover:text-base-600 dark:hover:text-base-300"
-                onclick="clearSearch()"
+                x-show="showClearButton"
+                @click="clearSearch()"
+                class="absolute right-3 top-1/2 -translate-y-1/2 text-base-400 dark:text-base-500 hover:text-base-600 dark:hover:text-base-300"
             >
                 <span class="material-symbols-outlined text-lg">close</span>
             </button>
@@ -41,6 +42,7 @@
                 {% if category_commands %}
                     <div class="category-block bg-gradient-to-br from-white to-base-50 dark:from-base-800 dark:to-base-900 rounded-default shadow-md border border-base-200 dark:border-base-700 overflow-hidden">
                         <div class="p-6 border-b border-base-200 dark:border-base-700 category-toggle cursor-pointer hover:bg-base-100/50 dark:hover:bg-base-900/30 transition-all duration-200"
+                             @click="toggleCategory('{{ category }}')"
                              data-category="{{ category }}">
                             <div class="w-full flex items-center justify-between">
                                 <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark flex items-center">
@@ -61,17 +63,24 @@
                                         </div>
                                     </div>
                                 </h3>
-                                <span class="material-symbols-outlined text-base-400 dark:text-base-500 toggle-icon transition-transform duration-200 select-none">expand_more</span>
+                                <span
+                                    class="material-symbols-outlined text-base-400 dark:text-base-500 transition-transform duration-200 select-none"
+                                    x-text="isCategoryExpanded('{{ category }}') ? 'expand_less' : 'expand_more'"
+                                ></span>
                             </div>
                         </div>
-                        <div class="p-6 category-content bg-base-50/30 dark:bg-base-900/30" data-category="{{ category }}" style="display: none;">
+                        <div class="p-6 category-content bg-base-50/30 dark:bg-base-900/30"
+                             data-category="{{ category }}"
+                             x-show="isCategoryExpanded('{{ category }}')"
+                             x-cloak>
                             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                 {% for cmd in category_commands %}
                                     <button type="button"
+                                            @click="confirmCommand('{{ cmd.name }}', '{{ cmd.app }}', '{{ cmd.description|escapejs|default:'-' }}')"
                                             class="command-btn command-item text-left p-4 rounded-default border border-base-200/60 dark:border-base-700/60 bg-white dark:bg-base-800 hover:border-base-300 dark:hover:border-base-600 hover:bg-white/80 dark:hover:bg-base-800/80 transition-all duration-200 group"
                                             data-command="{{ cmd.name }}"
                                             data-app="{{ cmd.app }}"
-                                            data-description="{{ cmd.description|default:'' }}">
+                                            data-description="{{ cmd.description|escapejs|default:'-' }}">
                                         <div class="flex items-center gap-3">
                                             <div class="flex-shrink-0">
                                                 <span class="material-symbols-outlined text-primary-500 dark:text-primary-400 text-xl group-hover:text-primary-600 dark:group-hover:text-primary-300 transition-colors">terminal</span>
@@ -131,34 +140,95 @@
     {% endif %}
 
     <!-- Confirm Modal -->
-    <div id="confirm-modal" class="hidden backdrop-blur-xs bg-base-900/80 fixed inset-0 p-4 lg:p-32 z-[1000]">
-        <div class="bg-white dark:bg-base-800 rounded-default shadow-lg border border-base-200 dark:border-base-700 max-w-3xl mx-auto w-full">
+    <div x-show="showConfirmModal"
+         @click.self="showConfirmModal = false"
+         x-cloak
+         x-data="{ modalTab: 'confirm' }"
+         class="backdrop-blur-xs bg-base-900/80 fixed inset-0 p-4 lg:p-32 z-[1000]">
+        <div class="bg-white dark:bg-base-800 rounded-default shadow-lg border border-base-200 dark:border-base-700 max-w-3xl mx-auto w-full max-h-[80vh] flex flex-col">
             <div class="px-4 py-3 border-b border-base-200 dark:border-base-700">
                 <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark flex items-center gap-2">
                     <span class="material-symbols-outlined text-amber-500 dark:text-amber-400">warning</span>
                     Confirm Command Execution
                 </h3>
+
+                <!-- Tabs -->
+                <div class="flex gap-2 mt-4 border-b border-base-200 dark:border-base-700">
+                    <button type="button"
+                            @click="modalTab = 'confirm'"
+                            :class="modalTab === 'confirm' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-font-subtle-light dark:text-font-subtle-dark'"
+                            class="px-4 py-2 font-medium transition-colors">
+                        Confirm
+                    </button>
+                    <button type="button"
+                            @click="modalTab = 'help'"
+                            :class="modalTab === 'help' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-font-subtle-light dark:text-font-subtle-dark'"
+                            class="px-4 py-2 font-medium transition-colors flex items-center gap-1">
+                        <span class="material-icons text-sm">help_outline</span>
+                        Help
+                    </button>
+                </div>
             </div>
-            <div class="p-6">
-                <p class="text-font-default-light dark:text-font-default-dark mb-4">
-                    Are you sure you want to execute the following command?
-                </p>
-                <div class="bg-base-100 dark:bg-base-900 rounded-default p-4 border border-base-200 dark:border-base-700">
-                    <div class="flex items-start gap-3">
-                        <span class="material-symbols-outlined text-primary-600 dark:text-primary-400 text-xl">terminal</span>
-                        <div class="flex-1 min-w-0">
-                            <p class="font-mono text-sm font-semibold text-font-important-light dark:text-font-important-dark" id="confirm-command-name"></p>
-                            <p class="text-xs text-font-subtle-light dark:text-font-subtle-dark mt-2" id="confirm-command-app"></p>
-                            <p class="text-xs text-font-default-light dark:text-font-default-dark mt-1" id="confirm-command-desc"></p>
+
+            <div class="flex-1 overflow-y-auto">
+                <!-- Confirm Tab -->
+                <div x-show="modalTab === 'confirm'" class="p-6">
+                    <p class="text-font-default-light dark:text-font-default-dark mb-4">
+                        Are you sure you want to execute the following command?
+                    </p>
+                    <div class="bg-base-100 dark:bg-base-900 rounded-default p-4 border border-base-200 dark:border-base-700">
+                        <div class="flex items-start gap-3">
+                            <span class="material-symbols-outlined text-primary-600 dark:text-primary-400 text-xl">terminal</span>
+                            <div class="flex-1 min-w-0">
+                                <p class="font-mono text-sm font-semibold text-font-important-light dark:text-font-important-dark" x-text="currentCommand"></p>
+                                <p class="text-xs text-font-subtle-light dark:text-font-subtle-dark mt-2" x-show="currentCommandApp" x-text="'from ' + currentCommandApp"></p>
+                                <p class="text-xs text-font-default-light dark:text-font-default-dark mt-1" x-show="currentCommandDescription" x-text="currentCommandDescription"></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Help Tab -->
+                <div x-show="modalTab === 'help'" class="p-6">
+                    <div class="mb-4">
+                        <h4 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark mb-2">Command Help</h4>
+                        <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark mb-4">
+                            Get detailed information about this command
+                        </p>
+                    </div>
+
+                    <div class="bg-base-100 dark:bg-base-900 rounded-default p-4 border border-base-200 dark:border-base-700 mb-4">
+                        <div class="flex items-start gap-3">
+                            <span class="material-icons text-primary-600 dark:text-primary-400">info</span>
+                            <div class="flex-1">
+                                <p class="font-semibold text-font-important-light dark:text-font-important-dark mb-2">Description</p>
+                                <p class="text-sm text-font-default-light dark:text-font-default-dark" x-text="currentCommandDescription || 'No description available'"></p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="bg-base-100 dark:bg-base-900 rounded-default p-4 border border-base-200 dark:border-base-700">
+                        <div class="flex items-start gap-3">
+                            <span class="material-icons text-blue-600 dark:text-blue-400">terminal</span>
+                            <div class="flex-1">
+                                <p class="font-semibold text-font-important-light dark:text-font-important-dark mb-2">Usage</p>
+                                <div class="bg-base-900 dark:bg-black text-green-400 p-3 rounded-default font-mono text-xs">
+                                    <span>python manage.py <span x-text="currentCommand"></span> [options]</span>
+                                </div>
+                                <p class="text-xs text-font-subtle-light dark:text-font-subtle-dark mt-2">
+                                    For detailed help, run: <code class="bg-base-200 dark:bg-base-700 px-2 py-1 rounded">python manage.py help <span x-text="currentCommand"></span></code>
+                                </p>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
+
             <div class="px-4 py-3 border-t border-base-200 dark:border-base-800 flex items-center justify-end gap-3">
-                <button type="button" id="cancel-confirm" class="px-4 py-2 text-font-default-light dark:text-font-default-dark hover:bg-base-100 dark:hover:bg-base-700 rounded-default transition-colors">
+                <button type="button" @click="cancelExecution()" class="px-4 py-2 text-font-default-light dark:text-font-default-dark hover:bg-base-100 dark:hover:bg-base-700 rounded-default transition-colors">
                     Cancel
                 </button>
-                <button type="button" id="execute-confirm" class="px-4 py-2 bg-primary-600 text-white rounded-default hover:bg-primary-700 transition-colors font-medium">
+                <button type="button" @click="executeCommand()" class="px-4 py-2 bg-primary-600 text-white rounded-default hover:bg-primary-700 transition-colors font-medium">
                     Execute Command
                 </button>
             </div>
@@ -166,26 +236,32 @@
     </div>
 
     <!-- Command Output Modal -->
-    <div id="command-modal" class="hidden backdrop-blur-xs bg-base-900/80 flex flex-col fixed inset-0 p-4 lg:p-32 z-[1000]">
+    <div x-show="showOutputModal"
+         @click.self="closeOutputModal()"
+         x-cloak
+         class="backdrop-blur-xs bg-base-900/80 flex flex-col fixed inset-0 p-4 lg:p-32 z-[1000]">
         <div class="bg-white dark:bg-base-800 flex flex-col max-w-3xl min-h-0 mx-auto overflow-hidden rounded-default shadow-lg w-full">
             <div class="flex items-center justify-between px-4 py-3 border-b border-base-200 dark:border-base-700">
                 <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark flex items-center gap-2">
                     <span class="material-symbols-outlined text-primary-600 dark:text-primary-400">terminal</span>
-                    <span id="modal-command-name" class="font-mono"></span>
+                    <span class="font-mono" x-text="currentCommand"></span>
                 </h3>
-                <button type="button" id="close-modal" class="text-base-400 dark:text-base-500 hover:text-base-600 dark:hover:text-base-300 transition-colors">
+                <button type="button" @click="closeOutputModal()" class="text-base-400 dark:text-base-500 hover:text-base-600 dark:hover:text-base-300 transition-colors">
                     <span class="material-symbols-outlined">close</span>
                 </button>
             </div>
-            <div class="grow overflow-y-auto overflow-x-hidden w-full" data-simplebar id="output-container">
+            <div class="grow overflow-y-auto overflow-x-hidden w-full" x-ref="commandOutput">
                 <div class="p-4">
-                    <pre id="command-output" class="bg-base-900 dark:bg-black text-green-400 p-4 rounded-default font-mono text-xs leading-relaxed whitespace-pre overflow-x-auto"></pre>
+                    <pre x-text="commandOutput" class="bg-base-900 dark:bg-black text-green-400 p-4 rounded-default font-mono text-xs leading-relaxed whitespace-pre overflow-x-auto"></pre>
                 </div>
             </div>
             <div class="px-4 py-3 border-t border-base-200 dark:border-base-700">
                 <div class="flex items-center justify-between">
-                    <div id="command-status" class="text-sm font-medium"></div>
-                    <button type="button" id="copy-output" class="px-4 py-2 bg-primary-600 text-white rounded-default hover:bg-primary-700 transition-colors flex items-center gap-2 font-medium">
+                    <div class="flex items-center gap-2">
+                        <div :class="statusClass" class="w-3 h-3 rounded-full"></div>
+                        <span class="text-sm font-medium" x-text="statusText"></span>
+                    </div>
+                    <button type="button" @click="copyOutput()" class="px-4 py-2 bg-primary-600 text-white rounded-default hover:bg-primary-700 transition-colors flex items-center gap-2 font-medium">
                         <span class="material-symbols-outlined text-base">content_copy</span>
                         Copy Output
                     </button>
@@ -193,434 +269,281 @@
             </div>
         </div>
     </div>
-</div>
-
-<!-- JavaScript for Commands Section -->
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    // Category toggle functionality
-    const categoryToggles = document.querySelectorAll('.category-toggle');
-    categoryToggles.forEach(toggle => {
-        toggle.addEventListener('click', function() {
-            const category = this.dataset.category;
-            const content = document.querySelector(`.category-content[data-category="${category}"]`);
-            const icon = this.querySelector('.toggle-icon');
-
-            if (content.style.display === 'none' || !content.style.display) {
-                content.style.display = 'block';
-                icon.textContent = 'expand_less';
-            } else {
-                content.style.display = 'none';
-                icon.textContent = 'expand_more';
-            }
-        });
-
-        // Initialize - start collapsed
-        const category = toggle.dataset.category;
-        const content = document.querySelector(`.category-content[data-category="${category}"]`);
-        if (content) {
-            content.style.display = 'none';
-        }
-    });
-
-    // Command click handlers - show confirm first
-    const commandButtons = document.querySelectorAll('.command-btn');
-    commandButtons.forEach(btn => {
-        btn.addEventListener('click', function() {
-            const commandName = this.dataset.command;
-            const commandApp = this.dataset.app || '';
-            const commandDesc = this.dataset.description || '';
-            showConfirmModal(commandName, commandApp, commandDesc);
-        });
-    });
-
-    // Confirm modal handlers
-    const confirmModal = document.getElementById('confirm-modal');
-    const cancelConfirm = document.getElementById('cancel-confirm');
-    const executeConfirm = document.getElementById('execute-confirm');
-
-    if (cancelConfirm) {
-        cancelConfirm.addEventListener('click', function() {
-            confirmModal.classList.add('hidden');
-        });
-    }
-
-    if (executeConfirm) {
-        executeConfirm.addEventListener('click', function() {
-            const commandName = document.getElementById('confirm-command-name').textContent;
-            confirmModal.classList.add('hidden');
-            executeCommand(commandName);
-        });
-    }
 
-    // Close confirm modal on background click
-    if (confirmModal) {
-        confirmModal.addEventListener('click', function(e) {
-            if (e.target === confirmModal) {
-                confirmModal.classList.add('hidden');
-            }
-        });
-    }
+    <!-- Load Alpine component -->
+    {% load static %}
+    <script src="{% static 'admin/js/alpine/commands-section.js' %}"></script>
 
-    // Output Modal close handlers
-    const outputModal = document.getElementById('command-modal');
-    const closeBtn = document.getElementById('close-modal');
-
-    if (closeBtn) {
-        closeBtn.addEventListener('click', function() {
-            outputModal.classList.add('hidden');
-        });
-    }
-
-    // Close output modal on background click
-    if (outputModal) {
-        outputModal.addEventListener('click', function(e) {
-            if (e.target === outputModal) {
-                outputModal.classList.add('hidden');
-            }
-        });
-    }
-
-    // Copy output functionality
-    const copyBtn = document.getElementById('copy-output');
-    if (copyBtn) {
-        copyBtn.addEventListener('click', function() {
-            const output = document.getElementById('command-output');
-            if (output) {
-                navigator.clipboard.writeText(output.textContent).then(function() {
-                    const originalText = copyBtn.innerHTML;
-                    copyBtn.innerHTML = '<span class="material-symbols-outlined mr-2">check</span>Copied!';
-                    setTimeout(function() {
-                        copyBtn.innerHTML = originalText;
-                    }, 2000);
-                }).catch(function(err) {
-                    console.error('Could not copy text: ', err);
-                });
-            }
-        });
-    }
-
-    // Escape key to close modals
-    document.addEventListener('keydown', function(e) {
-        if (e.key === 'Escape') {
-            if (confirmModal && !confirmModal.classList.contains('hidden')) {
-                confirmModal.classList.add('hidden');
-            }
-            if (outputModal && !outputModal.classList.contains('hidden')) {
-                outputModal.classList.add('hidden');
-            }
-        }
-    });
-
-    // Search functionality
-    const searchInput = document.getElementById('command-search');
-    const clearSearchBtn = document.getElementById('clear-search');
-
-    if (searchInput) {
-        searchInput.addEventListener('input', function(e) {
-            const query = e.target.value.toLowerCase().trim();
-            filterCommands(query);
-
-            // Show/hide clear button
-            if (query) {
-                clearSearchBtn.classList.remove('hidden');
-            } else {
-                clearSearchBtn.classList.add('hidden');
-            }
-        });
-    }
-});
-
-// Search/filter commands
-function filterCommands(query) {
-    const categoryBlocks = document.querySelectorAll('.category-block');
-    let totalVisible = 0;
-
-    categoryBlocks.forEach(block => {
-        const commands = block.querySelectorAll('.command-item');
-        const categoryCount = block.querySelector('.category-count');
-        let visibleCount = 0;
-
-        commands.forEach(cmd => {
-            const commandName = cmd.querySelector('.command-name').textContent.toLowerCase();
-            const commandApp = cmd.dataset.app ? cmd.dataset.app.toLowerCase() : '';
-            const commandDesc = cmd.dataset.description ? cmd.dataset.description.toLowerCase() : '';
-
-            if (!query || commandName.includes(query) || commandApp.includes(query) || commandDesc.includes(query)) {
-                cmd.style.display = 'block';
-                visibleCount++;
-                totalVisible++;
-            } else {
-                cmd.style.display = 'none';
-            }
-        });
-
-        // Update category count
-        if (categoryCount) {
-            categoryCount.textContent = `(${visibleCount})`;
-        }
+    <!-- Documentation Section (Collapsible) -->
+    <div class="mt-12" x-data="{ docsExpanded: false }">
+        <div class="bg-gradient-to-br from-white to-base-50 dark:from-base-800 dark:to-base-900 rounded-lg shadow-md border border-base-200 dark:border-base-700 overflow-hidden">
+            <!-- Header (Clickable) -->
+            <div class="p-6 cursor-pointer hover:bg-base-100/50 dark:hover:bg-base-900/30 transition-all duration-200"
+                 @click="docsExpanded = !docsExpanded">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center">
+                        <div class="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mr-3">
+                            <span class="material-icons text-blue-600 dark:text-blue-400">menu_book</span>
+                        </div>
+                        <div>
+                            <h2 class="text-xl font-bold text-font-important-light dark:text-font-important-dark">
+                                Commands Documentation
+                            </h2>
+                            <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark mt-1">
+                                Complete guide to Django management commands
+                            </p>
+                        </div>
+                    </div>
+                    <span class="material-icons text-base-400 dark:text-base-500 transition-transform duration-200"
+                          x-text="docsExpanded ? 'expand_less' : 'expand_more'"></span>
+                </div>
+            </div>
 
-        // Hide category if no visible commands
-        if (visibleCount === 0) {
-            block.style.display = 'none';
-        } else {
-            block.style.display = 'block';
+            <!-- Content (Collapsible) -->
+            <div class="border-t border-base-200 dark:border-base-700"
+                 x-show="docsExpanded"
+                 x-collapse>
+                <div class="p-6 bg-base-50/30 dark:bg-base-900/30">
+                    {% if documentation_content %}
+                        <!-- Rendered Markdown Content with Collapsible Sections -->
+                        <div class="documentation-content" x-data="documentationCollapse()">
+                            {{ documentation_content|safe }}
+                        </div>
+                    {% else %}
+                        <!-- Fallback: Basic documentation -->
+                        <div class="documentation-content">
+                            <h2>Django Management Commands</h2>
+                            <p>Django management commands provide a command-line interface for administrative tasks.</p>
+
+                            <h3>Common Commands</h3>
+                            <ul>
+                                <li><code>migrate</code> - Apply database migrations</li>
+                                <li><code>makemigrations</code> - Create new migrations</li>
+                                <li><code>runserver</code> - Start development server</li>
+                                <li><code>createsuperuser</code> - Create admin user</li>
+                                <li><code>collectstatic</code> - Collect static files</li>
+                            </ul>
+
+                            <h3>Getting Help</h3>
+                            <p>To get help for any command, use:</p>
+                            <pre><code>python manage.py help &lt;command_name&gt;</code></pre>
+
+                            <h3>Custom Commands</h3>
+                            <p>You can create custom management commands by adding them to <code>management/commands/</code> directory in your Django app.</p>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
 
-            // Auto-expand categories when searching
-            if (query) {
-                const content = block.querySelector('.category-content');
-                const icon = block.querySelector('.toggle-icon');
-                if (content && icon) {
-                    content.style.display = 'block';
-                    icon.textContent = 'expand_less';
+    <!-- Documentation Collapse Script -->
+    <script>
+        function documentationCollapse() {
+            return {
+                sections: {},
+                init() {
+                    // Find all h2 elements and make them collapsible
+                    this.$nextTick(() => {
+                        const h2Elements = this.$el.querySelectorAll('h2');
+                        h2Elements.forEach((h2, index) => {
+                            const sectionId = `section-${index}`;
+                            this.sections[sectionId] = false; // collapsed by default
+
+                            // Wrap h2 in clickable div
+                            const wrapper = document.createElement('div');
+                            wrapper.className = 'doc-section-header';
+                            wrapper.setAttribute('x-on:click', `sections['${sectionId}'] = !sections['${sectionId}']`);
+
+                            const icon = document.createElement('span');
+                            icon.className = 'material-icons doc-section-icon';
+                            icon.setAttribute('x-text', `sections['${sectionId}'] ? 'expand_less' : 'expand_more'`);
+
+                            h2.parentNode.insertBefore(wrapper, h2);
+                            wrapper.appendChild(icon);
+                            wrapper.appendChild(h2);
+
+                            // Wrap content until next h2
+                            const contentWrapper = document.createElement('div');
+                            contentWrapper.className = 'doc-section-content';
+                            contentWrapper.setAttribute('x-show', `sections['${sectionId}']`);
+                            contentWrapper.setAttribute('x-collapse', '');
+
+                            let nextElement = wrapper.nextElementSibling;
+                            const elementsToMove = [];
+
+                            while (nextElement && nextElement.tagName !== 'H2') {
+                                elementsToMove.push(nextElement);
+                                nextElement = nextElement.nextElementSibling;
+                            }
+
+                            wrapper.parentNode.insertBefore(contentWrapper, wrapper.nextElementSibling);
+                            elementsToMove.forEach(el => contentWrapper.appendChild(el));
+                        });
+                    });
                 }
-            }
+            };
         }
-    });
-
-    // Update total commands count
-    const totalCounter = document.getElementById('commands-total');
-    if (totalCounter) {
-        totalCounter.textContent = totalVisible;
-    }
-}
-
-// Clear search
-function clearSearch() {
-    const searchInput = document.getElementById('command-search');
-    const clearBtn = document.getElementById('clear-search');
-    const categoryBlocks = document.querySelectorAll('.category-block');
-    const totalCounter = document.getElementById('commands-total');
-
-    // Clear input
-    if (searchInput) {
-        searchInput.value = '';
-    }
-
-    // Hide clear button
-    if (clearBtn) {
-        clearBtn.classList.add('hidden');
-    }
+    </script>
 
-    // Reset all blocks
-    categoryBlocks.forEach(block => {
-        block.style.display = 'block';
-        const commands = block.querySelectorAll('.command-item');
-        const categoryCount = block.querySelector('.category-count');
-
-        // Show all commands
-        commands.forEach(cmd => {
-            cmd.style.display = 'block';
-        });
-
-        // Reset category count
-        if (categoryCount) {
-            const originalCount = commands.length;
-            categoryCount.textContent = `(${originalCount})`;
+    <!-- Documentation Styles -->
+    <style>
+        .documentation-content {
+            color: #374151;
+            line-height: 1.75;
         }
-
-        // Collapse categories
-        const content = block.querySelector('.category-content');
-        const icon = block.querySelector('.toggle-icon');
-        if (content && icon) {
-            content.style.display = 'none';
-            icon.textContent = 'expand_more';
-        }
-    });
-
-    // Reset total
-    if (totalCounter) {
-        const allCommands = document.querySelectorAll('.command-item');
-        totalCounter.textContent = allCommands.length;
-    }
-}
-
-// Show confirm modal
-function showConfirmModal(commandName, commandApp, commandDesc) {
-    const confirmModal = document.getElementById('confirm-modal');
-    const confirmCommandName = document.getElementById('confirm-command-name');
-    const confirmCommandApp = document.getElementById('confirm-command-app');
-    const confirmCommandDesc = document.getElementById('confirm-command-desc');
-
-    if (!confirmModal || !confirmCommandName) {
-        console.error('Confirm modal elements not found');
-        return;
-    }
-
-    confirmCommandName.textContent = commandName;
-    confirmCommandApp.textContent = commandApp ? `from ${commandApp}` : '';
-    confirmCommandDesc.textContent = commandDesc || '';
-
-    confirmModal.classList.remove('hidden');
-}
-
-// Execute command function with SSE streaming
-function executeCommand(commandName) {
-    const modal = document.getElementById('command-modal');
-    const modalCommandName = document.getElementById('modal-command-name');
-    const commandOutput = document.getElementById('command-output');
-    const commandStatus = document.getElementById('command-status');
-
-    if (!modal || !modalCommandName || !commandOutput || !commandStatus) {
-        console.error('Command modal elements not found');
-        return;
-    }
-
-    // Show modal and initialize
-    modalCommandName.textContent = commandName;
-    commandOutput.innerHTML = '';
-    commandStatus.textContent = 'Executing...';
-    commandStatus.className = 'text-sm text-primary-600 dark:text-primary-400';
-    modal.classList.remove('hidden');
-
-    // Execute command via API with SSE streaming
-    fetch('/cfg/commands/execute/', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'X-CSRFToken': getCookie('csrftoken')
-        },
-        body: JSON.stringify({
-            command: commandName,
-            args: [],
-            options: {}
-        })
-    })
-    .then(response => {
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
+        html.dark .documentation-content {
+            color: #d1d5db;
         }
-
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-
-        function readStream() {
-            return reader.read().then(({done, value}) => {
-                if (done) return;
-
-                const chunk = decoder.decode(value);
-                const lines = chunk.split('\n');
-
-                lines.forEach(line => {
-                    if (line.startsWith('data: ')) {
-                        try {
-                            const data = JSON.parse(line.slice(6));
-                            handleCommandData(data);
-                        } catch (e) {
-                            console.error('Error parsing command data:', e, line);
-                        }
-                    }
-                });
-
-                return readStream();
-            });
+        .documentation-content h1 {
+            font-size: 2em;
+            font-weight: 700;
+            margin-top: 1.5em;
+            margin-bottom: 0.75em;
+            color: #111827;
         }
+        html.dark .documentation-content h1 {
+            color: #f9fafb;
+        }
+        .doc-section-header {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            padding: 0.75em 0;
+            margin-top: 1.25em;
+            border-bottom: 1px solid #e5e7eb;
+            transition: all 0.2s ease;
+        }
+        .doc-section-header:hover {
+            background-color: rgba(0, 0, 0, 0.02);
+            padding-left: 0.5em;
+            margin-left: -0.5em;
+            padding-right: 0.5em;
+            margin-right: -0.5em;
+            border-radius: 0.5em;
+        }
+        html.dark .doc-section-header {
+            border-bottom-color: #374151;
+        }
+        html.dark .doc-section-header:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+        }
+        .doc-section-icon {
+            color: #6b7280;
+            font-size: 1.25em;
+            margin-right: 0.5em;
+            transition: transform 0.2s ease;
+        }
+        html.dark .doc-section-icon {
+            color: #9ca3af;
+        }
+        .doc-section-header h2 {
+            font-size: 1.5em;
+            font-weight: 600;
+            margin: 0;
+            color: #1f2937;
+            border: none;
+            padding: 0;
+        }
+        html.dark .doc-section-header h2 {
+            color: #e5e7eb;
+        }
+        .doc-section-content {
+            padding-left: 2.25em;
+            margin-bottom: 1em;
+        }
+        .documentation-content h3 {
+            font-size: 1.25em;
+            font-weight: 600;
+            margin-top: 1em;
+            margin-bottom: 0.5em;
+            color: #374151;
+        }
+        html.dark .documentation-content h3 {
+            color: #d1d5db;
+        }
+        .documentation-content h4 {
+            font-size: 1.1em;
+            font-weight: 600;
+            margin-top: 0.875em;
+            margin-bottom: 0.5em;
+            color: #4b5563;
+        }
+        html.dark .documentation-content h4 {
+            color: #9ca3af;
+        }
+        .documentation-content p {
+            margin-bottom: 1em;
+        }
+        .documentation-content ul, .documentation-content ol {
+            margin-bottom: 1em;
+            padding-left: 1.5em;
+        }
+        .documentation-content li {
+            margin-bottom: 0.5em;
+        }
+        .documentation-content code {
+            background-color: #f3f4f6;
+            color: #dc2626;
+            padding: 0.125em 0.375em;
+            border-radius: 0.25em;
+            font-family: 'Courier New', monospace;
+            font-size: 0.875em;
+        }
+        html.dark .documentation-content code {
+            background-color: #1f2937;
+            color: #f87171;
+        }
+        .documentation-content pre {
+            background-color: #1f2937;
+            color: #e5e7eb;
+            padding: 1em;
+            border-radius: 0.5em;
+            overflow-x: auto;
+            margin-bottom: 1em;
+        }
+        html.dark .documentation-content pre {
+            background-color: #111827;
+        }
+        .documentation-content pre code {
+            background-color: transparent;
+            color: #10b981;
+            padding: 0;
+        }
+        .documentation-content a {
+            color: #2563eb;
+            text-decoration: underline;
+        }
+        html.dark .documentation-content a {
+            color: #60a5fa;
+        }
+        .documentation-content strong {
+            font-weight: 600;
+            color: #111827;
+        }
+        html.dark .documentation-content strong {
+            color: #f9fafb;
+        }
+        .documentation-content table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 1em;
+        }
+        .documentation-content th, .documentation-content td {
+            border: 1px solid #e5e7eb;
+            padding: 0.5em;
+            text-align: left;
+        }
+        html.dark .documentation-content th, html.dark .documentation-content td {
+            border-color: #374151;
+        }
+        .documentation-content th {
+            background-color: #f3f4f6;
+            font-weight: 600;
+        }
+        html.dark .documentation-content th {
+            background-color: #1f2937;
+        }
+    </style>
+</div>
 
-        return readStream();
-    })
-    .catch(error => {
-        console.error('Error executing command:', error);
-        addLogLine(commandOutput, `\n❌ Error: ${error.message}`, 'error');
-        commandStatus.textContent = '❌ Error';
-        commandStatus.className = 'text-sm text-red-500 dark:text-red-400';
-    });
-}
-
-// Handle SSE command data
-function handleCommandData(data) {
-    const output = document.getElementById('command-output');
-    const status = document.getElementById('command-status');
-
-    if (!output || !status) return;
-
-    switch (data.type) {
-        case 'start':
-            output.innerHTML = '';
-            addLogLine(output, `🚀 Starting command: ${data.command}`, 'info');
-            const args = (data.args && Array.isArray(data.args)) ? data.args.join(' ') : 'none';
-            addLogLine(output, `📝 Arguments: ${args}`, 'info');
-            addLogLine(output, '', 'spacer');
-            status.textContent = 'Executing...';
-            status.className = 'text-sm text-primary-600 dark:text-primary-400';
-            break;
-        case 'output':
-            addLogLine(output, data.line, 'output');
-            scrollToBottom(document.getElementById('output-container'));
-            break;
-        case 'complete':
-            const success = data.return_code === 0;
-            status.textContent = success ? '✅ Success' : '❌ Failed';
-            status.className = success
-                ? 'text-sm text-green-500 dark:text-green-400'
-                : 'text-sm text-red-500 dark:text-red-400';
-
-            addLogLine(output, '', 'spacer');
-            let completionMessage = `${success ? '✅' : '❌'} Command completed with exit code: ${data.return_code}`;
-            if (data.execution_time) {
-                completionMessage += ` (${data.execution_time}s)`;
-            }
-            addLogLine(output, completionMessage, success ? 'success' : 'error');
-            scrollToBottom(document.getElementById('output-container'));
-            break;
-        case 'error':
-            const errorMsg = data.message || data.error || 'Unknown error';
-            addLogLine(output, `❌ ${errorMsg}`, 'error');
-            status.textContent = '❌ Error';
-            status.className = 'text-sm text-red-500 dark:text-red-400';
-            scrollToBottom(document.getElementById('output-container'));
-            break;
-    }
-}
-
-// Add log line to output
-function addLogLine(container, text, type = 'output') {
-    const line = document.createElement('div');
-    line.className = 'log-line font-mono';
-
-    switch (type) {
-        case 'info':
-            line.className += ' text-blue-500 dark:text-blue-400';
-            break;
-        case 'success':
-            line.className += ' text-green-500 dark:text-green-400 font-semibold';
-            break;
-        case 'error':
-            line.className += ' text-red-500 dark:text-red-400 font-semibold';
-            break;
-        case 'spacer':
-            line.style.height = '0.5em';
-            line.innerHTML = '&nbsp;';
-            break;
-        default:
-            line.className += ' text-green-400 dark:text-green-400';
-    }
-
-    if (type !== 'spacer') {
-        line.textContent = text;
-    }
-    container.appendChild(line);
-}
-
-// Scroll to bottom helper
-function scrollToBottom(element) {
-    if (element) {
-        element.scrollTop = element.scrollHeight;
-    }
-}
-
-// Get CSRF token
-function getCookie(name) {
-    let cookieValue = null;
-    if (document.cookie && document.cookie !== '') {
-        const cookies = document.cookie.split(';');
-        for (let i = 0; i < cookies.length; i++) {
-            const cookie = cookies[i].trim();
-            if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                break;
-            }
-        }
-    }
-    return cookieValue;
-}
-</script>