{% extends "djust_admin/base.html" %}

{% block content %}
<div class="max-w-7xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-900 mb-8">{{ title }}</h1>

    <!-- Widget grid (from plugins) -->
    {% if has_widgets %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        {% for widget in widgets %}
        <div class="bg-white rounded-lg shadow overflow-hidden
                    {% if widget.size == 'lg' %}md:col-span-2 lg:col-span-2
                    {% elif widget.size == 'sm' %}
                    {% endif %}">
            {% if widget.label %}
            <div class="px-4 py-3 border-b border-gray-200">
                <h3 class="text-sm font-medium text-gray-900">{{ widget.label }}</h3>
            </div>
            {% endif %}
            <div class="p-4">
                {{ widget.html|safe }}
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Model listing (grouped by app) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for app in app_list %}
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="bg-gray-800 px-4 py-3">
                <h2 class="text-lg font-medium text-white">{{ app.name }}</h2>
            </div>
            <ul class="divide-y divide-gray-200">
                {% for model in app.models %}
                <li class="px-4 py-3 hover:bg-gray-50">
                    <div class="flex items-center justify-between">
                        <a href="{{ model.admin_url }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">
                            {{ model.name }}
                        </a>
                        <a href="{{ model.add_url }}"
                           class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200">
                            + Add
                        </a>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% empty %}
        <div class="col-span-full text-center py-12">
            <p class="text-gray-500">No models registered yet.</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}