{% extends "base.html" %}

{% block title %}Blog{% endblock %}

{% block content %}

<!-- Hero -->
<section class="relative py-24 overflow-hidden">
    <div class="absolute inset-0 dot-grid opacity-30 pointer-events-none"></div>
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[350px] pointer-events-none"
         style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>

    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="badge badge-primary mb-6">Blog</div>
        <h1 class="text-5xl md:text-6xl font-extrabold mb-5 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
            Insights &amp; <span class="gradient-text">Ideas</span>
        </h1>
        <p class="text-lg max-w-xl mx-auto mb-10" style="color: #8b8ca8;">
            Tutorials, thoughts on software development, and industry perspectives.
        </p>

        <!-- Search -->
        <div class="max-w-md mx-auto relative">
            <input type="text"
                   name="search"
                   placeholder="Search posts…"
                   class="input pl-11 pr-4 py-3.5"
                   hx-get="{{ url_for('blog_search') }}"
                   hx-trigger="keyup changed delay:500ms"
                   hx-target="#blog-posts"
                   hx-swap="innerHTML">
            <svg class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none" style="color: #6b6b8a;"
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
        </div>
    </div>
</section>

<!-- Blog Posts -->
<section class="py-16 pb-28" style="background: #0a0a14;">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div id="blog-posts">
            {% include "blog/partials/post_list.html" %}
        </div>

        <!-- Load More -->
        {% if posts and posts|length >= 10 %}
        <div class="text-center mt-14">
            <button hx-get="{{ url_for('blog_load_more', page=2) }}"
                    hx-target="#blog-posts"
                    hx-swap="beforeend"
                    hx-trigger="click"
                    class="btn btn-outline px-10 py-3.5">
                <span class="htmx-indicator mr-2">
                    <svg class="animate-spin h-4 w-4 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </span>
                Load More Posts
            </button>
        </div>
        {% endif %}
    </div>
</section>

{% endblock %}