django-cfg 1.4.46__py3-none-any.whl → 1.5.181__py3-none-any.whl

django_cfg/templates/admin/components/management_commands.js

@@ -1,375 +0,0 @@
-/**
- * Management Commands JavaScript
- * Handles toggle, search, modal, and command execution functionality
- */
-
-// Global functions for category expansion
-window.toggleCategory = function(category) {
-    const content = document.getElementById(`content-${category}`);
-    const icon = document.getElementById(`icon-${category}`);
-
-    if (!content || !icon) return;
-
-    if (content.style.display === 'none' || content.style.display === '') {
-        content.style.display = 'block';
-        icon.style.transform = 'rotate(0deg)';
-        icon.textContent = 'expand_more';
-    } else {
-        content.style.display = 'none';
-        icon.style.transform = 'rotate(-90deg)';
-        icon.textContent = 'expand_less';
-    }
-};
-
-// Command execution functions
-window.copyToClipboard = function(text) {
-    navigator.clipboard.writeText(text).then(function() {
-        const button = event.target.closest('button');
-        const originalText = button.innerHTML;
-        button.innerHTML = '<span class="material-icons text-xs mr-1">check</span>Copied';
-        button.classList.remove('bg-base-100', 'dark:bg-base-700', 'hover:bg-base-200', 'dark:hover:bg-base-600');
-        button.classList.add('bg-green-600', 'hover:bg-green-700', 'dark:bg-green-500', 'dark:hover:bg-green-600', 'text-white');
-
-        setTimeout(function() {
-            button.innerHTML = originalText;
-            button.classList.remove('bg-green-600', 'hover:bg-green-700', 'dark:bg-green-500', 'dark:hover:bg-green-600', 'text-white');
-            button.classList.add('bg-base-100', 'dark:bg-base-700', 'hover:bg-base-200', 'dark:hover:bg-base-600');
-        }, 2000);
-    }).catch(function(err) {
-        console.error('Could not copy text: ', err);
-    });
-};
-
-window.executeCommand = function(commandName) {
-    const modal = document.getElementById('commandModal');
-    const commandNameEl = document.getElementById('commandName');
-    const commandOutput = document.getElementById('commandOutput');
-    const commandStatus = document.getElementById('commandStatus');
-
-    if (!modal || !commandNameEl || !commandOutput || !commandStatus) {
-        console.error('Command modal elements not found');
-        return;
-    }
-
-    commandNameEl.textContent = commandName;
-    commandOutput.textContent = '';
-    commandStatus.innerHTML = '<div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div><span class="text-sm font-medium text-font-default-light dark:text-font-default-dark">Executing...</span>';
-    modal.classList.remove('hidden');
-
-    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}`);
-        }
-
-        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);
-                        }
-                    }
-                });
-
-                return readStream();
-            });
-        }
-
-        return readStream();
-    })
-    .catch(error => {
-        console.error('Error executing command:', error);
-        commandOutput.textContent += `\n❌ Error: ${error.message}`;
-        commandStatus.innerHTML = '<div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div><span class="text-sm font-medium text-red-600 dark:text-red-400">Error</span>';
-    });
-};
-
-window.closeCommandModal = function() {
-    const modal = document.getElementById('commandModal');
-    if (modal) {
-        modal.classList.add('hidden');
-    }
-};
-
-// Helper functions
-function handleCommandData(data) {
-    const output = document.getElementById('commandOutput');
-    const status = document.getElementById('commandStatus');
-
-    if (!output || !status) return;
-
-    switch (data.type) {
-        case 'start':
-            output.innerHTML = '';
-            addLogLine(output, `🚀 Starting command: ${data.command}`, 'info');
-            addLogLine(output, `📝 Arguments: ${data.args.join(' ')}`, 'info');
-            addLogLine(output, '', 'spacer');
-            status.innerHTML = '<div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div><span class="text-sm font-medium text-font-default-light dark:text-font-default-dark">Executing...</span>';
-            break;
-        case 'output':
-            addLogLine(output, data.line, 'output');
-            scrollToBottom(output);
-            break;
-        case 'complete':
-            const success = data.return_code === 0;
-            status.innerHTML = success
-                ? '<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div><span class="text-sm font-medium text-green-600 dark:text-green-400">Completed</span>'
-                : '<div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div><span class="text-sm font-medium text-red-600 dark:text-red-400">Failed</span>';
-
-            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(output);
-            break;
-        case 'error':
-            addLogLine(output, `❌ ${data.message}`, 'error');
-            status.innerHTML = '<div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div><span class="text-sm font-medium text-red-600 dark:text-red-400">Error</span>';
-            scrollToBottom(output);
-            break;
-    }
-}
-
-function addLogLine(container, text, type = 'output') {
-    const line = document.createElement('div');
-    line.className = 'log-line';
-
-    switch (type) {
-        case 'info':
-            line.className += ' text-blue-600 dark:text-blue-400';
-            break;
-        case 'success':
-            line.className += ' text-green-600 dark:text-green-400 font-medium';
-            break;
-        case 'error':
-            line.className += ' text-red-600 dark:text-red-400 font-medium';
-            break;
-        case 'spacer':
-            line.style.height = '1em';
-            break;
-        default:
-            line.className += ' text-font-default-light dark:text-font-default-dark';
-    }
-
-    line.textContent = text;
-    container.appendChild(line);
-}
-
-function scrollToBottom(element) {
-    element.scrollTop = element.scrollHeight;
-}
-
-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;
-}
-
-// Search functionality
-function searchCommands(query) {
-    const searchQuery = query.toLowerCase().trim();
-    const categories = document.querySelectorAll('[id^="content-"]');
-    const clearButton = document.getElementById('clearSearch');
-    const commandsCount = document.getElementById('commandsCount');
-    let visibleCommands = 0;
-
-    // Show/hide clear button
-    if (searchQuery) {
-        clearButton.classList.remove('hidden');
-    } else {
-        clearButton.classList.add('hidden');
-    }
-
-    categories.forEach(category => {
-        const categoryName = category.id.replace('content-', '');
-        const commands = category.querySelectorAll('.command-item');
-        let categoryHasVisibleCommands = false;
-
-        commands.forEach(command => {
-            const commandName = command.querySelector('.command-name').textContent.toLowerCase();
-            const commandDesc = command.querySelector('.command-description')?.textContent.toLowerCase() || '';
-
-            if (!searchQuery || commandName.includes(searchQuery) || commandDesc.includes(searchQuery)) {
-                command.style.display = 'block';
-                categoryHasVisibleCommands = true;
-                visibleCommands++;
-            } else {
-                command.style.display = 'none';
-            }
-        });
-
-        // Show/hide category based on whether it has visible commands
-        const categoryHeader = document.querySelector(`button[onclick="toggleCategory('${categoryName}')"]`);
-        const categoryContainer = categoryHeader.parentElement;
-
-        if (categoryHasVisibleCommands) {
-            categoryContainer.style.display = 'block';
-
-            // Auto-expand categories when searching
-            if (searchQuery) {
-                category.style.display = 'block';
-                const icon = categoryHeader.querySelector('.material-icons');
-                if (icon) {
-                    icon.textContent = 'expand_less';
-                    icon.style.transform = 'rotate(0deg)';
-                }
-            }
-        } else {
-            categoryContainer.style.display = 'none';
-        }
-    });
-
-    // Update commands count
-    if (commandsCount) {
-        commandsCount.textContent = visibleCommands;
-    }
-
-    // Show "no results" message if no commands found
-    showNoResultsMessage(visibleCommands === 0 && searchQuery);
-}
-
-function clearSearch() {
-    const searchInput = document.getElementById('commandSearch');
-    const clearButton = document.getElementById('clearSearch');
-    const commandsCount = document.getElementById('commandsCount');
-
-    searchInput.value = '';
-    clearButton.classList.add('hidden');
-
-    // Show all commands and categories
-    const categories = document.querySelectorAll('[id^="content-"]');
-    const allCommands = document.querySelectorAll('.command-item');
-
-    categories.forEach(category => {
-        const categoryName = category.id.replace('content-', '');
-        const categoryHeader = document.querySelector(`button[onclick="toggleCategory('${categoryName}')"]`);
-        categoryHeader.parentElement.style.display = 'block';
-        // Reset to collapsed state
-        category.style.display = 'none';
-        const icon = categoryHeader.querySelector('.material-icons');
-        if (icon) {
-            icon.textContent = 'expand_less';
-            icon.style.transform = 'rotate(-90deg)';
-        }
-    });
-
-    allCommands.forEach(command => {
-        command.style.display = 'block';
-    });
-
-    // Reset commands count to original total
-    if (commandsCount && commandsCount.dataset.originalCount) {
-        commandsCount.textContent = commandsCount.dataset.originalCount;
-    }
-
-    // Hide no results message
-    showNoResultsMessage(false);
-}
-
-function showNoResultsMessage(show) {
-    let noResultsDiv = document.getElementById('noSearchResults');
-
-    if (show && !noResultsDiv) {
-        // Create no results message
-        noResultsDiv = document.createElement('div');
-        noResultsDiv.id = 'noSearchResults';
-        noResultsDiv.className = 'text-center py-12';
-        noResultsDiv.innerHTML = `
-            <div class="flex flex-col items-center">
-                <span class="material-icons text-6xl text-base-400 dark:text-base-500 mb-4">search_off</span>
-                <h3 class="text-lg font-medium text-font-important-light dark:text-font-important-dark mb-2">
-                    No Commands Found
-                </h3>
-                <p class="text-font-subtle-light dark:text-font-subtle-dark max-w-md mx-auto">
-                    No commands match your search criteria. Try different keywords or clear the search.
-                </p>
-            </div>
-        `;
-
-        // Insert after the commands container
-        const commandsContainer = document.querySelector('.space-y-4');
-        if (commandsContainer && commandsContainer.parentNode) {
-            commandsContainer.parentNode.insertBefore(noResultsDiv, commandsContainer.nextSibling);
-        }
-    } else if (!show && noResultsDiv) {
-        noResultsDiv.remove();
-    }
-}
-
-// Initialize on page load
-document.addEventListener('DOMContentLoaded', function() {
-    const searchInput = document.getElementById('commandSearch');
-    const commandsCount = document.getElementById('commandsCount');
-
-    // Store original count for reset
-    if (commandsCount) {
-        commandsCount.dataset.originalCount = commandsCount.textContent;
-    }
-
-    // Focus search with Ctrl+F or Cmd+F
-    document.addEventListener('keydown', function(e) {
-        if ((e.ctrlKey || e.metaKey) && e.key === 'f' && searchInput) {
-            e.preventDefault();
-            searchInput.focus();
-        }
-
-        // Clear search with Escape
-        if (e.key === 'Escape' && document.activeElement === searchInput) {
-            clearSearch();
-            searchInput.blur();
-        }
-
-        // Close modal with Escape
-        if (e.key === 'Escape') {
-            closeCommandModal();
-        }
-    });
-
-    // Close modal on background click
-    const modal = document.getElementById('commandModal');
-    if (modal) {
-        modal.addEventListener('click', function(e) {
-            if (e.target === modal) {
-                closeCommandModal();
-            }
-        });
-    }
-});
-
-// Export functions for global use
-window.searchCommands = searchCommands;
-window.clearSearch = clearSearch;

django_cfg/templates/admin/components/metric_card.html

@@ -1,39 +0,0 @@
-{% load unfold %}
-
-<!-- Metric Card Component -->
-<div class="theme-card rounded-lg p-5 border theme-border hover:shadow-md transition-shadow duration-200">
-    <div class="flex items-center justify-between">
-        <div class="flex items-center space-x-3">
-            <div class="flex-shrink-0">
-                <span class="material-icons 
-                    {% if status == 'healthy' or status == 'success' %}text-green-600 dark:text-green-400
-                    {% elif status == 'warning' %}text-amber-600 dark:text-amber-400
-                    {% elif status == 'error' or status == 'failed' %}text-red-600 dark:text-red-400
-                    {% elif status == 'info' %}text-blue-600 dark:text-blue-400
-                    {% else %}text-blue-600 dark:text-blue-400{% endif %}">
-                    {{ icon }}
-                </span>
-            </div>
-            <div class="min-w-0 flex-1">
-                <div class="text-sm font-medium theme-text truncate">
-                    {{ title }}
-                </div>
-                {% if description %}
-                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate">
-                    {{ description }}
-                </div>
-                {% endif %}
-            </div>
-        </div>
-        
-        <div class="flex-shrink-0">
-            {% include 'admin/components/status_badge.html' with status=status text=status_text %}
-        </div>
-    </div>
-    
-    {% if progress %}
-    <div class="mt-4">
-        {% include 'admin/components/progress_bar.html' with value=progress title=progress_title description=progress_description %}
-    </div>
-    {% endif %}
-</div>

django_cfg/templates/admin/components/modal.html

@@ -1,58 +0,0 @@
-{% load unfold %}
-
-<!-- Reusable Modal Component based on Unfold patterns -->
-<div id="{{ modal_id|default:'modal' }}" class="fixed inset-0 bg-black/80 backdrop-blur-sm hidden z-50">
-    <div class="flex items-center justify-center min-h-screen p-4">
-        <div class="bg-white dark:bg-base-900 rounded-lg shadow-2xl max-w-{{ max_width|default:'4xl' }} w-full max-h-[80vh] flex flex-col border border-base-200 dark:border-base-700">
-            
-            <!-- Modal Header -->
-            {% if title or closable %}
-            <div class="flex items-center justify-between p-4 border-b border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-800">
-                {% if title %}
-                <div class="flex items-center space-x-3">
-                    {% if icon %}
-                    <div class="flex items-center justify-center w-10 h-10 bg-primary-100 dark:bg-primary-900/20 rounded-lg">
-                        <span class="material-icons text-primary-600 dark:text-primary-400">{{ icon }}</span>
-                    </div>
-                    {% endif %}
-                    <div>
-                        <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">
-                            {{ title }}
-                        </h3>
-                        {% if subtitle %}
-                        <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark">
-                            {{ subtitle }}
-                        </p>
-                        {% endif %}
-                    </div>
-                </div>
-                {% endif %}
-                
-                {% if closable %}
-                <button onclick="{{ close_function|default:'closeModal()' }}" class="p-2 text-font-subtle-light dark:text-font-subtle-dark hover:text-font-default-light dark:hover:text-font-default-dark hover:bg-base-100 dark:hover:bg-base-700 rounded-lg transition-colors">
-                    <span class="material-icons">close</span>
-                </button>
-                {% endif %}
-            </div>
-            {% endif %}
-            
-            <!-- Modal Body -->
-            <div class="flex-1 overflow-hidden p-4">
-                {% if scrollable %}
-                <div class="bg-base-100 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700 h-full overflow-y-auto p-4">
-                    {{ content }}
-                </div>
-                {% else %}
-                {{ content }}
-                {% endif %}
-            </div>
-            
-            <!-- Modal Footer -->
-            {% if footer %}
-            <div class="flex items-center justify-between p-4 border-t border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-800">
-                {{ footer }}
-            </div>
-            {% endif %}
-        </div>
-    </div>
-</div>

django_cfg/templates/admin/components/progress_bar.html

@@ -1,20 +0,0 @@
-{#
-    ⚠️ DEPRECATED: This component is deprecated.
-
-    Use Unfold's built-in progress component instead:
-    {% component "unfold/components/progress.html" with value=... title=... description=... %}
-    {% endcomponent %}
-
-    This wrapper will be removed in a future version.
-    For now it redirects to the Unfold component for backwards compatibility.
-#}
-
-{% load unfold %}
-
-<!-- Wrapper for backwards compatibility - redirects to Unfold component -->
-{% component "unfold/components/progress.html" with
-    value=value
-    title=title
-    description=description
-    class=class %}
-{% endcomponent %}

django_cfg/templates/admin/components/section_header.html

@@ -1,26 +0,0 @@
-{% load unfold %}
-
-<!-- Section Header Component -->
-<div class="flex items-center mb-6">
-    {% if icon %}
-    <div class="flex items-center justify-center w-8 h-8 bg-{{ icon_color|default:'primary' }}-100 dark:bg-{{ icon_color|default:'primary' }}-900/20 rounded-lg mr-3">
-        <span class="material-icons text-{{ icon_color|default:'primary' }}-600 dark:text-{{ icon_color|default:'primary' }}-400 text-lg">{{ icon }}</span>
-    </div>
-    {% endif %}
-    
-    <h2 class="text-xl font-semibold text-font-important-light dark:text-font-important-dark">
-        {{ title }}
-    </h2>
-    
-    {% if badge %}
-    <span class="ml-auto text-xs text-font-subtle-light dark:text-font-subtle-dark bg-base-100 dark:bg-base-800 px-2 py-1 rounded-full">
-        {{ badge }}
-    </span>
-    {% endif %}
-    
-    {% if actions %}
-    <div class="ml-auto flex items-center space-x-2">
-        {{ actions }}
-    </div>
-    {% endif %}
-</div>

django_cfg/templates/admin/components/stat_item.html

@@ -1,32 +0,0 @@
-{% load unfold %}
-
-<!-- Stat Item Component -->
-<div class="flex items-center justify-between p-3 bg-base-50 dark:bg-base-800 rounded-lg hover:bg-base-100 dark:hover:bg-base-700 transition-colors duration-150 group">
-    <div class="flex items-center">
-        {% if icon %}
-            <div class="w-8 h-8 rounded-lg flex items-center justify-center mr-3 bg-{{ color|default:'primary' }}-100 dark:bg-{{ color|default:'primary' }}-900/20">
-                <span class="material-icons text-xs text-{{ color|default:'primary' }}-600 dark:text-{{ color|default:'primary' }}-400">{{ icon }}</span>
-            </div>
-        {% endif %}
-        <div>
-            <div class="text-sm font-medium text-font-default-light dark:text-font-default-dark">{{ title }}</div>
-            {% if description %}
-                <div class="text-xs text-font-subtle-light dark:text-font-subtle-dark">{{ description }}</div>
-            {% endif %}
-        </div>
-    </div>
-    
-    <div class="flex items-center gap-3">
-        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-{{ color|default:'primary' }}-100 dark:bg-{{ color|default:'primary' }}-900/20 text-{{ color|default:'primary' }}-600 dark:text-{{ color|default:'primary' }}-400">
-            {{ count|default:0 }}
-        </span>
-        
-        {% if url %}
-        <a href="{{ url }}" 
-           class="inline-flex items-center gap-1 px-3 py-1 bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-600 text-white rounded-lg text-xs font-medium transition-colors duration-150 group-hover:shadow-sm">
-            <span class="material-icons text-xs">visibility</span>
-            <span>View</span>
-        </a>
-        {% endif %}
-    </div>
-</div>

django_cfg/templates/admin/components/stats_grid.html

@@ -1,72 +0,0 @@
-{% load unfold %}
-
-<!-- Statistics Grid Component -->
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-{{ cols|default:'4' }} gap-{{ gap|default:'4' }} {% if class %}{{ class }}{% endif %}">
-    {% for stat in stats %}
-    <div class="bg-white dark:bg-base-900 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-base-200 dark:border-base-700 overflow-hidden group">
-        <div class="p-5">
-            <div class="flex items-start justify-between">
-                <div class="flex-1">
-                    <!-- Title -->
-                    <div class="text-xs font-semibold text-font-subtle-light dark:text-font-subtle-dark uppercase tracking-wider mb-2">
-                        {{ stat.title }}
-                    </div>
-                    
-                    <!-- Value -->
-                    <div class="text-2xl font-bold text-font-important-light dark:text-font-important-dark mb-1">
-                        {{ stat.value }}
-                    </div>
-                    
-                    <!-- Change indicator -->
-                    {% if stat.change %}
-                    <div class="flex items-center">
-                        <div class="flex items-center px-2 py-1 rounded-full text-xs font-medium
-                            {% if stat.change_type == 'positive' %}bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-400
-                            {% elif stat.change_type == 'negative' %}bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400
-                            {% else %}bg-base-100 dark:bg-base-800 text-font-default-light dark:text-font-default-dark{% endif %}">
-                            
-                            <span class="material-icons text-xs mr-1">
-                                {% if stat.change_type == 'positive' %}arrow_upward
-                                {% elif stat.change_type == 'negative' %}arrow_downward
-                                {% else %}remove{% endif %}
-                            </span>
-                            {{ stat.change }}
-                        </div>
-                    </div>
-                    {% endif %}
-                    
-                    <!-- Description -->
-                    {% if stat.description %}
-                    <div class="text-xs text-font-subtle-light dark:text-font-subtle-dark mt-1">
-                        {{ stat.description }}
-                    </div>
-                    {% endif %}
-                </div>
-                
-                <!-- Icon -->
-                {% if stat.icon %}
-                <div class="flex-shrink-0 ml-3">
-                    <div class="w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
-                        <span class="material-icons text-2xl
-                            {% if stat.change_type == 'positive' %}text-green-600 dark:text-green-400
-                            {% elif stat.change_type == 'negative' %}text-red-600 dark:text-red-400
-                            {% else %}text-primary-600 dark:text-primary-400{% endif %}">
-                            {{ stat.icon }}
-                        </span>
-                    </div>
-                </div>
-                {% endif %}
-            </div>
-        </div>
-        
-        <!-- Accent bar -->
-        {% if stat.show_accent %}
-        <div class="h-1 w-full
-            {% if stat.change_type == 'positive' %}bg-gradient-to-r from-green-400 to-green-600
-            {% elif stat.change_type == 'negative' %}bg-gradient-to-r from-red-400 to-red-600
-            {% else %}bg-gradient-to-r from-primary-400 to-primary-600{% endif %}">
-        </div>
-        {% endif %}
-    </div>
-    {% endfor %}
-</div>

django_cfg/templates/admin/components/status_badge.html

@@ -1,28 +0,0 @@
-{% load unfold %}
-
-<!-- Status Badge Component -->
-<span class="status-badge inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
-    {% if status == 'active' or status == 'healthy' or status == 'success' %}bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-400
-    {% elif status == 'warning' or status == 'pending' %}bg-amber-100 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400
-    {% elif status == 'error' or status == 'failed' or status == 'inactive' %}bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400
-    {% elif status == 'info' or status == 'processing' %}bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400
-    {% else %}bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400{% endif %}">
-    
-    {% if icon %}
-    <span class="material-icons text-xs mr-1">{{ icon }}</span>
-    {% else %}
-        {% if status == 'active' or status == 'healthy' or status == 'success' %}
-        <span class="material-icons text-xs mr-1">check_circle</span>
-        {% elif status == 'warning' or status == 'pending' %}
-        <span class="material-icons text-xs mr-1">warning</span>
-        {% elif status == 'error' or status == 'failed' %}
-        <span class="material-icons text-xs mr-1">error</span>
-        {% elif status == 'inactive' %}
-        <span class="material-icons text-xs mr-1">cancel</span>
-        {% elif status == 'info' or status == 'processing' %}
-        <span class="material-icons text-xs mr-1">info</span>
-        {% endif %}
-    {% endif %}
-    
-    {{ text|default:status|title }}
-</span>