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

{% block title %}{{ category.seoTitle|default(category.title) }} | Haber{% endblock %}
{% block meta_description %}{{ category.seoDescription|default(category.description|default(category.title ~ ' kategorisindeki son haberler.')|striptags|slice(0, 160)) }}{% endblock %}

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

    {# ===== CATEGORY HEADER ===== #}
    <div class="mb-8 p-6 md:p-8 rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm"
         {% if category.color %}style="border-top: 4px solid {{ category.color }}"{% endif %}>
        <div class="flex items-center gap-4 mb-3">
            {% if category.icon %}
                <div class="w-12 h-12 rounded-xl flex items-center justify-center text-white text-xl"
                     style="background-color: {{ category.color|default('#dc2626') }}">
                    <i class="{{ category.icon }}"></i>
                </div>
            {% elseif category.color %}
                <div class="w-12 h-12 rounded-xl flex items-center justify-center text-white text-xl"
                     style="background-color: {{ category.color }}">
                    <i class="fas fa-folder"></i>
                </div>
            {% endif %}
            <div>
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100">
                    {{ category.title }}
                </h1>
                {% if category.description %}
                    <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">{{ category.description|striptags|slice(0, 200) }}</p>
                {% endif %}
            </div>
        </div>
        {% if category.image %}
            <div class="mt-4 rounded-xl overflow-hidden aspect-[3/1]">
                <img src="{{ category.image }}" alt="{{ category.title }}" class="w-full h-full object-cover">
            </div>
        {% endif %}
    </div>

    <div class="flex flex-col lg:flex-row gap-8">
        {# Main content #}
        <div class="flex-1 min-w-0">
            {# News grid #}
            {% if pagination|length > 0 %}
                <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 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.isBreaking %}
                                    <span class="absolute top-3 left-3 px-2 py-0.5 text-xs font-semibold rounded bg-red-600 text-white">
                                        Son Dakika
                                    </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, 120) }}
                                    </p>
                                {% endif %}
                                <div class="flex items-center justify-between text-xs text-gray-500">
                                    <div class="flex items-center gap-3">
                                        {% 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>
                                    {% if news.commentCount > 0 %}
                                        <span><i class="far fa-comment mr-1"></i>{{ news.commentCount }}</span>
                                    {% endif %}
                                </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_category', {slug: category.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_category', {slug: category.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_category', {slug: category.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 kategoride henuz haber bulunmuyor.</p>
                </div>
            {% endif %}
        </div>

        {# Sidebar #}
        <aside class="w-full lg:w-80 flex-shrink-0 space-y-8">
            {# Subcategories #}
            {% if subcategories|length > 0 %}
                <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm p-5">
                    <h3 class="text-base font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
                        <i class="fas fa-sitemap text-red-600"></i> Alt Kategoriler
                    </h3>
                    <ul class="space-y-1">
                        {% for sub in subcategories %}
                            <li>
                                <a href="{{ path('frontend_category', {slug: sub.slug}) }}"
                                   class="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group">
                                    <span class="flex items-center gap-2">
                                        {% if sub.color %}
                                            <span class="w-2.5 h-2.5 rounded-full" style="background-color: {{ sub.color }}"></span>
                                        {% endif %}
                                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">
                                            {{ sub.title }}
                                        </span>
                                    </span>
                                    <span class="text-xs text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded-full">
                                        {{ sub.newsCount }}
                                    </span>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}

            {# Popular in category #}
            {% if popularInCategory|length > 0 %}
                <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm p-5">
                    <h3 class="text-base font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
                        <i class="fas fa-fire text-red-600"></i> Populer Haberler
                    </h3>
                    <div class="space-y-3">
                        {% for news in popularInCategory %}
                            <a href="{{ path('frontend_news_detail', {slug: news.slug}) }}"
                               class="flex items-start gap-3 group">
                                <span class="flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-sm font-bold text-gray-500 dark:text-gray-400 group-hover:bg-red-100 dark:group-hover:bg-red-900/30 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">
                                    {{ loop.index }}
                                </span>
                                <div class="flex-1">
                                    <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 line-clamp-2 leading-snug group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">
                                        {{ news.title }}
                                    </h4>
                                    <span class="text-xs text-gray-500 mt-1 block">
                                        <i class="far fa-eye mr-1"></i>{{ news.viewCount }}
                                    </span>
                                </div>
                            </a>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            {{ render_widget_zone('category-sidebar') }}

            {# ===== SHARED SIDEBAR WIDGETS ===== #}
            {% include 'frontend/partials/_sidebar_widgets.html.twig' %}
        </aside>
    </div>
</div>
{% endblock %}
