{% extends 'public_base.html' %}

{% block title %}{{ meta_title|default:"Our Blog - RegisterYourStartup" }}{% endblock %}
{% block meta_description %}{{ meta_description|default:"Read the latest articles, guides, and updates on company registration, compliance, startups, and business growth from RegisterYourStartup." }}{% endblock %}

{% block content %}
<style>
    /* Existing styles unchanged */
    .glass {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .hover-lift:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }
    .gradient-text {
        background: linear-gradient(90deg, #4f46e5, #7c3aed);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .blog-card-img {
        height: 220px;
        object-fit: cover;
        transition: transform 0.4s ease;
    }
    .blog-card:hover .blog-card-img {
        transform: scale(1.05);
    }

    /* Search bar styles - pure CSS only */
    .search-form {
        max-width: 680px;
        margin: 0 auto;
    }
    .search-wrapper {
        position: relative;
    }
    .search-input {
        width: 100%;
        padding: 16px 60px 16px 24px;
        font-size: 1.1rem;
        border: 2px solid #e0e7ff;
        border-radius: 9999px;
        background-color: #ffffff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    .search-input:focus {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
    }
    .search-button {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: #4f46e5;
        color: white;
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: default;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none; /* Button is decorative only */
    }
    .search-button i {
        font-size: 1.1rem;
    }

    /* Hide non-matching cards */
    .blog-card.hidden {
        display: none;
    }

    /* No results message */
    .no-results {
        grid-column: 1 / -1;
        text-align: center;
        padding: 4rem 1rem;
        color: #6b7280;
    }
    .no-results i {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.3;
    }
</style>

<!-- Hero Section -->
<section class="py-16 md:py-24 bg-[#B6C3FD] relative overflow-hidden">
    <div class="container mx-auto px-4">
        <div class="text-center max-w-4xl mx-auto">
            <h1 class="text-4xl md:text-6xl font-extrabold text-gray-900 mb-6">
                Our <span class="gradient-text">Blog</span>
            </h1>
            <p class="text-xl text-gray-700 mb-8">
                Insights, guides, and updates on company registration, startup compliance, taxation, funding, and business growth in India.
            </p>
        </div>
        <div class="absolute inset-0 pointer-events-none">
            <div class="absolute top-10 left-10 w-64 h-64 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
            <div class="absolute top-40 right-10 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
            <div class="absolute -bottom-8 left-20 w-72 h-72 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
        </div>
    </div>
</section>

<!-- Client-Side Search Bar -->
<section class="py-10 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="search-form">
            <div class="search-wrapper">
                <input 
                    type="text" 
                    id="blog-search"
                    placeholder="Search articles, guides, compliance tips..." 
                    class="search-input"
                    aria-label="Search blog posts"
                    autocomplete="off"
                >
                <div class="search-button" aria-hidden="true">
                    <i class="fas fa-search"></i>
                </div>
            </div>
        </div>

        <!-- Live feedback (optional) -->
        <div class="text-center mt-4 text-sm text-gray-600" id="search-feedback" style="display: none;">
            Showing results for: <strong id="search-term"></strong>
        </div>
    </div>
</section>

<section id="blog-posts" class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="blog-grid">
            {% for blog in blogs %}
                <article class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift blog-card" 
                         data-title="{{ blog.title|lower }}">
                    {% if blog.cover_image %}
                        <a href="{% url 'blog_detail' pk=blog.pk %}">
                            <img src="{{ blog.cover_image.url }}" alt="{{ blog.title }}" class="w-full blog-card-img">
                        </a>
                    {% else %}
                        <a href="{% url 'blog_detail' pk=blog.pk %}">
                            <div class="w-full h-56 bg-gradient-to-br from-indigo-200 to-purple-200 flex items-center justify-center">
                                <i class="fas fa-newspaper text-5xl text-indigo-600 opacity-50"></i>
                            </div>
                        </a>
                    {% endif %}

                    <div class="p-6">
                        <h3 class="text-2xl font-bold text-gray-900 mb-3">
                            <a href="{% url 'blog_detail' pk=blog.pk %}" class="hover:text-indigo-600 transition">
                                {{ blog.title }}
                            </a>
                        </h3>

                        <a href="{% url 'blog_detail' pk=blog.pk %}" class="text-indigo-600 font-medium hover:text-indigo-800 transition inline-flex items-center">
                            Read More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </article>
            {% empty %}
                <div class="col-span-full text-center py-20">
                    <i class="fas fa-book-open text-6xl text-gray-300 mb-6"></i>
                    <p class="text-2xl text-gray-600">No blog posts available yet. Stay tuned!</p>
                </div>
            {% endfor %}
        </div>

        <!-- No results message (initially hidden) -->
        <div class="no-results" id="no-results" style="display: none;">
            <i class="fas fa-search text-gray-300"></i>
            <p class="text-2xl">No posts found matching your search.</p>
            <p class="text-lg mt-2">Try different keywords.</p>
        </div>
    </div>
</section>

<!-- Client-side Search Script -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('blog-search');
        const blogGrid = document.getElementById('blog-grid');
        const blogCards = blogGrid.querySelectorAll('.blog-card');
        const noResults = document.getElementById('no-results');
        const feedback = document.getElementById('search-feedback');
        const searchTermSpan = document.getElementById('search-term');

        searchInput.addEventListener('input', function () {
            const query = this.value.trim().toLowerCase();
            let visibleCount = 0;

            blogCards.forEach(card => {
                const title = card.getAttribute('data-title');
                if (title.includes(query)) {
                    card.classList.remove('hidden');
                    visibleCount++;
                } else {
                    card.classList.add('hidden');
                }
            });

            // Toggle no-results message
            if (visibleCount === 0 && query.length > 0) {
                noResults.style.display = 'block';
            } else {
                noResults.style.display = 'none';
            }

            // Optional live feedback
            if (query.length > 0) {
                feedback.style.display = 'block';
                searchTermSpan.textContent = query;
            } else {
                feedback.style.display = 'none';
            }
        });
    });
</script>

{% endblock %}