{% extends 'admin/base.html' %}
{% load static %}

{% block title %}Daftar Peminjaman - Admin Panel{% endblock %}
{% block page_title %}Daftar Peminjaman{% endblock %}

{% block content %}
<!-- Mobile-First Responsive Container -->
<div class="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50 py-4 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <!-- Header Section -->
        <div class="mb-6 sm:mb-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
                        <i class="fas fa-hand-paper text-white text-lg sm:text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Daftar Peminjaman</h1>
                        <p class="text-sm sm:text-base text-gray-600 mt-1">Kelola peminjaman barang inventaris</p>
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
                    <a href="{% url 'inventaris_admin:dashboard' %}" 
                       class="inline-flex items-center justify-center px-4 py-2 bg-white border-2 border-green-200 rounded-lg text-sm font-medium text-green-700 hover:bg-green-50 hover:border-green-300 transition-all duration-200 shadow-sm">
                        <i class="fas fa-arrow-left mr-2"></i>
                        <span class="hidden sm:inline">Kembali Dashboard</span>
                        <span class="sm:hidden">Dashboard</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-6 mb-6 sm:mb-8">
            <!-- Total Peminjaman -->
            <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl hover:scale-105 transition-all duration-200">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center backdrop-blur-sm">
                            <i class="fas fa-hand-paper text-white text-lg sm:text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-3 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-green-100 truncate">Total</p>
                        <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white">{{ page_obj.paginator.count }}</p>
                    </div>
                </div>
            </div>

            <!-- Pending -->
            <div class="bg-gradient-to-br from-yellow-400 to-yellow-500 rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl hover:scale-105 transition-all duration-200">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center backdrop-blur-sm">
                            <i class="fas fa-clock text-white text-lg sm:text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-3 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-yellow-100 truncate">Pending</p>
                        <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white">{{ peminjaman_pending|default:0 }}</p>
                    </div>
                </div>
            </div>

            <!-- Aktif -->
            <div class="bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl hover:scale-105 transition-all duration-200">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center backdrop-blur-sm">
                            <i class="fas fa-play-circle text-white text-lg sm:text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-3 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-emerald-100 truncate">Aktif</p>
                        <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white">{{ peminjaman_dipinjam|default:0 }}</p>
                    </div>
                </div>
            </div>

            <!-- Terlambat -->
            <div class="bg-gradient-to-br from-red-500 to-red-600 rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl hover:scale-105 transition-all duration-200">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center backdrop-blur-sm">
                            <i class="fas fa-exclamation-circle text-white text-lg sm:text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-3 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-red-100 truncate">Terlambat</p>
                        <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white">{{ peminjaman_terlambat|default:0 }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter & Pencarian Section -->
        <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 mb-6 sm:mb-8 overflow-hidden">
            <!-- Header -->
            <div class="bg-gradient-to-r from-green-500 to-green-600 px-4 sm:px-6 py-3 sm:py-4">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-filter text-white text-sm sm:text-base"></i>
                    <h2 class="text-base sm:text-lg font-bold text-white">Filter & Pencarian</h2>
                </div>
            </div>

            <!-- Filter Form -->
            <div class="p-4 sm:p-6">
                <!-- First Row: Status, Cari Peminjam, Dari Tanggal, Sampai Tanggal -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
                    <!-- Status -->
                    <div>
                        <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-2">
                            Status
                        </label>
                        <div class="relative">
                            <select class="block w-full pl-10 pr-3 py-2 sm:py-2.5 border-2 border-gray-300 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200">
                                <option value="">Semua Status</option>
                                <option value="pending">Pending</option>
                                <option value="disetujui">Disetujui</option>
                                <option value="dipinjam">Dipinjam</option>
                                <option value="dikembalikan">Dikembalikan</option>
                            </select>
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-chevron-down text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Cari Peminjam -->
                    <div>
                        <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-2">
                            Cari Peminjam
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-search text-gray-400 text-sm"></i>
                            </div>
                            <input type="text" 
                                   placeholder="Nama, username, atau email..." 
                                   class="block w-full pl-10 pr-3 py-2 sm:py-2.5 border-2 border-gray-300 rounded-lg bg-white placeholder-gray-400 text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200"
                                   id="search-input">
                        </div>
                    </div>

                    <!-- Dari Tanggal -->
                    <div>
                        <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-2">
                            Dari Tanggal
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-calendar-alt text-gray-400 text-sm"></i>
                            </div>
                            <input type="date" 
                                   class="block w-full pl-10 pr-3 py-2 sm:py-2.5 border-2 border-gray-300 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200"
                                   id="dari-tanggal">
                        </div>
                    </div>

                    <!-- Sampai Tanggal -->
                    <div>
                        <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-2">
                            Sampai Tanggal
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-calendar-alt text-gray-400 text-sm"></i>
                            </div>
                            <input type="date" 
                                   class="block w-full pl-10 pr-3 py-2 sm:py-2.5 border-2 border-gray-300 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200"
                                   id="sampai-tanggal">
                        </div>
                    </div>
                </div>

                <!-- Second Row: Action Buttons -->
                <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
                    <button type="button" 
                            class="flex-1 sm:flex-initial inline-flex items-center justify-center px-4 sm:px-6 py-2.5 bg-gradient-to-r from-green-600 to-green-700 text-white text-sm font-medium rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                        <i class="fas fa-search mr-2"></i>
                        Filter
                    </button>
                    <button type="button" 
                            class="flex-1 sm:flex-initial inline-flex items-center justify-center px-4 sm:px-6 py-2.5 bg-white border-2 border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 shadow-sm">
                        <i class="fas fa-redo mr-2"></i>
                        Reset
                    </button>
                    <button type="button" 
                            class="flex-1 sm:flex-initial inline-flex items-center justify-center px-4 sm:px-6 py-2.5 bg-gradient-to-r from-green-500 to-green-600 text-white text-sm font-medium rounded-lg hover:from-green-600 hover:to-green-700 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                        <i class="fas fa-download mr-2"></i>
                        Export
                    </button>
                </div>
            </div>
        </div>

        <!-- Peminjaman List -->
        <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 overflow-hidden">
            <!-- Desktop Table Header -->
            <div class="hidden lg:block">
                <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-4 border-b-2 border-green-600">
                    <div class="grid grid-cols-12 gap-4 text-xs font-bold text-white uppercase tracking-wide">
                        <div class="col-span-3">Peminjam & Barang</div>
                        <div class="col-span-2">Tanggal Pinjam</div>
                        <div class="col-span-2">Tanggal Kembali</div>
                        <div class="col-span-2">Status</div>
                        <div class="col-span-2">Durasi</div>
                        <div class="col-span-1 text-center">Aksi</div>
                    </div>
                </div>
            </div>

            <!-- Peminjaman Items -->
            <div class="divide-y divide-green-100">
                {% for peminjaman in page_obj %}
                    <!-- Desktop Row -->
                    <div class="hidden lg:block hover:bg-green-50 transition-all duration-200 border-l-4 border-transparent hover:border-green-500" data-search>
                        <div class="px-6 py-4">
                            <div class="grid grid-cols-12 gap-4 items-center">
                                <!-- Peminjam & Barang Info -->
                                <div class="col-span-3">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-md">
                                            <i class="fas fa-user text-white text-base"></i>
                                        </div>
                                        <div class="min-w-0 flex-1">
                                            <p class="text-sm font-semibold text-gray-900 truncate">{{ peminjaman.peminjam.nama_lengkap }}</p>
                                            <p class="text-xs text-gray-600 truncate">{{ peminjaman.barang.nama }}</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Tanggal Pinjam -->
                                <div class="col-span-2">
                                    <p class="text-sm font-medium text-gray-900">{{ peminjaman.tanggal_pinjam|date:"d/m/Y" }}</p>
                                    <p class="text-xs text-gray-500">{{ peminjaman.tanggal_pinjam|time:"H:i" }}</p>
                                </div>

                                <!-- Tanggal Kembali -->
                                <div class="col-span-2">
                                    <p class="text-sm font-medium text-gray-900">{{ peminjaman.tanggal_kembali_rencana|date:"d/m/Y" }}</p>
                                    <p class="text-xs text-gray-500">{{ peminjaman.tanggal_kembali_rencana|time:"H:i" }}</p>
                                </div>

                                <!-- Status -->
                                <div class="col-span-2">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold shadow-sm
                                        {% if peminjaman.status == 'pending' %}bg-gradient-to-r from-yellow-400 to-yellow-500 text-white
                                        {% elif peminjaman.status == 'disetujui' %}bg-gradient-to-r from-blue-500 to-blue-600 text-white
                                        {% elif peminjaman.status == 'dipinjam' %}bg-gradient-to-r from-green-500 to-green-600 text-white
                                        {% elif peminjaman.status == 'dikembalikan' %}bg-gradient-to-r from-gray-400 to-gray-500 text-white
                                        {% else %}bg-gradient-to-r from-red-500 to-red-600 text-white{% endif %}">
                                        {{ peminjaman.get_status_display }}
                                    </span>
                                </div>

                                <!-- Durasi -->
                                <div class="col-span-2">
                                    <p class="text-sm font-medium text-gray-900">{{ peminjaman.durasi_hari }} hari</p>
                                    {% if peminjaman.is_overdue %}
                                        <p class="text-xs font-semibold text-red-600">Terlambat</p>
                                    {% endif %}
                                </div>

                                <!-- Actions -->
                                <div class="col-span-1">
                                    <div class="flex items-center justify-center space-x-2">
                                        <a href="{% url 'inventaris_admin:peminjaman_detail' peminjaman.pk %}" 
                                           class="text-blue-600 hover:text-blue-800 p-2 rounded-lg hover:bg-blue-50 transition-all duration-200 shadow-sm hover:shadow-md">
                                            <i class="fas fa-eye text-sm"></i>
                                        </a>
                                        {% if peminjaman.status == 'pending' %}
                                        <a href="{% url 'inventaris_admin:peminjaman_approve' peminjaman.pk %}" 
                                           class="text-green-600 hover:text-green-800 p-2 rounded-lg hover:bg-green-50 transition-all duration-200 shadow-sm hover:shadow-md" title="Setujui Peminjaman">
                                            <i class="fas fa-check text-sm"></i>
                                        </a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Mobile Card -->
                    <div class="lg:hidden p-4 sm:p-5 hover:bg-green-50 transition-all duration-200 border-l-4 border-green-500 shadow-sm" data-search>
                        <div class="bg-gradient-to-br from-green-50 to-white rounded-lg p-4 border-2 border-green-100">
                            <div class="flex items-start space-x-3 sm:space-x-4">
                                <!-- Avatar -->
                                <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center flex-shrink-0 shadow-md">
                                    <i class="fas fa-user text-white text-lg sm:text-xl"></i>
                                </div>

                                <!-- Content -->
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-start justify-between mb-3">
                                        <div class="min-w-0 flex-1">
                                            <h3 class="text-sm sm:text-base font-bold text-gray-900 truncate mb-1">{{ peminjaman.peminjam.nama_lengkap }}</h3>
                                            <p class="text-xs sm:text-sm text-gray-600 truncate mb-2">{{ peminjaman.barang.nama }}</p>
                                            
                                            <!-- Status Badge -->
                                            <div class="mb-3">
                                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold shadow-sm
                                                    {% if peminjaman.status == 'pending' %}bg-gradient-to-r from-yellow-400 to-yellow-500 text-white
                                                    {% elif peminjaman.status == 'disetujui' %}bg-gradient-to-r from-blue-500 to-blue-600 text-white
                                                    {% elif peminjaman.status == 'dipinjam' %}bg-gradient-to-r from-green-500 to-green-600 text-white
                                                    {% elif peminjaman.status == 'dikembalikan' %}bg-gradient-to-r from-gray-400 to-gray-500 text-white
                                                    {% else %}bg-gradient-to-r from-red-500 to-red-600 text-white{% endif %}">
                                                    {{ peminjaman.get_status_display }}
                                                </span>
                                            </div>
                                            
                                            <!-- Date Info -->
                                            <div class="space-y-2 bg-white rounded-lg p-3 border border-green-100">
                                                <p class="text-xs sm:text-sm text-gray-700 flex items-center">
                                                    <i class="fas fa-calendar-alt mr-2 text-green-600"></i>
                                                    <span class="font-medium">Pinjam:</span>
                                                    <span class="ml-2">{{ peminjaman.tanggal_pinjam|date:"d/m/Y" }} {{ peminjaman.tanggal_pinjam|time:"H:i" }}</span>
                                                </p>
                                                <p class="text-xs sm:text-sm text-gray-700 flex items-center">
                                                    <i class="fas fa-calendar-check mr-2 text-green-600"></i>
                                                    <span class="font-medium">Kembali:</span>
                                                    <span class="ml-2">{{ peminjaman.tanggal_kembali_rencana|date:"d/m/Y" }} {{ peminjaman.tanggal_kembali_rencana|time:"H:i" }}</span>
                                                </p>
                                                <p class="text-xs sm:text-sm text-gray-700 flex items-center">
                                                    <i class="fas fa-clock mr-2 text-green-600"></i>
                                                    <span class="font-medium">Durasi:</span>
                                                    <span class="ml-2">{{ peminjaman.durasi_hari }} hari</span>
                                                    {% if peminjaman.is_overdue %}
                                                        <span class="ml-2 px-2 py-0.5 bg-red-100 text-red-700 rounded-full text-xs font-semibold">Terlambat</span>
                                                    {% endif %}
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Mobile Actions -->
                                    <div class="flex items-center justify-end space-x-2 mt-3 pt-3 border-t border-green-100">
                                        <a href="{% url 'inventaris_admin:peminjaman_detail' peminjaman.pk %}" 
                                           class="flex-1 sm:flex-initial inline-flex items-center justify-center px-3 sm:px-4 py-2 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition-all duration-200 shadow-sm hover:shadow-md text-xs sm:text-sm font-medium">
                                            <i class="fas fa-eye mr-2"></i>
                                            Detail
                                        </a>
                                        {% if peminjaman.status == 'pending' %}
                                        <a href="{% url 'inventaris_admin:peminjaman_approve' peminjaman.pk %}" 
                                           class="flex-1 sm:flex-initial inline-flex items-center justify-center px-3 sm:px-4 py-2 bg-green-50 text-green-700 rounded-lg hover:bg-green-100 transition-all duration-200 shadow-sm hover:shadow-md text-xs sm:text-sm font-medium">
                                            <i class="fas fa-check mr-2"></i>
                                            Setujui
                                        </a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% empty %}
                    <!-- Empty State -->
                    <div class="text-center py-12 sm:py-16">
                        <div class="w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-green-100 to-green-200 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
                            <i class="fas fa-hand-paper text-green-600 text-3xl sm:text-4xl"></i>
                        </div>
                        <h3 class="text-lg sm:text-xl font-bold text-gray-900 mb-2">Belum ada peminjaman</h3>
                        <p class="text-gray-600 mb-6 text-sm sm:text-base">Mulai dengan membuat peminjaman pertama</p>
                    </div>
                {% endfor %}
            </div>
        </div>

        <!-- Pagination -->
        {% if page_obj.has_other_pages %}
            <div class="mt-6 sm:mt-8">
                <nav class="flex items-center justify-between">
                    <div class="flex-1 flex justify-between sm:hidden">
                        {% if page_obj.has_previous %}
                            <a href="?page={{ page_obj.previous_page_number }}" 
                               class="relative inline-flex items-center px-4 py-2 border-2 border-green-300 text-sm font-medium rounded-lg text-green-700 bg-white hover:bg-green-50 hover:border-green-400 transition-all duration-200 shadow-sm">
                                <i class="fas fa-chevron-left mr-2"></i>Sebelumnya
                            </a>
                        {% endif %}
                        {% if page_obj.has_next %}
                            <a href="?page={{ page_obj.next_page_number }}" 
                               class="ml-3 relative inline-flex items-center px-4 py-2 border-2 border-green-300 text-sm font-medium rounded-lg text-green-700 bg-white hover:bg-green-50 hover:border-green-400 transition-all duration-200 shadow-sm">
                                Selanjutnya<i class="fas fa-chevron-right ml-2"></i>
                            </a>
                        {% endif %}
                    </div>
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm sm:text-base text-gray-700">
                                Menampilkan
                                <span class="font-semibold text-green-700">{{ page_obj.start_index }}</span>
                                sampai
                                <span class="font-semibold text-green-700">{{ page_obj.end_index }}</span>
                                dari
                                <span class="font-semibold text-green-700">{{ page_obj.paginator.count }}</span>
                                hasil
                            </p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-lg shadow-sm -space-x-px border-2 border-green-200 overflow-hidden">
                                {% if page_obj.has_previous %}
                                    <a href="?page={{ page_obj.previous_page_number }}" 
                                       class="relative inline-flex items-center px-3 sm:px-4 py-2 border-r-2 border-green-200 bg-white text-sm font-medium text-green-700 hover:bg-green-50 transition-all duration-200">
                                        <i class="fas fa-chevron-left"></i>
                                    </a>
                                {% endif %}
                                
                                {% for num in page_obj.paginator.page_range %}
                                    {% if page_obj.number == num %}
                                        <span class="relative inline-flex items-center px-4 py-2 border-r-2 border-green-200 bg-gradient-to-r from-green-500 to-green-600 text-sm font-semibold text-white">
                                            {{ num }}
                                        </span>
                                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                        <a href="?page={{ num }}" 
                                           class="relative inline-flex items-center px-4 py-2 border-r-2 border-green-200 bg-white text-sm font-medium text-gray-700 hover:bg-green-50 transition-all duration-200">
                                            {{ num }}
                                        </a>
                                    {% endif %}
                                {% endfor %}
                                
                                {% if page_obj.has_next %}
                                    <a href="?page={{ page_obj.next_page_number }}" 
                                       class="relative inline-flex items-center px-3 sm:px-4 py-2 bg-white text-sm font-medium text-green-700 hover:bg-green-50 transition-all duration-200">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                {% endif %}
                            </nav>
                        </div>
                    </div>
                </nav>
            </div>
        {% endif %}
    </div>
</div>


<script>
// Search functionality
const searchInput = document.getElementById('search-input');
if (searchInput) {
    searchInput.addEventListener('input', function(e) {
        const searchTerm = e.target.value.toLowerCase();
        const items = document.querySelectorAll('[data-search]');
        
        items.forEach(item => {
            const text = item.textContent.toLowerCase();
            if (text.includes(searchTerm)) {
                item.classList.remove('hidden');
            } else {
                item.classList.add('hidden');
            }
        });
    });
}

</script>
{% endblock %}