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

{% block title %}Dashboard - {{ site_name }}{% endblock %}

{% block breadcrumb %}
<nav class="admin-breadcrumb" aria-label="Breadcrumb">
    <span class="breadcrumb-current">Dashboard</span>
</nav>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="page-header-content">
        <h1>Admin Dashboard</h1>
        <p class="page-subtitle text-muted">Manage your application data</p>
    </div>
</div>

{% if apps %}
    <div class="dashboard-grid">
        {% for app_label, models in apps.items() %}
        <div class="dashboard-card">
            <div class="dashboard-card-header">
                <svg class="dashboard-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M3 3h18v18H3z"/>
                    <path d="M3 9h18M9 21V9"/>
                </svg>
                <h2>{{ app_label }}</h2>
                <span class="badge badge-secondary">{{ models|length }} model{% if models|length != 1 %}s{% endif %}</span>
            </div>
            <div class="dashboard-card-body">
                <ul class="model-list">
                    {% for model in models %}
                    <li class="model-item">
                        <a href="{{ request.url_for('admin:model_list', app_label=app_label, model_name=model.__name__|lower) }}" class="model-link">
                            <svg class="model-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                                <path d="M3 9h18M9 21V9"/>
                            </svg>
                            <span class="model-name">{{ model.__name__ }}</span>
                            <svg class="model-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="m9 18 6-6-6-6"/>
                            </svg>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% endfor %}
    </div>
{% else %}
    <div class="dashboard-card">
        <div class="empty-state">
            <div class="empty-state-icon">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M21 8v13H3V8"/>
                    <path d="M1 3h22v5H1z"/>
                    <path d="M10 12h4"/>
                </svg>
            </div>
            <h3>No models registered</h3>
            <p class="text-muted">Register models with the admin to get started.</p>
            <div class="code-block">
                <pre><code>from aksara.contrib.admin import site
from myapp.models import MyModel

site.register(MyModel)</code></pre>
            </div>
        </div>
    </div>
{% endif %}
{% endblock %}