{% extends "admin/base_site.html" %}
{% load humanize %}
{% load dash_tags %}
{% load i18n %}

{% block content_title %}
    {{ index_title|default:"Django Dash Dashboard" }}
{% endblock %}

{% block extrastyle %}
    {{ block.super }}
    <style>
        .dash-hero {
            position: relative;
            overflow: hidden;
            border-radius: 1.25rem;
            border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
            background: linear-gradient(135deg, var(--color-base-100) 0%, color-mix(in oklab, var(--color-base-200) 55%, transparent) 60%, var(--color-base-200) 100%);
        }

        .dash-hero::before {
            content: "";
            position: absolute;
            inset: -25% auto auto -10%;
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, color-mix(in oklab, var(--color-primary) 20%, transparent), transparent 60%);
            filter: blur(10px);
        }

        .dash-hero::after {
            content: "";
            position: absolute;
            inset: auto -10% -45% auto;
            width: 440px;
            height: 440px;
            background: radial-gradient(circle, color-mix(in oklab, var(--color-accent) 18%, transparent), transparent 62%);
            filter: blur(12px);
        }

        .dash-grid {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(color-mix(in oklab, var(--color-base-content) 6%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in oklab, var(--color-base-content) 6%, transparent) 1px, transparent 1px);
            background-size: 38px 38px;
            mask-image: radial-gradient(circle at top, rgba(0, 0, 0, 0.6), transparent 70%);
            pointer-events: none;
        }

        @keyframes dash-rise {
            from {
                opacity: 0;
                transform: translateY(12px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .dash-rise {
            animation: dash-rise 0.55s ease-out both;
        }

        .dash-delay-1 {
            animation-delay: 0.08s;
        }

        .dash-delay-2 {
            animation-delay: 0.16s;
        }

        .dash-delay-3 {
            animation-delay: 0.24s;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="mt-3 grid gap-6">
        <section class="dash-hero p-6 md:p-8 dash-rise">
            <div class="dash-grid"></div>
            <div class="relative z-10 flex flex-col gap-6">
                <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                    <div class="space-y-2">
                        <p class="text-xs uppercase tracking-[0.3em] text-base-content/60">
                            {% trans "Control Center" %}
                        </p>
                        <h1 class="text-3xl font-semibold md:text-4xl">
                            {{ index_title|default:_("Dashboard") }}
                        </h1>
                        <p class="text-sm text-base-content/70">
                            {% trans "Monitor your apps, jump into models, and keep the project moving." %}
                        </p>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        {% if site_url %}
                            <a class="btn btn-primary btn-sm" href="{{ site_url }}">
                                <i class="fa-solid fa-arrow-up-right-from-square"></i>
                                {% trans "Open Site" %}
                            </a>
                        {% endif %}
                        <a class="btn btn-outline btn-sm" href="{% url 'admin:password_change' %}">
                            <i class="fa-solid fa-shield-halved"></i>
                            {% trans "Security" %}
                        </a>
                    </div>
                </div>
                <div class="grid gap-3 md:grid-cols-3">
                    <div class="rounded-xl border border-base-200 bg-base-100/80 p-4 dash-rise dash-delay-1">
                        <p class="text-xs uppercase tracking-widest text-base-content/60">
                            {% trans "Apps" %}
                        </p>
                        <p class="mt-2 text-3xl font-semibold">{{ available_apps|length }}</p>
                        <p class="text-sm text-base-content/70">
                            {% trans "Core modules ready to manage." %}
                        </p>
                    </div>
                    <div class="rounded-xl border border-base-200 bg-base-100/80 p-4 dash-rise dash-delay-2">
                        <p class="text-xs uppercase tracking-widest text-base-content/60">
                            {% trans "Activity" %}
                        </p>
                        <p class="mt-2 text-3xl font-semibold">{{ latest_history|length }}</p>
                        <p class="text-sm text-base-content/70">
                            {% trans "Recent actions in the admin." %}
                        </p>
                    </div>
                    <div class="rounded-xl border border-base-200 bg-base-100/80 p-4 dash-rise dash-delay-3">
                        <p class="text-xs uppercase tracking-widest text-base-content/60">
                            {% trans "User" %}
                        </p>
                        <p class="mt-2 text-lg font-semibold">{{ user.get_short_name|default:user.username }}</p>
                        <p class="text-sm text-base-content/70">
                            {% trans "Signed in and ready to ship." %}
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="grid gap-4">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-lg font-semibold">{% trans "Key Metrics" %}</h2>
                    <p class="text-sm text-base-content/70">{% trans "Fast snapshots across your data." %}</p>
                </div>
            </div>
            <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(200px,1fr))]">
                <div class="card bg-base-100 border border-base-200 dash-rise w-full">
                    <div class="card-body p-4">
                        <div class="flex items-center justify-between">
                            <h3 class="font-semibold">{% trans "Users" %}</h3>
                            <i class="fa-solid fa-user-group text-base-content/50"></i>
                        </div>
                        <p class="mt-2 text-2xl font-semibold">{% get_user_count %}</p>
                        <a class="btn btn-xs btn-outline mt-2 w-fit" href="{% get_user_changelist_url %}">
                            {% trans "Manage" %}
                        </a>
                    </div>
                </div>
                {% for app in available_apps|slice:":3" %}
                    {% for model in app.models|slice:":2" %}
                        <div class="card bg-base-100 border border-base-200 dash-rise dash-delay-1 w-full">
                            <div class="card-body p-4">
                                <div class="flex items-center justify-between gap-2">
                                    <h3 class="font-semibold">{{ model.name }}</h3>
                                    <span class="text-xs text-base-content/60">{{ app.name }}</span>
                                </div>
                                {% get_model_entry_count app model as model_count %}
                                <p class="mt-2 text-2xl font-semibold">{{ model_count }}</p>
                                <a class="btn btn-xs btn-outline mt-2 w-fit" href="{{ model.admin_url }}">
                                    {% trans "Manage" %}
                                </a>
                            </div>
                        </div>
                    {% endfor %}
                {% endfor %}
            </div>
        </section>

        <section class="grid gap-4 lg:grid-cols-3">
            <div class="card bg-base-100 border border-base-200 dash-rise">
                <div class="card-body">
                    <div class="flex items-center justify-between">
                        <div>
                            <h2 class="text-lg font-semibold">{% trans "Quick Start" %}</h2>
                            <p class="text-sm text-base-content/70">{% trans "Jump into key areas fast." %}</p>
                        </div>
                        <i class="fa-solid fa-bolt text-xl text-primary"></i>
                    </div>
                    <div class="mt-4 grid gap-2">
                        {% for app in available_apps|slice:":5" %}
                            <a class="flex items-center justify-between rounded-lg border border-base-200 bg-base-200/40 px-3 py-2 transition hover:-translate-y-0.5 hover:bg-base-200"
                               href="{{ app.app_url }}">
                                <span class="font-medium">{{ app.name }}</span>
                                <span class="text-xs text-base-content/70">
                                    {{ app.models|length }} {% trans "models" %}
                                </span>
                            </a>
                        {% empty %}
                            <p class="text-sm text-base-content/70">{% trans "No apps available." %}</p>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="card bg-base-100 border border-base-200 lg:col-span-2 dash-rise dash-delay-1">
                <div class="card-body">
                    <div class="flex items-center justify-between">
                        <div>
                            <h2 class="text-lg font-semibold">{% trans "Recent Activity" %}</h2>
                            <p class="text-sm text-base-content/70">{% trans "Latest changes across the system." %}</p>
                        </div>
                        <a class="btn btn-link btn-sm" href="{{ logentry_changelist_url }}">
                            {% trans "Show all" %}
                        </a>
                    </div>
                    <div class="overflow-auto">
                        <table class="table">
                            <thead>
                            <tr>
                                <th class="w-100">{% trans "In" %}</th>
                                <th>{% trans "Action" %}</th>
                                <th>{% trans "At Time" %}</th>
                                <th>{% trans "Admin" %}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for history in latest_history %}
                                <tr>
                                    <td>
                                        <a href="{{ history.get_admin_url }}"
                                           class="text-primary">
                                            {{ history.content_type }}
                                        </a>
                                    </td>
                                    <td>
                                        <a class="underline"
                                           href="{% url 'admin:admin_logentry_change' history.pk %}">{{ history.get_action_flag_display }}</a>
                                    </td>
                                    <td>
                                    <span class="text-muted">
                                        {{ history.action_time|naturaltime }}
                                    </span>
                                    </td>
                                    <td>
                                        <strong>
                                            <a href="{% get_user_admin_change_url history.user %}">{{ history.user }}</a>
                                        </strong>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="4" class="text-base-content/70">
                                        {% trans "No recent actions yet." %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>

        <section class="grid gap-4">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-lg font-semibold">{% trans "Workspace" %}</h2>
                    <p class="text-sm text-base-content/70">{% trans "Manage every app from a focused hub." %}</p>
                </div>
            </div>
            <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                {% for app in available_apps %}
                    <div class="card bg-base-100 border border-base-200 dash-rise dash-delay-2">
                        <div class="card-body">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                        <i class="fa-solid fa-layer-group"></i>
                                    </div>
                                    <div>
                                        <a class="text-lg font-semibold" href="{{ app.app_url }}">
                                            {{ app.name }}
                                        </a>
                                        <p class="text-xs text-base-content/60">
                                            {{ app.models|length }} {% trans "models" %}
                                        </p>
                                    </div>
                                </div>
                                <a class="btn btn-ghost btn-sm" href="{{ app.app_url }}">
                                    {% trans "Open" %}
                                </a>
                            </div>
                            <div class="mt-4 grid gap-2">
                                {% for model in app.models|slice:":4" %}
                                    <div class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-base-200 bg-base-200/40 px-3 py-2">
                                        <a href="{{ model.admin_url }}" class="font-medium">
                                            {{ model.name }}
                                        </a>
                                        <div class="flex flex-wrap gap-2">
                                            {% if model.add_url %}
                                                <a class="btn btn-xs btn-primary" href="{{ model.add_url }}">
                                                    {% trans "New" %}
                                                </a>
                                            {% endif %}
                                            <a class="btn btn-xs btn-outline" href="{{ model.admin_url }}">
                                                {% trans "Manage" %}
                                            </a>
                                        </div>
                                    </div>
                                {% empty %}
                                    <p class="text-sm text-base-content/70">{% trans "No models available." %}</p>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% empty %}
                    <div class="card bg-base-100 border border-base-200">
                        <div class="card-body">
                            <p class="text-sm text-base-content/70">{% trans "No apps available." %}</p>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </section>
    </div>

{% endblock %}