{% load unfold %}

<!-- Commands Tab Content -->
<div class="space-y-8">
    <!-- Header -->
    <div class="">
        <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">Django Commands</h1>
                <p class="text-font-default-light dark:text-font-default-dark mt-2">
                    Discover and explore all available Django management commands
                </p>
            </div>
            <div class="flex items-center space-x-2 text-sm text-font-subtle-light dark:text-font-subtle-dark">
                <span class="material-icons text-purple-500">terminal</span>
                <span>{{ django_commands.total_commands }} commands available</span>
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-base-50 dark:bg-base-800 rounded-lg p-4">
                <div class="flex items-center">
                    <span class="material-icons text-blue-600 dark:text-blue-400 mr-3">terminal</span>
                    <div>
                        <div class="text-2xl font-bold text-font-important-light dark:text-font-important-dark">{{ django_commands.total_commands }}</div>
                        <div class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Total Commands</div>
                    </div>
                </div>
            </div>
            
            <div class="bg-base-50 dark:bg-base-800 rounded-lg p-4">
                <div class="flex items-center">
                    <span class="material-icons text-green-600 dark:text-green-400 mr-3">settings</span>
                    <div>
                        <div class="text-2xl font-bold text-font-important-light dark:text-font-important-dark">{{ django_commands.core_commands }}</div>
                        <div class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Core Commands</div>
                    </div>
                </div>
            </div>
            
            <div class="bg-base-50 dark:bg-base-800 rounded-lg p-4">
                <div class="flex items-center">
                    <span class="material-icons text-indigo-600 dark:text-indigo-400 mr-3">apps</span>
                    <div>
                        <div class="text-2xl font-bold text-font-important-light dark:text-font-important-dark">{{ django_commands.custom_commands }}</div>
                        <div class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Custom Commands</div>
                    </div>
                </div>
            </div>
            
            <div class="bg-base-50 dark:bg-base-800 rounded-lg p-4">
                <div class="flex items-center">
                    <span class="material-icons text-purple-600 dark:text-purple-400 mr-3">category</span>
                    <div>
                        <div class="text-2xl font-bold text-font-important-light dark:text-font-important-dark">{{ django_commands.categories|length }}</div>
                        <div class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Categories</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Commands Section -->
    {% include 'admin/snippets/components/django_commands.html' %}
</div>