<section class="w-full py-8 md:py-12">
    <div class="container mx-auto px-4 md:px-6">
        <div class="mb-8 space-y-2 text-center">
            <h1 class="font-headline text-3xl font-bold tracking-tight sm:text-4xl">
                Available Bursaries
            </h1>
            <p class="text-gray-500">
                Find and apply for bursaries that match your field of study and aspirations.
            </p>
        </div>

        <div class="mb-8 flex justify-center">
            <div class="relative w-full max-w-lg">
                <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500"></i>
                <input
                type="search"
                id="bursary-search"
                placeholder="Search by keyword, field of study, provider..."
                class="w-full pl-10 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"
                />
            </div>
        </div>

        <div id="bursary-grid" class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            <% bursaries.forEach(bursary => { %>
                <div class="bg-white shadow-lg rounded-lg overflow-hidden bursary-card" data-title="<%= bursary.title %>" data-description="<%= bursary.description %>" data-field="<%= bursary.field %>" data-provider="<%= bursary.provider %>">
                    <div class="p-6">
                        <h3 class="text-xl font-bold font-headline"><%= bursary.title %></h3>
                        <p class="text-sm text-gray-500 mt-2"><%= bursary.description %></p>
                        <p class="text-sm text-gray-500 mt-2"><strong>Amount:</strong> <%= bursary.amount %></p>
                        <p class="text-sm text-gray-500 mt-2"><strong>Deadline:</strong> <%= bursary.deadline %></p>
                        <p class="text-sm text-gray-500 mt-2"><strong>Field:</strong> <%= bursary.field %></p>
                        <p class="text-sm text-gray-500 mt-2"><strong>Provider:</strong> <%= bursary.provider %></p>
                    </div>
                    <div class="p-6 pt-0">
                        <a href="/bursaries/<%= bursary.id %>" class="inline-block bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Apply Now</a>
                    </div>
                </div>
                <% }) %>
            </div>
        </div>
    </section>

    <script nonce="<%= nonce %>">
        // Client-side search functionality
        document.getElementById('bursary-search').addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            const cards = document.querySelectorAll('.bursary-card');

            cards.forEach(card => {
                const title = card.dataset.title.toLowerCase();
                const description = card.dataset.description.toLowerCase();
                const field = card.dataset.field.toLowerCase();
                const provider = card.dataset.provider.toLowerCase();

                if (
                title.includes(searchTerm) ||
                description.includes(searchTerm) ||
                field.includes(searchTerm) ||
                provider.includes(searchTerm)
                ) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    </script>