{% extends 'frontend/base.html.twig' %}

{% block title %}{% if query %}{{ query }} - Arama Sonuclari{% else %}Arama{% endif %} | Haber{% endblock %}
{% block meta_description %}{% if query %}{{ query }} ile ilgili haberler arayin.{% else %}Haberlerde arama yapin.{% endif %}{% endblock %}
{% block meta_robots %}noindex, follow{% endblock %}

{% block body %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

    {# ===== SEARCH HEADER & FORM ===== #}
    <div class="mb-8">
        <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-6">
            <i class="fas fa-search mr-2 text-red-600"></i> Arama
        </h1>

        <form action="{{ path('frontend_search') }}" method="GET"
              class="flex gap-2 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-2 shadow-sm">
            <input type="text" name="q" value="{{ query }}" placeholder="Haberlerde ara..."
                   class="flex-1 rounded-lg border-0 bg-transparent text-gray-900 dark:text-gray-100 px-4 py-2.5 text-base focus:ring-0 outline-none"
                   autocomplete="off" autofocus>
            <button type="submit"
                    class="px-8 py-2.5 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold rounded-lg transition-colors">
                <i class="fas fa-search mr-1"></i> Ara
            </button>
        </form>
    </div>

    {# ===== SEARCH RESULTS ===== #}
    {% if query %}
        {% if pagination and pagination|length > 0 %}
            <div class="mb-6">
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    <strong class="text-gray-900 dark:text-gray-100">"{{ query }}"</strong>
                    icin {{ pagination.totalItemCount }} sonuc bulundu.
                </p>
            </div>

            <div class="space-y-4 mb-8">
                {% for news in pagination %}
                    <article class="group flex gap-4 bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-sm hover:shadow-lg border border-gray-100 dark:border-gray-800 transition-all duration-300">
                        {# Thumbnail #}
                        <a href="{{ path('frontend_news_detail', {slug: news.slug}) }}" class="flex-shrink-0 w-32 sm:w-48 relative overflow-hidden">
                            {% if news.featuredImage %}
                                <img src="{{ news.featuredImage|media_url }}" alt="{{ news.title }}"
                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 aspect-[4/3]"
                                     loading="lazy">
                            {% else %}
                                <div class="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center aspect-[4/3]">
                                    <i class="far fa-image text-2xl text-gray-400 dark:text-gray-600"></i>
                                </div>
                            {% endif %}
                        </a>
                        {# Content #}
                        <div class="flex-1 py-3 pr-4">
                            {% if news.category %}
                                <a href="{{ path('frontend_category', {slug: news.category.slug}) }}"
                                   class="inline-block text-xs font-semibold uppercase tracking-wider mb-1 hover:underline"
                                   style="color: {{ news.category.color|default('#dc2626') }}">
                                    {{ news.category.title }}
                                </a>
                            {% endif %}
                            <h3 class="text-base font-bold text-gray-900 dark:text-gray-100 leading-snug mb-1.5 line-clamp-2 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">
                                <a href="{{ path('frontend_news_detail', {slug: news.slug}) }}">{{ news.title }}</a>
                            </h3>
                            {% if news.spot %}
                                <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-2 hidden sm:block">
                                    {{ news.spot|striptags|slice(0, 150) }}
                                </p>
                            {% endif %}
                            <div class="flex items-center gap-3 text-xs text-gray-500">
                                {% if news.author %}
                                    <span><i class="far fa-user mr-1"></i>{{ news.author.name }}</span>
                                {% endif %}
                                {% if news.publishedAt %}
                                    <span><i class="far fa-clock mr-1"></i>{{ news.publishedAt|date("d.m.Y") }}</span>
                                {% endif %}
                                <span><i class="far fa-eye mr-1"></i>{{ news.viewCount }}</span>
                            </div>
                        </div>
                    </article>
                {% endfor %}
            </div>

            {# ===== PAGINATION ===== #}
            {% if pagination.pageCount > 1 %}
                <nav class="flex justify-center" aria-label="Sayfalama">
                    <ul class="flex items-center gap-1">
                        {% if pagination.currentPageNumber > 1 %}
                            <li>
                                <a href="{{ path('frontend_search', {q: query, page: pagination.currentPageNumber - 1}) }}"
                                   class="flex items-center justify-center w-10 h-10 rounded-lg bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-red-900/20 hover:text-red-600 transition-colors">
                                    <i class="fas fa-chevron-left text-sm"></i>
                                </a>
                            </li>
                        {% endif %}

                        {% for page in 1..pagination.pageCount %}
                            {% if page == pagination.currentPageNumber %}
                                <li>
                                    <span class="flex items-center justify-center w-10 h-10 rounded-lg bg-red-600 text-white font-semibold text-sm">
                                        {{ page }}
                                    </span>
                                </li>
                            {% elseif page >= pagination.currentPageNumber - 2 and page <= pagination.currentPageNumber + 2 %}
                                <li>
                                    <a href="{{ path('frontend_search', {q: query, page: page}) }}"
                                       class="flex items-center justify-center w-10 h-10 rounded-lg bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-red-900/20 hover:text-red-600 transition-colors text-sm">
                                        {{ page }}
                                    </a>
                                </li>
                            {% elseif page == pagination.currentPageNumber - 3 or page == pagination.currentPageNumber + 3 %}
                                <li><span class="px-2 text-gray-400">...</span></li>
                            {% endif %}
                        {% endfor %}

                        {% if pagination.currentPageNumber < pagination.pageCount %}
                            <li>
                                <a href="{{ path('frontend_search', {q: query, page: pagination.currentPageNumber + 1}) }}"
                                   class="flex items-center justify-center w-10 h-10 rounded-lg bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-red-900/20 hover:text-red-600 transition-colors">
                                    <i class="fas fa-chevron-right text-sm"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}

        {% elseif pagination is not null %}
            <div class="text-center py-16 text-gray-500 dark:text-gray-400">
                <i class="fas fa-search text-5xl mb-4 block text-gray-300 dark:text-gray-600"></i>
                <p class="text-lg mb-2"><strong>"{{ query }}"</strong> icin sonuc bulunamadi.</p>
                <p class="text-sm">Farkli anahtar kelimelerle tekrar deneyin.</p>
            </div>
        {% endif %}
    {% else %}
        <div class="text-center py-16 text-gray-500 dark:text-gray-400">
            <i class="fas fa-search text-5xl mb-4 block text-gray-300 dark:text-gray-600"></i>
            <p class="text-lg">Aramak istediginiz kelimeyi yukaridaki alana yazin.</p>
        </div>
    {% endif %}
</div>
{% endblock %}
