{% extends base_template %}
{% import "components/buttons.html" as buttons %}
{% import "components/inputs.html" as inputs %}

{% block title %}{{ model_config.name }} List{% endblock %}

{% block breadcrumb %}
<nav class="flex items-center space-x-2 text-sm font-mono text-emerald-600">
    <a href="{{ url_for('admin:index') }}" class="hover:text-emerald-400 transition-colors">SYSTEM</a>
    <span class="text-emerald-800">/</span>
    <span class="text-emerald-400">{{ model_config.name }}</span>
</nav>
{% endblock %}

{% block content %}
<div class="space-y-6" data-create-url="{% if not model_config.readonly %}{{ url_for('admin:create', model=model_config.name) }}{% endif %}">
    {# Header with Terminal Aesthetic #}
    <div class="matrix-panel-strong relative overflow-hidden rounded-3xl p-6 lg:p-7">
        <div class="absolute top-0 right-0 w-40 h-40 bg-emerald-500/5 rounded-full blur-3xl"></div>
        <div class="relative z-10 flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <div class="flex items-center space-x-3 mb-2">
                    <div class="h-px w-8 bg-emerald-500"></div>
                    <span class="text-xs font-mono text-emerald-600 uppercase tracking-[0.35em]">DATA MODULE</span>
                </div>
                <h1 class="matrix-title text-4xl font-black text-white font-mono mb-2">{{ model_config.name }}</h1>
                <p class="text-emerald-100/80 text-sm">Manage your {{ model_config.name | lower }} records with fast search, scoped actions, and export-ready filters.</p>
                <div class="mt-4 flex flex-wrap items-center gap-2">
                    <span class="matrix-kbd font-mono">/</span>
                    <span class="text-xs font-mono uppercase tracking-[0.25em] text-emerald-600">Jump to search</span>
                    {% if not model_config.readonly %}
                    <span class="matrix-kbd font-mono">N</span>
                    <span class="text-xs font-mono uppercase tracking-[0.25em] text-emerald-600">Create new record</span>
                    {% endif %}
                </div>
            </div>
            {% if not model_config.readonly %}
            <div class="flex items-center space-x-2">
                <a href="#"
                    onclick='window.location.href = "{{ url_for("admin:export_csv", model=model_config.name) }}" + window.location.search; return false;'
                    class="group relative overflow-hidden flex items-center space-x-2 rounded-lg bg-blue-500/10 border border-blue-500/30 px-4 py-2 hover:bg-blue-500/20 hover:border-blue-400/50 transition-all duration-300"
                    title="Export as CSV">
                    <svg class="h-4 w-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                    </svg>
                    <span class="font-mono text-sm font-semibold text-blue-100">CSV</span>
                </a>
                <a href="#"
                    onclick='window.location.href = "{{ url_for("admin:export_xlsx", model=model_config.name) }}" + window.location.search; return false;'
                    class="group relative overflow-hidden flex items-center space-x-2 rounded-lg bg-emerald-500/10 border border-emerald-500/30 px-4 py-2 hover:bg-emerald-500/20 hover:border-emerald-400/50 transition-all duration-300"
                    title="Export as Excel (.xlsx)">
                    <svg class="h-4 w-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <span class="font-mono text-sm font-semibold text-emerald-100">XLSX</span>
                </a>

                <a href="{{ url_for('admin:create', model=model_config.name) }}"
                    class="group relative overflow-hidden flex items-center space-x-2 rounded-lg bg-emerald-500/10 border border-emerald-500/30 px-4 py-2 hover:bg-emerald-500/20 hover:border-emerald-400/50 transition-all duration-300">
                    <div
                        class="absolute inset-0 bg-gradient-to-r from-emerald-500/0 via-emerald-500/10 to-emerald-500/0 opacity-0 group-hover:opacity-100 transition-opacity">
                    </div>
                    <svg class="h-5 w-5 text-emerald-400 relative z-10" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                    </svg>
                    <span class="font-mono text-sm font-semibold text-emerald-100 relative z-10">CREATE NEW</span>
                </a>
            </div>
            {% endif %}
        </div>
    </div>

    {% if rows and bulk_actions %}
    <form method="POST" action="{{ url_for('admin:run_action', model=model_config.name, action_name='bulk_delete') }}"
        id="bulk-actions-form" class="matrix-panel rounded-2xl p-4">
        <div class="flex flex-wrap items-center gap-3">
            <span class="text-xs font-mono uppercase tracking-widest text-emerald-600">Bulk actions</span>
            <select id="bulk-action-select"
                class="h-10 rounded-lg bg-black border border-emerald-500/20 px-3 text-sm font-mono text-emerald-100">
                {% for action_name in bulk_actions %}
                <option value="{{ action_name }}">{{ action_name.replace('_', ' ').title() }}</option>
                {% endfor %}
            </select>
            <button type="submit"
                class="rounded-lg bg-emerald-500/10 border border-emerald-500/30 px-4 py-2 text-sm font-mono text-emerald-100 hover:bg-emerald-500/20 transition-all">
                Run Selected
            </button>
            <span class="text-xs font-mono text-emerald-700">Select rows below, then run an action.</span>
        </div>
    </form>
    {% endif %}

    {# Search Bar - Matrix Style #}
    {% if model_config.searchable_fields or filter_definitions %}
    <div class="matrix-panel relative overflow-hidden rounded-2xl p-4"
        x-data="{ showFilters: false }">
        <div class="absolute bottom-0 left-0 w-40 h-40 bg-lime-500/5 rounded-full blur-3xl"></div>
        <div class="relative z-10 flex items-center space-x-3">
            <div
                class="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/10 border border-emerald-500/30">
                <svg class="h-5 w-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
            </div>
            <input id="search-input" type="search" name="search" placeholder="Search records..." value="{{ search_query or '' }}"
                class="flex-1 h-10 bg-black border border-emerald-500/20 rounded-lg px-4 text-sm font-mono text-emerald-100 placeholder:text-emerald-800 focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all"
                hx-get="{{ url_for('admin:list', model=model_config.name) }}"
                hx-trigger="input changed delay:500ms, search" hx-target="#data-table" hx-swap="innerHTML"
                hx-indicator=".search-loading" />

            {% if filter_definitions %}
            <button @click="showFilters = !showFilters"
                class="h-10 px-4 rounded-lg bg-emerald-950/30 border border-emerald-500/30 flex items-center space-x-2 hover:bg-emerald-900/50 transition-colors">
                <svg class="h-4 w-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                </svg>
                <span class="text-xs font-mono font-bold text-emerald-400">FILTERS</span>
                {% if active_filters %}
                <span
                    class="flex h-4 w-4 items-center justify-center rounded-full bg-emerald-500 text-[10px] text-black font-bold">{{
                    active_filters|length }}</span>
                {% endif %}
            </button>
            {% endif %}

            <div class="search-loading htmx-indicator">
                <div class="flex items-center space-x-2 text-emerald-500 text-xs font-mono">
                    <div class="h-2 w-2 rounded-full bg-emerald-500 animate-ping"></div>
                    <span>SEARCHING...</span>
                </div>
            </div>
        </div>

        {# Filter Sidebar / Drawer #}
        {% if filter_definitions %}
        <div x-show="showFilters" style="display: none;">
            <div class="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm" @click="showFilters = false"
                x-transition.opacity></div>
            <div class="fixed right-0 top-0 z-50 h-full w-80 bg-black border-l border-emerald-500/30 shadow-2xl p-6 overflow-y-auto"
                x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full"
                x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">

                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-mono font-bold text-emerald-400">ADVANCED FILTERS</h3>
                    <button @click="showFilters = false" class="text-emerald-700 hover:text-emerald-400">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <form method="GET" action="{{ url_for('admin:list', model=model_config.name) }}" class="space-y-6">
                    {% for field in filter_definitions %}
                    <div class="space-y-2">
                        <span class="text-xs font-mono font-bold text-emerald-600 uppercase">{{ field.title }}</span>

                        {% if field.field_type.value == 'relationship' %}
                        {# Use Smart Select for Filtering #}
                        {{ inputs.relationship_input(field, active_filters.get(field.name)) }}

                        {% elif field.field_type.value == 'boolean' %}
                        <select name="{{ field.name }}"
                            class="w-full h-9 bg-black border border-emerald-900 rounded px-2 text-emerald-400 text-sm focus:border-emerald-500 focus:outline-none">
                            <option value="">Any</option>
                            <option value="true" {% if active_filters.get(field.name)=='true' %}selected{% endif %}>Yes
                            </option>
                            <option value="false" {% if active_filters.get(field.name)=='false' %}selected{% endif %}>No
                            </option>
                        </select>

                        {% elif field.field_type.value == 'datetime' or field.field_type.value == 'date' %}
                        <div class="grid grid-cols-2 gap-2">
                            <input type="date" name="{{ field.name }}__gte"
                                value="{{ active_filters.get(field.name + '__gte', '') }}"
                                class="w-full h-9 bg-black border border-emerald-900 rounded px-2 text-emerald-400 text-xs placeholder:text-emerald-900 focus:border-emerald-500 focus:outline-none"
                                placeholder="From">
                            <input type="date" name="{{ field.name }}__lte"
                                value="{{ active_filters.get(field.name + '__lte', '') }}"
                                class="w-full h-9 bg-black border border-emerald-900 rounded px-2 text-emerald-400 text-xs placeholder:text-emerald-900 focus:border-emerald-500 focus:outline-none"
                                placeholder="To">
                        </div>

                        {% else %}
                        {# Default Text Filter (Contains) #}
                        <input type="text" name="{{ field.name }}__contains"
                            value="{{ active_filters.get(field.name + '__contains', '') }}"
                            class="w-full h-9 bg-black border border-emerald-900 rounded px-3 text-emerald-400 text-sm placeholder:text-emerald-900/50 focus:border-emerald-500 focus:outline-none"
                            placeholder="Contains...">
                        {% endif %}
                    </div>
                    {% endfor %}

                    <div class="pt-4 flex items-center space-x-2">
                        <button type="submit"
                            class="flex-1 bg-emerald-600 hover:bg-emerald-500 text-black font-mono font-bold py-2 rounded text-sm transition-colors">APPLY
                            FILTERS</button>
                        <a href="{{ url_for('admin:list', model=model_config.name) }}"
                            class="px-3 py-2 bg-emerald-900/30 hover:bg-emerald-900/50 text-emerald-500 rounded text-sm font-mono border border-emerald-900">RESET</a>
                    </div>
                </form>
            </div>
        </div>
        {% endif %}
    </div>
    {% endif %}

    {# Data Table - Terminal Matrix Style #}
    <div class="matrix-panel relative overflow-hidden rounded-3xl">
        <div class="absolute top-0 right-0 w-96 h-96 bg-emerald-500/5 rounded-full blur-3xl"></div>
        <div id="data-table" class="relative z-10">
            {# Table Header #}
            <div class="border-b border-emerald-500/20 p-4">
                <div class="flex items-center justify-between">
                    <h3 class="text-sm font-mono font-bold text-emerald-400 uppercase tracking-wider">RECORDS DATABASE
                    </h3>
                    <span class="text-xs font-mono text-emerald-600">{{ rows|length }} of {{ total }}</span>
                </div>
            </div>

            {# Table Content #}
            {% if rows %}
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-emerald-500/20 bg-emerald-950/20">
                            <th
                                class="px-4 py-3 text-left text-xs font-mono font-bold text-emerald-500 uppercase tracking-widest">
                                <input type="checkbox" id="select-all"
                                    class="rounded border-emerald-500/30 bg-black text-emerald-400">
                            </th>
                            {% for col in columns %}
                            <th
                                class="px-4 py-3 text-left text-xs font-mono font-bold text-emerald-500 uppercase tracking-widest">
                                {{ col.label }}
                            </th>
                            {% endfor %}
                            <th
                                class="px-4 py-3 text-right text-xs font-mono font-bold text-emerald-500 uppercase tracking-widest">
                                ACTIONS
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in rows %}
                        <tr class="group border-b border-emerald-500/10 hover:bg-emerald-950/30 transition-all duration-200"
                            data-row-id="{{ row[id_field] }}">
                            <td class="px-4 py-3">
                                <input type="checkbox" name="selected_ids" form="bulk-actions-form" value="{{ row[id_field] }}"
                                    class="row-checkbox rounded border-emerald-500/30 bg-black text-emerald-400">
                            </td>
                            {% for col in columns %}
                            <td
                                class="px-4 py-3 text-sm font-mono text-emerald-100 group-hover:text-white transition-colors">
                                {% if row[col.field] %}{{ row[col.field]|string|truncate(50) }}{% else %}-{% endif %}
                            </td>
                            {% endfor %}
                            <td class="px-4 py-3">
                                <div class="flex items-center justify-end space-x-2">
                                    {# Edit Button #}
                                    {% if not model_config.readonly %}
                                    <a href="{{ url_for('admin:edit', model=model_config.name, id=row[id_field]) }}"
                                        class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-500/10 border border-blue-500/30 hover:bg-blue-500/20 hover:border-blue-400/50 transition-all group/btn">
                                        <svg class="h-4 w-4 text-blue-400 group-hover/btn:text-blue-300 transition-colors"
                                            fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                        </svg>
                                    </a>

                                    {# Delete Button #}
                                    <button type="button"
                                        data-delete-url="{{ url_for('admin:delete', model=model_config.name, id=row[id_field]) }}?token={{ delete_tokens[row[id_field]|string] }}"
                                        onclick="confirmDelete('{{ model_config.name }}', '{{ row[id_field] }}', this)"
                                        class="flex h-8 w-8 items-center justify-center rounded-lg bg-red-500/10 border border-red-500/30 hover:bg-red-500/20 hover:border-red-400/50 transition-all group/btn">
                                        <svg class="h-4 w-4 text-red-400 group-hover/btn:text-red-300 transition-colors"
                                            fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            {# Empty State #}
            <div class="flex flex-col items-center justify-center py-16 px-4">
                <div
                    class="flex h-16 w-16 items-center justify-center rounded-full bg-emerald-500/10 border border-emerald-500/30 mb-4">
                    <svg class="h-8 w-8 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                    </svg>
                </div>
                <h3 class="text-lg font-mono font-bold text-emerald-400 mb-2">NO RECORDS FOUND</h3>
                <p class="text-sm font-mono text-emerald-600 mb-6">Database is empty. Create your first record.</p>
                {% if not model_config.readonly %}
                <a href="{{ url_for('admin:create', model=model_config.name) }}"
                    class="flex items-center space-x-2 rounded-lg bg-emerald-500/10 border border-emerald-500/30 px-4 py-2 hover:bg-emerald-500/20 transition-all">
                    <svg class="h-5 w-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    <span class="font-mono text-sm font-semibold text-emerald-100">CREATE FIRST RECORD</span>
                </a>
                {% endif %}
            </div>
            {% endif %}

            {# Pagination #}
            {% if total_pages > 1 %}
            <div class="border-t border-emerald-500/20 p-4">
                <div class="flex items-center justify-between">
                    <div class="text-xs font-mono text-emerald-600">
                        PAGE {{ page }} OF {{ total_pages }}
                    </div>
                    <div class="flex items-center space-x-2">
                        {% if page > 1 %}
                        <a href="{{ url_for('admin:list', model=model_config.name, page=page-1) }}"
                            class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500/10 border border-emerald-500/30 hover:bg-emerald-500/20 hover:border-emerald-400/50 transition-all">
                            <svg class="h-4 w-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 19l-7-7 7-7" />
                            </svg>
                        </a>
                        {% else %}
                        <div
                            class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-950/30 border border-emerald-500/10 opacity-50 cursor-not-allowed">
                            <svg class="h-4 w-4 text-emerald-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 19l-7-7 7-7" />
                            </svg>
                        </div>
                        {% endif %}

                        {% for p in range(1, total_pages + 1) %}
                        {% if p == page %}
                        <div
                            class="flex h-8 min-w-8 items-center justify-center rounded-lg bg-emerald-500/20 border border-emerald-400/50 px-3">
                            <span class="text-sm font-mono font-bold text-emerald-400">{{ p }}</span>
                        </div>
                        {% elif (p >= page - 2 and p <= page + 2) or p==1 or p==total_pages %} <a
                            href="{{ url_for('admin:list', model=model_config.name, page=p) }}"
                            class="flex h-8 min-w-8 items-center justify-center rounded-lg bg-emerald-950/30 border border-emerald-500/20 hover:bg-emerald-500/10 hover:border-emerald-500/30 transition-all px-3">
                            <span class="text-sm font-mono text-emerald-300">{{ p }}</span>
                            </a>
                            {% elif (p == page - 3 or p == page + 3) %}
                            <span class="text-emerald-800">...</span>
                            {% endif %}
                            {% endfor %}

                            {% if page < total_pages %} <a
                                href="{{ url_for('admin:list', model=model_config.name, page=page+1) }}"
                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500/10 border border-emerald-500/30 hover:bg-emerald-500/20 hover:border-emerald-400/50 transition-all">
                                <svg class="h-4 w-4 text-emerald-400" 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>
                                {% else %}
                                <div
                                    class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-950/30 border border-emerald-500/10 opacity-50 cursor-not-allowed">
                                    <svg class="h-4 w-4 text-emerald-800" 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>
                                </div>
                                {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

{# Delete Confirmation Modal #}
<div id="delete-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4"
    style="background: rgba(0, 0, 0, 0.8);">
    <div
        class="relative overflow-hidden rounded-xl bg-black border border-red-500/30 p-6 max-w-md w-full animate-modal-in">
        <div class="absolute top-0 right-0 w-40 h-40 bg-red-500/10 rounded-full blur-3xl"></div>
        <div class="relative z-10">
            <div class="flex items-center space-x-3 mb-4">
                <div
                    class="flex h-12 w-12 items-center justify-center rounded-full bg-red-500/20 border border-red-500/30">
                    <svg class="h-6 w-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                </div>
                <div>
                    <h3 class="text-lg font-mono font-bold text-white">CONFIRM DELETE</h3>
                    <p class="text-sm font-mono text-red-400">This action cannot be undone</p>
                </div>
            </div>
            <p class="text-sm font-mono text-emerald-300 mb-6">
                Are you sure you want to delete this record?
            </p>
            <div class="flex items-center justify-end space-x-3">
                <button onclick="closeDeleteModal()"
                    class="px-4 py-2 rounded-lg bg-emerald-950/30 border border-emerald-500/20 text-emerald-300 font-mono text-sm hover:bg-emerald-950/50 transition-all">
                    CANCEL
                </button>
                <button id="confirm-delete-btn"
                    class="px-4 py-2 rounded-lg bg-red-500/20 border border-red-500/30 text-red-100 font-mono text-sm font-bold hover:bg-red-500/30 hover:border-red-400/50 transition-all">
                    DELETE
                </button>
            </div>
        </div>
    </div>
</div>

{# Toast Notification Container #}
<div id="toast-container" class="fixed top-4 right-4 z-50 space-y-3"></div>

<style>
    @keyframes modal-in {
        from {
            opacity: 0;
            transform: scale(0.95) translateY(-10px);
        }

        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .animate-modal-in {
        animation: modal-in 0.2s ease-out;
    }

    @keyframes toast-in {
        from {
            opacity: 0;
            transform: translateX(100%);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .animate-toast-in {
        animation: toast-in 0.3s ease-out;
    }
</style>

<script nonce="{{ csp_nonce }}">
    // Delete Confirmation
    let deleteModelName = '';
    let deleteRecordId = null;
    let deleteButton = null;

    function confirmDelete(modelName, recordId, btn) {
        deleteModelName = modelName;
        deleteRecordId = recordId;
        deleteButton = btn;
        document.getElementById('delete-modal').classList.remove('hidden');
    }

    function closeDeleteModal() {
        document.getElementById('delete-modal').classList.add('hidden');
        deleteModelName = '';
        deleteRecordId = null;
        deleteButton = null;
    }

    document.getElementById('confirm-delete-btn').addEventListener('click', async function () {
        if (!deleteModelName || !deleteRecordId) return;

        const btn = this;
        btn.disabled = true;
        btn.innerHTML = '<div class="h-4 w-4 border-2 border-red-400 border-t-transparent rounded-full animate-spin"></div>';

        try {
            const response = await fetch(deleteButton.dataset.deleteUrl, {
                method: 'DELETE',
            });

            if (response.ok) {
                // Show success toast
                showToast('Record deleted successfully', 'success');

                // Remove row with fade animation
                const row = deleteButton.closest('tr');
                row.style.transition = 'opacity 0.3s ease-out';
                row.style.opacity = '0';
                setTimeout(() => row.remove(), 300);

                closeDeleteModal();
            } else {
                showToast('Failed to delete record', 'error');
                btn.disabled = false;
                btn.textContent = 'DELETE';
            }
        } catch (error) {
            showToast('Network error occurred', 'error');
            btn.disabled = false;
            btn.textContent = 'DELETE';
        }
    });

    // Close modal on escape
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            closeDeleteModal();
        }
    });

    // Close modal on background click
    document.getElementById('delete-modal').addEventListener('click', function (e) {
        if (e.target === this) {
            closeDeleteModal();
        }
    });

    const selectAll = document.getElementById('select-all');
    if (selectAll) {
        selectAll.addEventListener('change', function () {
            document.querySelectorAll('.row-checkbox').forEach((checkbox) => {
                checkbox.checked = this.checked;
            });
        });
    }

    const bulkForm = document.getElementById('bulk-actions-form');
    const bulkActionSelect = document.getElementById('bulk-action-select');
    if (bulkForm && bulkActionSelect) {
        bulkForm.addEventListener('submit', function () {
            this.action = `{{ url_for('admin:run_action', model=model_config.name, action_name='bulk_delete') }}`.replace('bulk_delete', bulkActionSelect.value);
        });
    }
</script>
{% endblock %}