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

{% block title %}Our Blogs - AL WASAY{% endblock %}

{% block content %}
<section class="relative">
    <img src="{% static 'images/hero_1.png' %}" alt="Blog Hero" class="absolute inset-0 w-full h-full object-cover">
    <div class="absolute inset-0 "></div>
    <div class="relative z-10 flex flex-col items-start justify-center py-24 lg:py-32 px-6 lg:px-20 xl:px-32">
        <h1 class="text-zinc-100 text-5xl lg:text-7xl font-medium font-poppins uppercase leading-tight text-left">Our BLOGS</h1>
        <p class="mt-4 text-zinc-100 text-lg lg:text-xl font-normal font-poppins text-left max-w-xl">
            Expert Insights, Tips & News from the Automotive World
        </p>
    </div>
</section>

{% if posts %}
{% with post=posts.0 %}
    <section class="bg-accent py-16 lg:py-24">
        <div class="px-6 lg:px-20 xl:px-32">
            <div class="flex flex-col lg:flex-row gap-8 lg:gap-10">
                <div class="w-full lg:w-1/2">
                    {% if post.featured_image %}
                    <img src="{{ post.featured_image.url }}" alt="{{ post.title }}" class="w-full h-[250px] lg:h-[340px] object-cover rounded-2xl">
                    {% else %}
                    <div class="w-full h-[250px] lg:h-[340px] bg-stone-800 rounded-2xl flex items-center justify-center">
                        <svg class="w-16 h-16 text-stone-600" 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>
                
                <div class="w-full lg:w-1/2 flex flex-col justify-center">
                    <h2 class="text-stone-950 text-2xl lg:text-3xl font-medium font-poppins capitalize leading-tight">{{ post.title }}</h2>
                    <p class="mt-2 text-stone-950 text-base font-medium font-poppins">
                        Category: 
                        <span class="text-primary">{% if post.category %}{{ post.category.name }}{% else %}Posts{% endif %}</span>
                    </p>
                    <p class="text-stone-950 text-base font-medium font-poppins">{{ post.published_at|date:"F d, Y" }}</p>
                    <p class="mt-4 text-black text-sm font-normal font-poppins leading-relaxed">{{ post.excerpt }}</p>
                    <a href="{{ post.get_absolute_url }}" class="mt-6 inline-block w-fit px-8 py-3 bg-primary text-accent text-sm font-normal font-poppins capitalize rounded-md hover:bg-primary-dark transition">
                        Read More
                    </a>
                </div>
            </div>
        </div>
    </section>
{% endwith %}

{% if featured_posts %}
    <section class="bg-accent py-5">
        <div class="px-6 lg:px-20 xl:px-32">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                {% for post in featured_posts %}
                <div class="bg-stone-950 rounded-xl py-12 px-8 flex flex-col items-center justify-center text-center min-h-[200px]">
                    <p class="text-zinc-100 text-sm font-normal font-poppins capitalize">
                        Category: {% if post.category %}{{ post.category.name }}{% else %}Events{% endif %}
                    </p>
                    <h3 class="text-zinc-100 text-lg lg:text-xl font-semibold font-poppins capitalize leading-9 mt-2">{{ post.title|truncatewords:5 }}</h3>
                    <a href="{{ post.get_absolute_url }}" class="mt-4 px-8 py-2 bg-zinc-100 rounded-md text-primary-dark text-sm font-normal font-poppins capitalize hover:bg-accent transition">
                        Read More
                    </a>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>
{% endif %}

<section class="bg-accent py-8 lg:py-12">
    <div class="px-6 lg:px-20 xl:px-32">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            {% for post in posts %}
            <div class="bg-white rounded-xl p-5">
                {% if post.featured_image %}
                <img src="{{ post.featured_image.url }}" alt="{{ post.title }}" class="w-full h-44 object-cover rounded-md">
                {% else %}
                <div class="w-full h-44 bg-stone-800 rounded-md flex items-center justify-center">
                    <svg class="w-12 h-12 text-stone-600" 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="mt-5 flex flex-col gap-3">
                    <div>
                        <p class="text-primary text-sm font-semibold font-poppins">
                            {% if post.category %}{{ post.category.name }}{% else %}Posts{% endif %}
                        </p>
                        <p class="text-secondary text-sm font-normal font-poppins">{{ post.published_at|date:"F d, Y" }}</p>
                    </div>
                    <h3 class="text-stone-950 text-xl font-semibold font-poppins leading-6">{{ post.title|truncatewords:5 }}</h3>
                    <p class="text-secondary text-sm font-normal font-poppins leading-5">{{ post.excerpt|truncatewords:12 }}</p>
                    <a href="{{ post.get_absolute_url }}" class="w-full py-3 bg-white rounded-md border border-primary text-secondary text-sm font-normal font-poppins capitalize text-center hover:bg-primary hover:text-accent hover:border-primary transition">
                        Read More
                    </a>
                </div>
            </div>
            {% 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 %}
    </div>
</section>

{% else %}
    <section class="bg-accent py-16 lg:py-24">
        <div class="px-6 lg:px-20 xl:px-32">
            <div class="max-w-2xl mx-auto text-center">
                <div class="w-20 h-20 bg-stone-200 rounded-full flex items-center justify-center mx-auto mb-6">
                    <svg class="w-10 h-10 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
                    </svg>
                </div>
                <h2 class="text-stone-950 text-2xl lg:text-3xl font-semibold font-poppins mb-3">No Blog Posts Yet</h2>
                <p class="text-secondary text-base font-normal font-poppins mb-8">We're working on creating amazing content for you. Check back soon for updates on auto parts, industry news, and more!</p>
                <a href="/" class="inline-block px-8 py-3 bg-primary text-accent text-sm font-medium font-poppins capitalize rounded-md hover:bg-primary-dark transition">
                    Back to Home
                </a>
            </div>
        </div>
    </section>
{% endif %}

{% endblock %}