{% extends "admin/base.html" %}
{% load i18n static log %}

{% block content_title %}
    {{ title }}
{% endblock %}

{% block content %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {% if app_list %}
        {% for app in app_list %}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-md transition-shadow">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-750">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                    {{ app.name }}
                </h2>
            </div>
            
            <div class="p-4">
                <ul class="space-y-2">
                    {% for model in app.models %}
                    <li>
                        <a href="{{ model.admin_url }}" class="group flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400">
                                {{ model.name }}
                            </span>
                            <svg class="w-5 h-5 text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </a>
                        
                        {% if model.add_url or model.change_url %}
                        <div class="ml-3 mt-1 flex items-center space-x-4 text-xs">
                            {% if model.add_url %}
                            <a href="{{ model.add_url }}" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                                + {% trans 'Add' %}
                            </a>
                            {% endif %}
                            
                            {% if model.change_url %}
                            <a href="{{ model.change_url }}" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                                {% trans 'Change' %}
                            </a>
                            {% endif %}
                        </div>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% endfor %}
    {% else %}
        <div class="col-span-full">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-8 text-center">
                <p class="text-gray-600 dark:text-gray-400">
                    {% trans "You don't have permission to view or edit anything." %}
                </p>
            </div>
        </div>
    {% endif %}
</div>

{% if app_list %}
<div class="mt-8 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 p-6">
    <div class="flex items-start space-x-3">
        <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <div class="flex-1">
            <h3 class="text-sm font-semibold text-blue-900 dark:text-blue-200 mb-2">
                {% trans 'Recent actions' %}
            </h3>
            {% get_admin_log 10 as admin_log for_user user %}
            {% if admin_log %}
                <ul class="text-sm text-blue-800 dark:text-blue-300 space-y-2">
                    {% for entry in admin_log %}
                    <li class="flex items-start space-x-2">
                        {% if entry.is_addition %}
                        <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"/>
                            </svg>
                        </span>
                        {% elif entry.is_change %}
                        <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/>
                            </svg>
                        </span>
                        {% elif entry.is_deletion %}
                        <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                            </svg>
                        </span>
                        {% endif %}
                        <span>
                            {% if entry.is_deletion or not entry.get_admin_url %}
                                {{ entry.object_repr }}
                            {% else %}
                                <a href="{{ entry.get_admin_url }}" class="text-blue-600 dark:text-blue-400 hover:underline">{{ entry.object_repr }}</a>
                            {% endif %}
                            {% if entry.content_type %}
                                <span class="text-blue-600/70 dark:text-blue-300/70">({{ entry.content_type }})</span>
                            {% endif %}
                        </span>
                    </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class="text-sm text-blue-800 dark:text-blue-300">
                    {% trans 'None available' %}
                </p>
            {% endif %}
        </div>
    </div>
</div>
{% endif %}
{% endblock %}