{% extends "admin/layout.html" %}

{% block content %}
<div class="sm:flex sm:items-center mb-8">
    <div class="sm:flex-auto">
        <h1 class="text-base font-semibold text-white">Dashboard</h1>
    </div>
</div>

{% if metrics %}
<dl class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
    {% for metric in metrics %}
    {% if metric.metric_type == 'value' %}
    <div class="overflow-hidden rounded-lg bg-gray-800/75 px-4 py-5 inset-ring inset-ring-white/10 sm:p-6">
        <dt class="truncate text-sm font-medium text-gray-400">{{ metric.name }}</dt>
        <dd class="mt-1 text-3xl font-semibold tracking-tight text-white">{{ metric.formatted }}</dd>
        {% if metric.change is not none %}
        <dd class="mt-2 flex items-center text-sm {% if metric.change >= 0 %}text-green-400{% else %}text-red-400{% endif %}">
            {% if metric.change >= 0 %}
            <svg class="size-4 mr-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd"/></svg>
            {% else %}
            <svg class="size-4 mr-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd"/></svg>
            {% endif %}
            {{ metric.change | abs }}% {{ metric.trend_label }}
        </dd>
        {% endif %}
    </div>

    {% elif metric.metric_type == 'partition' %}
    <div class="overflow-hidden rounded-lg bg-gray-800/75 px-4 py-5 inset-ring inset-ring-white/10 sm:p-6">
        <dt class="truncate text-sm font-medium text-gray-400 mb-3">{{ metric.name }}</dt>
        {% for seg in metric.segments %}
        <dd class="flex items-center justify-between text-sm mt-2">
            <span class="text-gray-400">{{ seg.label }}</span>
            <span class="text-white font-medium">{{ seg.value }} <span class="text-gray-500 font-normal">({{ seg.percentage }}%)</span></span>
        </dd>
        {% endfor %}
    </div>

    {% elif metric.metric_type == 'trend' %}
    <div class="overflow-hidden rounded-lg bg-gray-800/75 px-4 py-5 inset-ring inset-ring-white/10 sm:col-span-2 sm:p-6">
        <dt class="truncate text-sm font-medium text-gray-400">{{ metric.name }}</dt>
        <dd class="mt-3 h-16">
            <svg viewBox="0 0 {{ metric.values | length * 30 }} 60" preserveAspectRatio="none" class="w-full h-full" aria-hidden="true">
            {% if metric.values %}
            {% set max_val = metric.values | max %}
            {% set min_val = metric.values | min %}
            {% set range = (max_val - min_val) or 1 %}
            {% set pts = [] %}
            {% for v in metric.values %}
                {% set x = loop.index0 * 30 + 15 %}
                {% set y = 55 - ((v - min_val) / range * 50) %}
                {% if pts.append(x | string + ',' + y | string) %}{% endif %}
            {% endfor %}
            <polyline points="{{ pts | join(' ') }}" fill="none" stroke="#6366f1" stroke-width="2"/>
            {% endif %}
            </svg>
        </dd>
    </div>
    {% endif %}
    {% endfor %}
</dl>
{% else %}
<div class="text-center py-16">
    <svg class="mx-auto size-12 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
    </svg>
    <h3 class="mt-2 text-sm font-semibold text-white">No metrics configured</h3>
    <p class="mt-1 text-sm text-gray-400">Call <code class="text-indigo-400">Admin.dashboard(…)</code> with metric instances to display data here.</p>
</div>
{% endif %}

{% if resources %}
<div class="mt-4">
    <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">Resources</h2>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {% for res_cls in resources %}
        <a href="{{ prefix }}/resources/{{ res_cls.slug() }}"
           class="group block rounded-lg bg-gray-800/50 px-5 py-4 inset-ring inset-ring-white/10 hover:bg-gray-800 hover:inset-ring-white/20 transition">
            <p class="text-sm font-semibold text-white group-hover:text-indigo-400 transition-colors">{{ res_cls.get_label_plural() }}</p>
            <p class="mt-1 text-xs text-gray-500">Manage {{ res_cls.get_label_plural() | lower }}</p>
        </a>
        {% endfor %}
    </div>
</div>
{% endif %}
{% endblock %}