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

{% block title %}Blog Archive - Blog{% endblock %}

{% block meta_description %}Browse our complete blog archive with all posts organized by date.{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto">
    <div class="flex flex-col lg:flex-row gap-8">
        <!-- Main Content -->
        <div class="lg:w-2/3">
            <!-- Page Header -->
            <div class="mb-8 text-center">
                <h1 class="text-4xl font-bold text-gray-900 mb-4">
                    {% if year and month %}
                        Archive: {{ month|date:"F Y" }}
                    {% elif year %}
                        Archive: {{ year }}
                    {% else %}
                        Blog Archive
                    {% endif %}
                </h1>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">
                    {% if year and month %}
                        All posts published in {{ month|date:"F Y" }}
                    {% elif year %}
                        All posts published in {{ year }}
                    {% else %}
                        Browse our complete collection of blog posts
                    {% endif %}
                </p>
            </div>

            <!-- Archive Navigation -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Archive Navigation</h2>
                <div class="flex flex-wrap gap-4">
                    <a href="{% url 'blog:post_archive' %}" class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium bg-primary-50 text-primary-700 hover:bg-primary-100 transition-colors">
                        All Posts
                    </a>
                    {% get_archive_months 12 as archive_months %}
                    {% for month in archive_months %}
                        <a href="{% url 'blog:month_archive' year=month.year month=month.month %}" class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium bg-gray-50 text-gray-700 hover:bg-gray-100 transition-colors">
                            {{ month|date:"M Y" }}
                        </a>
                    {% endfor %}
                </div>
            </div>

            <!-- Posts List -->
            {% if posts %}
                <div class="space-y-6 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">
                            {% 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">
                                    <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">
                                    {{ post.excerpt|default:post.content|truncatewords:30 }}
                                </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:"F 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 year and month %}
                            No posts published in {{ month|date:"F Y" }}
                        {% elif year %}
                            No posts published in {{ year }}
                        {% 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 %}