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

{% block title %}{{ model_admin.name_plural }} - {{ settings.ADMIN_SITE_TITLE }}{% endblock %}

{% block body %}
<div class="flex h-screen bg-gray-100" x-data="{ sidebarOpen: true }">
    <!-- Sidebar (same as dashboard) -->
    <aside class="fixed inset-y-0 left-0 z-50 w-64 bg-gray-900 transform transition-transform duration-300 lg:translate-x-0" :class="{ '-translate-x-full': !sidebarOpen }">
        <div class="flex h-16 items-center justify-between px-4 bg-gray-800">
            <a href="/admin/" class="text-xl font-bold text-white">
                {{ settings.ADMIN_SITE_HEADER }}
            </a>
            <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden text-gray-400 hover:text-white">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <nav class="mt-4 px-2">
            {% for item in menu_items %}
            <a href="{{ item.url }}"
               class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white rounded-lg mb-1
                      {% if request.url.path.startswith(item.url) and item.url != '/admin/' %}bg-gray-800 text-white{% endif %}
                      {% if request.url.path == item.url %}bg-gray-800 text-white{% endif %}">
                <i class="fas fa-{{ item.icon }} w-5 mr-3"></i>
                {{ item.name }}
            </a>
            {% endfor %}
        </nav>

        <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-800">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center">
                    <i class="fas fa-user text-gray-300"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-white">{{ user.display_name }}</p>
                    <a href="/auth/logout" class="text-xs text-gray-400 hover:text-white">Logout</a>
                </div>
            </div>
        </div>
    </aside>

    <!-- Main content -->
    <div class="flex-1 lg:ml-64">
        <header class="bg-white shadow-sm h-16 flex items-center justify-between px-4">
            <div class="flex items-center">
                <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden text-gray-500 hover:text-gray-700 mr-4">
                    <i class="fas fa-bars"></i>
                </button>
                <h1 class="text-xl font-semibold text-gray-900">{{ model_admin.name_plural }}</h1>
            </div>
            <a href="create/" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
                <i class="fas fa-plus mr-2"></i>
                Add {{ model_admin.name }}
            </a>
        </header>

        <main class="p-6">
            <!-- Search and filters -->
            {% if model_admin.search_fields %}
            <div class="mb-6">
                <form method="get" class="flex gap-4">
                    <div class="flex-1">
                        <input type="text"
                               name="search"
                               value="{{ search }}"
                               placeholder="Search {{ model_admin.name_plural }}..."
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
                    </div>
                    <button type="submit" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
                        <i class="fas fa-search"></i>
                    </button>
                    {% if search %}
                    <a href="." class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">
                        Clear
                    </a>
                    {% endif %}
                </form>
            </div>
            {% endif %}

            <!-- Data table -->
            <div class="bg-white rounded-lg shadow overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                {% for column in model_admin.list_display %}
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    {% if column == "__str__" %}
                                        {{ model_admin.name }}
                                    {% else %}
                                        {{ column|replace("_", " ")|title }}
                                    {% endif %}
                                </th>
                                {% endfor %}
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for item in items %}
                            <tr class="hover:bg-gray-50">
                                {% for column in model_admin.list_display %}
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {% if column == "__str__" %}
                                        <a href="{{ item.id }}/" class="text-indigo-600 hover:text-indigo-900">
                                            {{ item }}
                                        </a>
                                    {% else %}
                                        {% set value = getattr(item, column, None) %}
                                        {% if value is not None %}
                                            {% if value is boolean %}
                                                {% if value %}
                                                    <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">Yes</span>
                                                {% else %}
                                                    <span class="px-2 py-1 text-xs font-medium text-red-700 bg-red-100 rounded-full">No</span>
                                                {% endif %}
                                            {% elif value is string and value|length > 50 %}
                                                {{ value[:50] }}...
                                            {% else %}
                                                {{ value }}
                                            {% endif %}
                                        {% else %}
                                            <span class="text-gray-400">-</span>
                                        {% endif %}
                                    {% endif %}
                                </td>
                                {% endfor %}
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="{{ item.id }}/" class="text-indigo-600 hover:text-indigo-900 mr-4">
                                        <i class="fas fa-edit"></i> Edit
                                    </a>
                                    <button hx-delete="{{ item.id }}/"
                                            hx-confirm="Are you sure you want to delete this item?"
                                            class="text-red-600 hover:text-red-900">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="{{ model_admin.list_display|length + 1 }}" class="px-6 py-12 text-center text-gray-500">
                                    <div class="flex flex-col items-center">
                                        <i class="fas fa-inbox text-4xl text-gray-300 mb-4"></i>
                                        <p>No {{ model_admin.name_plural|lower }} found</p>
                                        <a href="create/" class="mt-4 text-indigo-600 hover:text-indigo-900">
                                            <i class="fas fa-plus mr-1"></i> Add your first {{ model_admin.name|lower }}
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if total_pages > 1 %}
                <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                Showing page {{ page }} of {{ total_pages }}
                                <span class="text-gray-500">({{ total }} total)</span>
                            </p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                                {% if page > 1 %}
                                <a href="?page={{ page - 1 }}{% if search %}&search={{ search }}{% endif %}"
                                   class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                                {% endif %}

                                {% for p in range(1, total_pages + 1) %}
                                    {% if p == page %}
                                    <span class="relative inline-flex items-center px-4 py-2 border border-indigo-500 bg-indigo-50 text-sm font-medium text-indigo-600">
                                        {{ p }}
                                    </span>
                                    {% else %}
                                    <a href="?page={{ p }}{% if search %}&search={{ search }}{% endif %}"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        {{ p }}
                                    </a>
                                    {% endif %}
                                {% endfor %}

                                {% if page < total_pages %}
                                <a href="?page={{ page + 1 }}{% if search %}&search={{ search }}{% endif %}"
                                   class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                                {% endif %}
                            </nav>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </main>
    </div>
</div>
{% endblock %}