{% extends 'base.html' %}
{% load wagtailcore_tags wagtailimages_tags %}

{% block title %}Recherche{% if search_query %} : {{ search_query }}{% endif %} - JoPer{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-4 py-12">
    <h1 class="font-serif text-4xl font-bold mb-8">Recherche</h1>

    <!-- Search form -->
    <form action="{% url 'blog:search' %}" method="get" class="mb-12">
        <div class="flex gap-4">
            <input
                type="text"
                name="q"
                value="{{ search_query }}"
                placeholder="Rechercher un article..."
                class="flex-1 px-4 py-3 border border-dot rounded focus:outline-none focus:border-accent"
                autofocus
            >
            <button type="submit" class="bg-accent text-white px-6 py-3 rounded hover:bg-ink transition-colors">
                Rechercher
            </button>
        </div>
    </form>

    {% if search_query %}
    <p class="text-gray-medium mb-8">
        {{ results.paginator.count }} résultat{{ results.paginator.count|pluralize }} pour "{{ search_query }}"
    </p>

    <!-- Results -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {% for post in results %}
        <article class="border border-dot rounded bg-white overflow-hidden hover:shadow-lg transition-shadow">
            {% if post.featured_image %}
            <a href="{{ post.url }}">
                {% image post.featured_image fill-400x250 class="w-full" %}
            </a>
            {% endif %}

            <div class="p-6">
                <h2 class="font-serif text-xl font-bold mb-2">
                    <a href="{{ post.url }}" class="hover:text-accent transition-colors">
                        {{ post.title }}
                    </a>
                </h2>

                <p class="text-gray-medium text-sm mb-4">
                    {{ post.excerpt|truncatewords:25 }}
                </p>

                <div class="flex items-center justify-between text-sm text-gray-medium">
                    <span>{{ post.first_published_at|date:"d M Y" }}</span>
                    <span>{{ post.reading_time }} min de lecture</span>
                </div>
            </div>
        </article>
        {% empty %}
        <p class="col-span-3 text-center text-gray-medium py-12">
            Aucun article trouvé pour cette recherche.
        </p>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if results.has_other_pages %}
    <nav class="mt-12 flex justify-center gap-2">
        {% if results.has_previous %}
        <a href="?q={{ search_query }}&page={{ results.previous_page_number }}" class="px-4 py-2 border border-dot rounded hover:bg-dot transition-colors">
            Précédent
        </a>
        {% endif %}

        <span class="px-4 py-2 bg-accent text-white rounded">
            {{ results.number }} / {{ results.paginator.num_pages }}
        </span>

        {% if results.has_next %}
        <a href="?q={{ search_query }}&page={{ results.next_page_number }}" class="px-4 py-2 border border-dot rounded hover:bg-dot transition-colors">
            Suivant
        </a>
        {% endif %}
    </nav>
    {% endif %}

    {% else %}
    <p class="text-center text-gray-medium py-12">
        Entrez un terme de recherche pour trouver des articles.
    </p>
    {% endif %}

    <div class="mt-12">
        <a href="/blog/" class="text-accent hover:underline">&larr; Retour au blog</a>
    </div>
</div>
{% endblock %}