{% load i18n %}
{% comment %}
Partial — MUST NOT extend a layout. It is rendered inside admin/index.html's
content block by the demo_dashboard inclusion tag; extending an Unfold layout
here would emit the whole admin shell (sidebar, header, menu) a second time.
{% endcomment %}
<div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
    <div class="flex flex-col gap-8">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">
                {% translate "SnapAdmin Custom Dashboard" %}
            </h1>
        </div>

        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
            <!-- Stats Cards -->
            <div class="overflow-hidden bg-white rounded-lg shadow dark:bg-gray-800">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <span class="material-symbols-outlined text-gray-400">shopping_cart</span>
                        </div>
                        <div class="flex-1 w-0 ml-5">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate dark:text-gray-400">
                                    {% translate "Total orders" %}
                                </dt>
                                <dd>
                                    <div class="text-lg font-medium text-gray-900 dark:text-white">
                                        {{ total_orders }}
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="overflow-hidden bg-white rounded-lg shadow dark:bg-gray-800">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <span class="material-symbols-outlined text-gray-400">person</span>
                        </div>
                        <div class="flex-1 w-0 ml-5">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate dark:text-gray-400">
                                    {% translate "Active customers" %}
                                </dt>
                                <dd>
                                    <div class="text-lg font-medium text-gray-900 dark:text-white">
                                        {{ active_customers }}
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="overflow-hidden bg-white rounded-lg shadow dark:bg-gray-800">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <span class="material-symbols-outlined text-gray-400">payments</span>
                        </div>
                        <div class="flex-1 w-0 ml-5">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate dark:text-gray-400">
                                    {% translate "Revenue" %}
                                </dt>
                                <dd>
                                    <div class="text-lg font-medium text-gray-900 dark:text-white">
                                        {{ revenue|floatformat:2 }}
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
            <!-- Recent Activity -->
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">{% translate "Recent activity" %}</h2>
                <ul class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% for row in recent_activity %}
                    <li class="py-3">
                        <div class="flex items-center space-x-4">
                            <div class="flex-shrink-0 w-2 h-2 {{ row.dot }} rounded-full"></div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm text-gray-900 truncate dark:text-white">{{ row.text }}</p>
                            </div>
                            {% if row.when %}
                            <div class="text-xs text-gray-500">{{ row.when|timesince }}</div>
                            {% endif %}
                        </div>
                    </li>
                    {% empty %}
                    <li class="py-3 text-sm text-gray-500 dark:text-gray-400">
                        {% translate "No activity yet — run “python manage.py seed_demo” to populate the demo data." %}
                    </li>
                    {% endfor %}
                </ul>
            </div>

            <!-- System Info -->
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">{% translate "System monitor" %}</h2>
                <div class="space-y-4">
                    <div>
                        <div class="flex justify-between mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            <span>{% translate "Disk usage" %}</span>
                            <span>{{ disk_percent }}%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                            <div class="bg-blue-600 h-2 rounded-full" style="width: {{ disk_percent }}%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            <span>{% blocktranslate %}Products in stock ({{ product_available }} of {{ product_total }}){% endblocktranslate %}</span>
                            <span>{{ availability_percent }}%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                            <div class="bg-purple-600 h-2 rounded-full" style="width: {{ availability_percent }}%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>