{% extends "base.html" %}

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

{% block content %}
<!-- Hero Section -->
<section class="bg-gradient-to-br from-primary-600 to-primary-800 text-white py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">Our Blog</h1>
            <p class="text-xl text-primary-100 max-w-2xl mx-auto">
                Insights, tutorials, and thoughts on software development, technology, and industry trends.
            </p>
        </div>
    </div>
</section>

<!-- Search Section -->
<section class="py-8 bg-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-xl mx-auto">
            <div class="relative">
                <input type="text"
                       name="search"
                       placeholder="Search posts..."
                       class="input pl-12"
                       hx-get="{{ url_for('blog_search') }}"
                       hx-trigger="keyup changed delay:500ms"
                       hx-target="#blog-posts"
                       hx-swap="innerHTML">
                <svg class="w-5 h-5 text-gray-400 absolute left-4 top-1/2 transform -translate-y-1/2" 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>
    </div>
</section>

<!-- Blog Posts -->
<section class="py-16">
    <div class="max-w-7xl 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-12">
            <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-8 py-3">
                <span class="htmx-indicator mr-2">
                    <svg class="animate-spin h-5 w-5 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 %}