{% extends "base.html" %}
{% block content %}
<div class="max-w-6xl mx-auto">
    <div class="bg-white rounded-lg shadow-md p-6">
        <!-- Header -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
            <div>
                <h1 class="text-2xl font-bold text-irish-green">{{ display_name }}</h1>
                <p class="text-gray-600">Manage your {{ display_name.lower() }} data</p>
            </div>
            <div class="mt-4 md:mt-0">
                <a href="/admin/{{ model_name }}/new" class="bg-irish-green hover:bg-opacity-90 text-white font-medium py-2 px-4 rounded-md transition">
                    <i class="fas fa-plus mr-1"></i> Create New
                </a>
            </div>
        </div>
        
        <!-- Records Table -->
        <div class="overflow-x-auto">
            <table class="w-full border-collapse">
                <thead>
                    <tr class="bg-irish-green text-white">
                        <th class="p-3 text-left">ID</th>
                        {% for column in columns %}
                            {% if column != 'id' %}
                                <th class="p-3 text-left">{{ column|replace('_', ' ')|title }}</th>
                            {% endif %}
                        {% endfor %}
                        <th class="p-3 text-center">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for record in records %}
                        <tr class="hover:bg-gray-50">
                            <td class="p-3 font-medium">{{ record.id }}</td>
                            {% for column in columns %}
                                {% if column != 'id' %}
                                    <td class="p-3">
                                        {% if columns_info[column].foreign_key %}
                                            <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs">FK: {{ record[column] }}</span>
                                        {% elif record[column] is none %}
                                            <span class="text-gray-400 italic">NULL</span>
                                        {% elif columns_info[column].type.startswith('BOOLEAN') %}
                                            {% if record[column] %}
                                                <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Yes</span>
                                            {% else %}
                                                <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs">No</span>
                                            {% endif %}
                                        {% else %}
                                            {{ record[column]|string|truncate(50) }}
                                        {% endif %}
                                    </td>
                                {% endif %}
                            {% endfor %}
                            <td class="p-3 text-center">
                                <div class="flex justify-center space-x-2">
                                    <a href="/admin/{{ model_name }}/{{ record.id }}" class="text-irish-green hover:text-opacity-70" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="/admin/{{ model_name }}/{{ record.id }}/delete" class="text-guinness-red hover:text-opacity-70" title="Delete" 
                                       onclick="return confirm('Are you sure you want to delete this record?');">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    
                    {% if not records %}
                        <tr>
                            <td colspan="{{ columns|length + 1 }}" class="p-4 text-center text-gray-500">
                                No records found
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        {% if total_pages > 1 %}
            <div class="mt-6 flex justify-between items-center">
                <div class="text-gray-600 text-sm">
                    Showing {{ (page - 1) * per_page + 1 }}-{{ [page * per_page, total_records]|min }} of {{ total_records }} records
                </div>
                <div class="flex space-x-1">
                    {% if page > 1 %}
                        <a href="?page={{ page - 1 }}&per_page={{ per_page }}" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded">
                            &laquo; Prev
                        </a>
                    {% endif %}
                    
                    {% for p in range(1, total_pages + 1) %}
                        {% if p == page %}
                            <span class="px-3 py-1 bg-irish-green text-white rounded">{{ p }}</span>
                        {% elif p <= 3 or p >= total_pages - 2 or (p >= page - 1 and p <= page + 1) %}
                            <a href="?page={{ p }}&per_page={{ per_page }}" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded">
                                {{ p }}
                            </a>
                        {% elif p == 4 and page > 5 or p == total_pages - 3 and page < total_pages - 4 %}
                            <span class="px-3 py-1">...</span>
                        {% endif %}
                    {% endfor %}
                    
                    {% if page < total_pages %}
                        <a href="?page={{ page + 1 }}&per_page={{ per_page }}" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded">
                            Next &raquo;
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
    
    <!-- Back to Admin -->
    <div class="mt-6 text-center">
        <a href="/admin/" class="text-irish-green hover:underline">
            <i class="fas fa-arrow-left mr-1"></i> Back to Admin Dashboard
        </a>
    </div>
</div>
{% endblock %}