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

{% block title %}{{ tag.name }} Etiketli Haberler | Haber{% endblock %}
{% block meta_description %}{{ tag.name }} etiketli haberler. {{ tag.description|default('')|striptags|slice(0, 140) }}{% endblock %}

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

    {# ===== TAG HEADER ===== #}
    <div class="mb-8 p-6 rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm">
        <div class="flex items-center gap-3 mb-2">
            <div class="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
                <i class="fas fa-tag text-red-600 dark:text-red-400"></i>
            </div>
            <div>
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100">
                    #{{ tag.name }}
                </h1>
                {% if tag.description %}
                    <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">{{ tag.description }}</p>
                {% endif %}
            </div>
        </div>
        {% if pagination %}
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                Toplam {{ pagination.totalItemCount }} haber bulundu.
            </p>
        {% endif %}
    </div>

    {# ===== NEWS GRID ===== #}
    {% if pagination|length > 0 %}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8">
            {% for news in pagination %}
                <article class="group bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-sm hover:shadow-xl border border-gray-100 dark:border-gray-800 transition-all duration-300">
                    <a href="{{ path('frontend_news_detail', {slug: news.slug}) }}" class="block relative overflow-hidden aspect-video">
                        {% 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"
                                 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">
                                <i class="far fa-image text-3xl text-gray-400 dark:text-gray-600"></i>
                            </div>
                        {% endif %}
                        {% if news.category %}
                            <span class="absolute top-3 left-3 px-2 py-0.5 text-xs font-semibold rounded text-white"
                                  style="background-color: {{ news.category.color|default('#dc2626') }}">
                                {{ news.category.title }}
                            </span>
                        {% endif %}
                    </a>
                    <div class="p-4">
                        <h3 class="text-base font-bold text-gray-900 dark:text-gray-100 leading-snug mb-2 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-3">
                                {{ news.spot|striptags|slice(0, 100) }}
                            </p>
                        {% endif %}
                        <div class="flex items-center justify-between text-xs text-gray-500">
                            {% 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_tag', {slug: tag.slug, 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_tag', {slug: tag.slug, 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_tag', {slug: tag.slug, 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 %}
    {% else %}
        <div class="text-center py-16 text-gray-500 dark:text-gray-400">
            <i class="far fa-newspaper text-5xl mb-4 block"></i>
            <p class="text-lg">Bu etiketle ilgili haber bulunmuyor.</p>
        </div>
    {% endif %}
</div>
{% endblock %}
