{% extends "blog/base.html" %}
{% load blog_tags %}

{% block title %}Latest Posts - Blog{% endblock %}

{% block meta_description %}Browse our latest blog posts on various topics including technology, programming, and more.{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto">
    <!-- Page Header -->
    <div class="mb-8 text-center">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">Latest Posts</h1>
        <p class="text-xl text-gray-600 max-w-2xl mx-auto">
            Discover our latest articles and insights on technology, programming, and more.
        </p>
    </div>

    <!-- Search Bar -->
    <div class="mb-8">
        <form method="get" action="{% url 'blog:post_search' %}" class="max-w-md mx-auto">
            <div class="relative">
                <input
                    type="text"
                    name="q"
                    placeholder="Search posts..."
                    class="w-full px-4 py-3 pl-12 pr-4 text-gray-700 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                    value="{{ search_query|default:'' }}"
                >
                <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                    <svg class="w-5 h-5 text-gray-400" 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"></path>
                    </svg>
                </div>
            </div>
        </form>
    </div>

    <div class="flex flex-col lg:flex-row gap-8">
        <!-- Main Content -->
        <div class="lg:w-2/3">
            {% if posts %}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                    {% for post in posts %}
                        <article class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
                            {% if post.featured_image %}
                                <div class="aspect-w-16 aspect-h-9 bg-gray-200">
                                    <img
                                        src="{{ post.featured_image.url }}"
                                        alt="{{ post.title }}"
                                        class="w-full h-48 object-cover"
                                    >
                                </div>
                            {% endif %}

                            <div class="p-6">
                                <!-- Category Badge -->
                                <div class="mb-3">
                                    <a href="{{ post.category.get_absolute_url }}" class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary-50 text-primary-700 hover:bg-primary-100 transition-colors">
                                        {{ post.category.name }}
                                    </a>
                                </div>

                                <!-- Title -->
                                <h2 class="text-xl font-bold text-gray-900 mb-3 line-clamp-2">
                                    <a href="{{ post.get_absolute_url }}" class="hover:text-primary-600 transition-colors">
                                        {{ post.title }}
                                    </a>
                                </h2>

                                <!-- Excerpt -->
                                <p class="text-gray-600 mb-4 line-clamp-3">
                                    {% if post.excerpt %}
                                        {{ post.excerpt }}
                                    {% else %}
                                        {{ post.content|striptags|truncatewords:30 }}
                                    {% endif %}
                                </p>

                                <!-- Meta Information -->
                                <div class="flex items-center justify-between text-sm text-gray-500">
                                    <div class="flex items-center space-x-4">
                                        <!-- Author -->
                                        <div class="flex items-center space-x-2">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                            </svg>
                                            <span>{{ post.author.get_full_name|default:post.author.username }}</span>
                                        </div>

                                        <!-- Date -->
                                        <div class="flex items-center space-x-2">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                            </svg>
                                            <span>{{ post.publish_date|date:"M j, Y" }}</span>
                                        </div>
                                    </div>

                                    <!-- View Count -->
                                    {% view_counter post %}
                                </div>

                                <!-- Tags -->
                                {% if post.tags.all %}
                                    <div class="mt-4 flex flex-wrap gap-2">
                                        {% for tag in post.tags.all|slice:":3" %}
                                            <a href="{{ tag.get_absolute_url }}" class="inline-flex items-center px-2 py-1 rounded-md text-xs bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">
                                                #{{ tag.name }}
                                            </a>
                                        {% endfor %}
                                        {% if post.tags.count > 3 %}
                                            <span class="inline-flex items-center px-2 py-1 rounded-md text-xs bg-gray-100 text-gray-500">
                                                +{{ post.tags.count|add:"-3" }}
                                            </span>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            </div>
                        </article>
                    {% endfor %}
                </div>

                <!-- Pagination -->
                {% if page_obj.has_other_pages %}
                    <div class="flex justify-center">
                        <nav class="flex items-center space-x-2">
                            {% if page_obj.has_previous %}
                                <a href="?page={{ page_obj.previous_page_number }}" class="px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-gray-700 transition-colors">
                                    Previous
                                </a>
                            {% endif %}

                            {% for num in page_obj.paginator.page_range %}
                                {% if page_obj.number == num %}
                                    <span class="px-4 py-2 text-sm font-medium text-white bg-primary-600 border border-primary-600 rounded-md">
                                        {{ num }}
                                    </span>
                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                    <a href="?page={{ num }}" class="px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-gray-700 transition-colors">
                                        {{ num }}
                                    </a>
                                {% endif %}
                            {% endfor %}

                            {% if page_obj.has_next %}
                                <a href="?page={{ page_obj.next_page_number }}" class="px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-gray-700 transition-colors">
                                    Next
                                </a>
                            {% endif %}
                        </nav>
                    </div>
                {% endif %}

            {% else %}
                <!-- No Posts Message -->
                <div class="text-center py-12">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    <h3 class="mt-2 text-lg font-medium text-gray-900">No posts found</h3>
                    <p class="mt-1 text-gray-500">
                        {% if search_query %}
                            No posts match your search criteria "{{ search_query }}".
                        {% else %}
                            There are no published posts yet.
                        {% endif %}
                    </p>
                </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="lg:w-1/3">
            {% blog_sidebar %}
        </div>
    </div>
</div>
{% endblock %}