{% extends 'theme/base.html' %}
{% load static %}

{% block title %}#{{ tag.name }} - AL WASAY Blog{% endblock %}

{% block content %}
<header class="relative">
    <img src="{% static 'images/hero_1.png' %}" alt="Blog Header" class="absolute inset-0 w-full h-full object-cover">
    <div class="absolute inset-0"></div>
    
    <div class="relative z-10 px-6 lg:px-20 xl:px-32 py-12 lg:py-16">
        <a href="{% url 'blog:post_list' %}" class="inline-flex items-center gap-2 text-accent/80 font-poppins mb-4 hover:text-accent transition">
            <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Back to Blog
        </a>
        <h1 class="text-accent text-3xl lg:text-4xl font-bold font-poppins">
            <span class="text-accent/60">#</span>{{ tag.name }}
        </h1>
    </div>
</section>

<section class="bg-accent py-12">
    <div class="px-6 lg:px-20 xl:px-32">
        {% if posts %}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for post in posts %}
            <a href="{{ post.get_absolute_url }}" class="group">
                <div class="bg-accent-light rounded-xl overflow-hidden shadow-sm hover:shadow-md transition h-full">
                    {% if post.featured_image %}
                    <img src="{{ post.featured_image.url }}" alt="{{ post.title }}" class="w-full h-44 object-cover group-hover:scale-105 transition duration-300">
                    {% else %}
                    <div class="w-full h-44 bg-secondary/20 flex items-center justify-center">
                        <svg class="w-10 h-10 text-secondary/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    {% endif %}
                    <div class="p-5">
                        <div class="flex items-center gap-3 mb-2">
                            {% if post.category %}
                            <span class="text-primary text-xs font-semibold font-poppins uppercase">{{ post.category.name }}</span>
                            {% endif %}
                            <span class="text-secondary text-xs font-poppins">{{ post.published_at|date:"M d, Y" }}</span>
                        </div>
                        <h3 class="text-primary-dark text-lg font-semibold font-poppins mb-2 group-hover:text-primary transition">{{ post.title }}</h3>
                        <p class="text-secondary text-sm font-poppins line-clamp-2">{{ post.excerpt }}</p>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>

        {% if posts.has_other_pages %}
        <div class="flex justify-center items-center gap-2 mt-10">
            {% if posts.has_previous %}
            <a href="?page={{ posts.previous_page_number }}" class="px-4 py-2 bg-accent-light border border-secondary/30 rounded-md text-primary-dark font-poppins hover:bg-primary hover:text-accent hover:border-primary transition">
                Previous
            </a>
            {% endif %}
            <span class="px-4 py-2 text-secondary font-poppins">Page {{ posts.number }} of {{ posts.paginator.num_pages }}</span>
            {% if posts.has_next %}
            <a href="?page={{ posts.next_page_number }}" class="px-4 py-2 bg-accent-light border border-secondary/30 rounded-md text-primary-dark font-poppins hover:bg-primary hover:text-accent hover:border-primary transition">
                Next
            </a>
            {% endif %}
        </div>
        {% endif %}

        {% else %}
        <div class="text-center py-16">
            <svg class="w-16 h-16 text-secondary/50 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
            </svg>
            <p class="text-secondary font-poppins">No articles with this tag yet.</p>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}