{% extends "base.html" %}
{% import "components.html" as components %}

{% block title %}{{ crate::i18n::t("dashboard-title", lang) }} - Remotto Console{% endblock %}

{% block content %}
<div class="flex h-screen">
    <!-- Sidebar -->
    {% call components::sidebar("dashboard", lang) %}

    <!-- Main Content -->
    <main class="flex-1 overflow-auto md:ml-0 bg-slate-900">
        {% call components::header(crate::i18n::t("dashboard-title", lang), username, lang) %}

        <div class="p-8">
            <!-- Stats Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <!-- Total Devices -->
                <div class="glass rounded-xl p-6 border border-white/10 card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-400 text-sm">{{ crate::i18n::t("dashboard-total-devices", lang) }}</p>
                            <p class="text-3xl font-bold mt-1" hx-get="/admin/api/stats/devices"
                                hx-trigger="load, every 30s">{{ device_count }}</p>
                        </div>
                        <div class="w-12 h-12 rounded-lg bg-primary-500/20 flex items-center justify-center">
                            <svg class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                </path>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Online Devices -->
                <div class="glass rounded-xl p-6 border border-white/10 card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-400 text-sm">{{ crate::i18n::t("dashboard-online", lang) }}</p>
                            <p class="text-3xl font-bold mt-1 text-green-400" hx-get="/admin/api/stats/online"
                                hx-trigger="load, every 10s">{{ online_count }}</p>
                        </div>
                        <div class="w-12 h-12 rounded-lg bg-green-500/20 flex items-center justify-center">
                            <svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z">
                                </path>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Groups -->
                <div class="glass rounded-xl p-6 border border-white/10 card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-400 text-sm">{{ crate::i18n::t("dashboard-groups", lang) }}</p>
                            <p class="text-3xl font-bold mt-1">{{ group_count }}</p>
                        </div>
                        <div class="w-12 h-12 rounded-lg bg-purple-500/20 flex items-center justify-center">
                            <svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10">
                                </path>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- License -->
                <div class="glass rounded-xl p-6 border border-white/10 card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-400 text-sm">{{ crate::i18n::t("dashboard-license", lang) }}</p>
                            <p class="text-xl font-bold mt-1">
                                {% if is_demo %}
                                <span class="text-yellow-400">{{ crate::i18n::t("dashboard-demo", lang) }}</span>
                                {% else %}
                                <span class="text-green-400">{{ crate::i18n::t("dashboard-production", lang) }}</span>
                                {% endif %}
                            </p>
                            <p class="text-sm text-slate-500">{{ device_count }}/{% if max_devices >= 9999 %}{{ crate::i18n::t("license-unlimited-devices", lang) }}{% else %}{{ max_devices }}{% endif %} {{
                                crate::i18n::t("dashboard-devices-unit", lang) }}</p>
                        </div>
                        <div class="w-12 h-12 rounded-lg bg-yellow-500/20 flex items-center justify-center">
                            <svg class="w-6 h-6 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z">
                                </path>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Scheduled Tasks -->
                <div class="glass rounded-xl p-6 border border-white/10 card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-400 text-sm">{{ crate::i18n::t("dashboard-scheduled-tasks", lang) }}</p>
                            <p class="text-3xl font-bold mt-1 text-cyan-400" hx-get="/admin/api/stats/scheduled-tasks"
                                hx-trigger="load, every 30s">{{ scheduled_task_count }}</p>
                        </div>
                        <div class="w-12 h-12 rounded-lg bg-cyan-500/20 flex items-center justify-center">
                            <svg class="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z">
                                </path>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Print Pages (24h) -->
                <div class="glass rounded-xl p-6 border border-white/10 card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-400 text-sm">{{ crate::i18n::t("dashboard-print-pages", lang) }}</p>
                            <p class="text-3xl font-bold mt-1 text-orange-400" hx-get="/admin/api/stats/print-pages"
                                hx-trigger="load, every 60s">{{ print_pages_24h }}</p>
                        </div>
                        <div class="w-12 h-12 rounded-lg bg-orange-500/20 flex items-center justify-center">
                            <svg class="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z">
                                </path>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Web Rules -->
                <div class="glass rounded-xl p-6 border border-white/10 card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-400 text-sm">{{ crate::i18n::t("dashboard-web-rules", lang) }}</p>
                            <p class="text-3xl font-bold mt-1 text-rose-400" hx-get="/admin/api/stats/web-rules"
                                hx-trigger="load, every 30s">{{ web_rules_count }}</p>
                        </div>
                        <div class="w-12 h-12 rounded-lg bg-rose-500/20 flex items-center justify-center">
                            <svg class="w-6 h-6 text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                                </path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Devices -->
            <div class="glass rounded-xl border border-white/10">
                <div class="px-6 py-4 border-b border-white/10 flex justify-between items-center">
                    <h3 class="font-semibold">{{ crate::i18n::t("dashboard-recent-activity", lang) }}</h3>
                </div>
                <div id="activity-feed" hx-get="/admin/api/recent-devices" hx-trigger="load"
                    class="divide-y divide-white/10">
                    <!-- Devices will be loaded here -->
                    <div class="p-6 text-center text-slate-400">{{ crate::i18n::t("common-loading", lang) }}</div>
                </div>
            </div>
        </div>
    </main>
</div>
{% endblock %}