{% extends 'public/base.html' %}
{% load static %}
{% load summonote_filters %}

{% block title %}{{ tag.name }} - Berita Desa - {{ website_settings.site_name|default:'Desa Pulosarok' }}{% endblock %}

{% block meta_description %}Berita dan informasi terkini dengan tag {{ tag.name }} dari Desa Pulosarok. Dapatkan update terbaru tentang {{ tag.name|lower }}.{% endblock %}

{% block extra_css %}
<style>
    /* * Kustomisasi Tampilan Kartu Berita */
    .news-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 12px;
        overflow: hidden;
    }

    .news-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    /* Dark mode hover shadow */
    .dark .news-card:hover {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    }

    .news-image {
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    .category-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 10;
    }

    .featured-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 10;
    }

    /* Tag Header and Icon Coloring */
    .tag-header {
        background: linear-gradient(135deg, {{ tag.color }}, {{ tag.color }}CC);
    }

    .tag-icon {
        color: {{ tag.color }};
    }

    /* Filter Chips */
    .filter-chip {
        transition: all 0.2s ease-in-out;
        cursor: pointer;
    }

    .filter-chip.active {
        background-color: var(--primary-color);
        color: white;
    }

    .filter-chip:hover {
        transform: translateY(-1px);
    }

    /* Mobile Filter Bar Background */
    .mobile-filter {
        position: relative;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
    }

    .dark .mobile-filter {
        background: rgba(17, 24, 39, 0.95);
    }

    .tag-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .tag-item {
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .tag-item:hover {
        transform: translateY(-1px);
    }

    /* Responsive adjustments */
    @media (max-width: 640px) {
        .news-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }

        .news-card {
            margin-bottom: 0;
        }

        .news-image {
            aspect-ratio: 4/3;
            height: 120px;
        }

        .news-card .p-4 {
            padding: 0.75rem;
        }

        .news-card h3 {
            font-size: 0.875rem;
            line-height: 1.25;
        }

        .news-card p {
            font-size: 0.75rem;
            line-height: 1.4;
        }

        .news-card .text-xs {
            font-size: 0.625rem;
        }
    }

    @media (min-width: 641px) and (max-width: 1024px) {
        .news-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }
    }

    @media (min-width: 1025px) {
        .news-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<section class="tag-header text-white py-12 md:py-16 lg:py-20">
    {# Header Section #}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-white bg-opacity-20 rounded-full mb-4">
                <i class="fas fa-hashtag text-2xl"></i>
            </div>
            <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 animate-fade-in">
                #{{ tag.name }}
            </h1>
            <p class="text-lg md:text-xl text-white text-opacity-90 max-w-3xl mx-auto animate-slide-up">
                {{ tag.description|default:"Berita dan informasi terkini dengan tag "|add:tag.name }}
            </p>
            <div class="mt-4 flex items-center justify-center space-x-4 text-sm">
                <span class="flex items-center">
                    <i class="fas fa-newspaper mr-2"></i>{{ news_list.count }} artikel
                </span>
                <span class="flex items-center">
                    <i class="fas fa-eye mr-2"></i>{{ total_views }} views
                </span>
            </div>
        </div>
    </div>
</section>

<!-- Mobile Filter Bar (Added dark classes) -->
<div class="mobile-filter border-b border-gray-200 px-4 py-3 md:hidden dark:border-gray-700">
    <div class="flex items-center justify-between">
        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Filter Berita</h3>
        <button onclick="toggleMobileFilters()"
            class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors duration-200 dark:bg-gray-700 dark:hover:bg-gray-600">
            <i class="fas fa-filter text-gray-600 dark:text-gray-300"></i>
        </button>
    </div>
    <div id="mobileFilters" class="hidden mt-3 space-y-2">
        <div class="flex flex-wrap gap-2">
            <button onclick="filterNews('all')"
                class="filter-chip active px-3 py-1.5 text-xs font-medium bg-primary-600 text-white rounded-full">
                Semua
            </button>
            <button onclick="filterNews('featured')"
                class="filter-chip px-3 py-1.5 text-xs font-medium bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
                <i class="fas fa-star mr-1"></i>Utama
            </button>
            <button onclick="filterNews('breaking')"
                class="filter-chip px-3 py-1.5 text-xs font-medium bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
                <i class="fas fa-bolt mr-1"></i>Breaking
            </button>
        </div>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex flex-col lg:flex-row gap-8">
        
        <!-- Sidebar (Desktop Filter & Tag Info) (Added dark classes) -->
        <div class="hidden lg:block lg:w-1/4">
            <div class="bg-white rounded-xl shadow-lg p-6 mb-6 dark:bg-gray-800 dark:shadow-2xl">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 dark:text-white">
                    <i class="fas fa-info-circle mr-2 tag-icon"></i> Tentang Tag
                </h3>
                <div class="space-y-3">
                    <div class="flex items-center space-x-3">
                        <div class="w-3 h-3 rounded-full" style="background-color: {{ tag.color }}"></div>
                        <span class="text-sm text-gray-600 dark:text-gray-400">Warna Tag</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-newspaper text-gray-400"></i>
                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ news_list.count }} artikel</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-eye text-gray-400"></i>
                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ total_views }} total views</span>
                    </div>
                    {% if tag.description %}
                    <div class="pt-3 border-t border-gray-200 dark:border-gray-700">
                        <p class="text-sm text-gray-600 dark:text-gray-400">{{ tag.description }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6 mb-6 dark:bg-gray-800 dark:shadow-2xl">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 dark:text-white">
                    <i class="fas fa-filter mr-2 text-primary-600"></i> Filter
                </h3>
                <div class="space-y-2">
                    <button onclick="filterNews('all')"
                        class="filter-chip active w-full text-left px-4 py-2 text-sm font-medium bg-primary-600 text-white rounded-lg">
                        <i class="fas fa-newspaper mr-2"></i>Semua Berita
                    </button>
                    <button onclick="filterNews('featured')"
                        class="filter-chip w-full text-left px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors duration-200 dark:text-gray-300 dark:hover:bg-gray-700">
                        <i class="fas fa-star mr-2 text-yellow-500"></i>Berita Utama
                    </button>
                    <button onclick="filterNews('breaking')"
                        class="filter-chip w-full text-left px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors duration-200 dark:text-gray-300 dark:hover:bg-gray-700">
                        <i class="fas fa-bolt mr-2 text-red-500"></i>Breaking News
                    </button>
                </div>
            </div>

            {% if popular_tags %}
            <div class="bg-white rounded-xl shadow-lg p-6 dark:bg-gray-800 dark:shadow-2xl">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 dark:text-white">
                    <i class="fas fa-hashtag mr-2 text-primary-600"></i> Tag Populer
                </h3>
                <div class="tag-cloud">
                    {% for popular_tag in popular_tags %}
                    <a href="{% url 'news:by_tag' popular_tag.slug %}"
                        class="tag-item inline-flex items-center px-3 py-1.5 text-sm font-medium bg-gray-100 text-gray-700 rounded-full hover:bg-primary-100 hover:text-primary-700 transition-colors duration-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-primary-900 dark:hover:text-primary-400">
                        #{{ popular_tag.name }}
                        <span class="ml-1 text-xs text-gray-500 dark:text-gray-400">({{ popular_tag.news.count }})</span>
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Main Content (Featured & News List) (Added dark classes) -->
        <div class="lg:w-3/4">
            {% if featured_news %}
            <div class="mb-8">
                <h2 class="text-2xl font-bold text-gray-900 mb-6 dark:text-white">
                    <i class="fas fa-star mr-2 text-yellow-500"></i> Berita Utama
                </h2>
                <div class="news-grid grid grid-cols-1 md:grid-cols-2 gap-6">
                    {% for news in featured_news %}
                    <article class="news-card bg-white rounded-xl shadow-lg overflow-hidden dark:bg-gray-800">
                        <div class="relative">
                            {% if news.featured_image %}
                            <img src="{{ news.featured_image.url }}" alt="{{ news.title }}"
                                class="news-image w-full h-48 object-cover">
                            {% else %}
                            <div
                                class="news-image w-full h-48 bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center">
                                <i class="fas fa-newspaper text-white text-4xl"></i>
                            </div>
                            {% endif %}
                            <div class="category-badge">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium text-white"
                                    style="background-color: {{ news.category.color }}">
                                    <i class="fas fa-tag mr-1"></i>{{ news.category.name }}
                                </span>
                            </div>
                            {% if news.is_featured %}
                            <div class="featured-badge">
                                <span
                                    class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-500 text-white">
                                    <i class="fas fa-star mr-1"></i>Utama
                                </span>
                            </div>
                            {% endif %}
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold text-gray-900 mb-3 line-clamp-2 dark:text-white">
                                <a href="{% url 'news:detail' news.slug %}"
                                    class="hover:text-primary-600 transition-colors duration-200">
                                    {{ news.title }}
                                </a>
                            </h3>
                            <div class="text-gray-600 text-sm mb-4 line-clamp-3 dark:text-gray-400">
                                {{ news.content|summonote_excerpt_20:news.is_summonote }}
                            </div>
                            <div class="flex flex-wrap gap-1 mb-4">
                                {% for news_tag in news.tags.all %}
                                <a href="{% url 'news:by_tag' news_tag.slug %}"
                                    class="inline-flex items-center px-2 py-1 text-xs font-medium bg-gray-100 text-gray-600 rounded-full hover:bg-primary-100 hover:text-primary-700 transition-colors duration-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-primary-900 dark:hover:text-primary-400">
                                    #{{ news_tag.name }}
                                </a>
                                {% endfor %}
                            </div>
                            <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
                                <div class="flex items-center space-x-4">
                                    <span class="flex items-center">
                                        <i class="fas fa-user mr-1"></i>{{ news.author.get_full_name|default:news.author.username }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-calendar mr-1"></i>{{ news.published_date|date:"d M Y" }}
                                    </span>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <span class="flex items-center">
                                        <i class="fas fa-eye mr-1"></i>{{ news.views_count }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-comment mr-1"></i>{{ news.comments_count }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </article>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- Semua Berita di bawah Tag ini -->
            <div>
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                        <i class="fas fa-newspaper mr-2 text-primary-600"></i> Semua Berita #{{ tag.name }}
                    </h2>
                    <div class="flex items-center space-x-2">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Total: {{ news_list.count }}</span>
                    </div>
                </div>

                <div class="news-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="newsGrid">
                    {% for news in news_list %}
                    <article class="news-card bg-white rounded-xl shadow-lg overflow-hidden dark:bg-gray-800"
                        data-featured="{{ news.is_featured|yesno:'true,false' }}"
                        data-breaking="{{ news.is_breaking|yesno:'true,false' }}">
                        <div class="relative">
                            {% if news.featured_image %}
                            <img src="{{ news.featured_image.url }}" alt="{{ news.title }}"
                                class="news-image w-full h-48 object-cover">
                            {% else %}
                            <div
                                class="news-image w-full h-48 bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center">
                                <i class="fas fa-newspaper text-white text-4xl"></i>
                            </div>
                            {% endif %}
                            <div class="category-badge">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium text-white"
                                    style="background-color: {{ news.category.color }}">
                                    <i class="fas fa-tag mr-1"></i>{{ news.category.name }}
                                </span>
                            </div>
                            {% if news.is_featured %}
                            <div class="featured-badge">
                                <span
                                    class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-500 text-white">
                                    <i class="fas fa-star mr-1"></i>Utama
                                </span>
                            </div>
                            {% endif %}
                            {% if news.is_breaking %}
                            <div class="featured-badge" style="top: 50px;">
                                <span
                                    class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-500 text-white">
                                    <i class="fas fa-bolt mr-1"></i>Breaking
                                </span>
                            </div>
                            {% endif %}
                        </div>
                        <div class="p-4">
                            <h3 class="text-lg font-bold text-gray-900 mb-2 line-clamp-2 dark:text-white">
                                <a href="{% url 'news:detail' news.slug %}"
                                    class="hover:text-primary-600 transition-colors duration-200">
                                    {{ news.title }}
                                </a>
                            </h3>
                            <div class="text-gray-600 text-sm mb-3 line-clamp-2 dark:text-gray-400">
                                {{ news.content|summonote_excerpt:news.is_summonote }}
                            </div>
                            <div class="flex flex-wrap gap-1 mb-3">
                                {% for news_tag in news.tags.all %}
                                <a href="{% url 'news:by_tag' news_tag.slug %}"
                                    class="inline-flex items-center px-2 py-1 text-xs font-medium bg-gray-100 text-gray-600 rounded-full hover:bg-primary-100 hover:text-primary-700 transition-colors duration-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-primary-900 dark:hover:text-primary-400">
                                    #{{ news_tag.name }}
                                </a>
                                {% endfor %}
                            </div>
                            <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                                <div class="flex items-center space-x-2">
                                    <span class="flex items-center">
                                        <i class="fas fa-user mr-1"></i>{{ news.author.get_full_name|default:news.author.username }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-calendar mr-1"></i>{{ news.published_date|date:"d M" }}
                                    </span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <span class="flex items-center">
                                        <i class="fas fa-eye mr-1"></i>{{ news.views_count }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-comment mr-1"></i>{{ news.comments_count }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </article>
                    {% empty %}
                    <div class="col-span-full text-center py-12">
                        <i class="fas fa-hashtag text-6xl text-gray-300 mb-4 dark:text-gray-600"></i>
                        <h3 class="text-xl font-semibold text-gray-500 mb-2 dark:text-gray-400">Belum Ada Berita</h3>
                        <p class="text-gray-400 dark:text-gray-500">Belum ada berita dengan tag #{{ tag.name }}.</p>
                    </div>
                    {% endfor %}
                </div>

                <!-- Pagination (Added dark classes) -->
                {% if is_paginated %}
                <div class="mt-8 flex justify-center">
                    <nav class="flex items-center space-x-2">
                        {% if page_obj.has_previous %}
                        <a href="?page=1"
                            class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-primary-600 transition-colors duration-200 dark:text-gray-400 dark:hover:text-primary-400">
                            <i class="fas fa-angle-double-left"></i>
                        </a>
                        <a href="?page={{ page_obj.previous_page_number }}"
                            class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-primary-600 transition-colors duration-200 dark:text-gray-400 dark:hover:text-primary-400">
                            <i class="fas fa-angle-left"></i>
                        </a>
                        {% endif %}
                        <span class="px-3 py-2 text-sm font-medium text-primary-600 bg-primary-50 rounded-lg dark:bg-primary-900 dark:text-primary-400">
                            {{ page_obj.number }} dari {{ page_obj.paginator.num_pages }}
                        </span>
                        {% if page_obj.has_next %}
                        <a href="?page={{ page_obj.next_page_number }}"
                            class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-primary-600 transition-colors duration-200 dark:text-gray-400 dark:hover:text-primary-400">
                            <i class="fas fa-angle-right"></i>
                        </a>
                        <a href="?page={{ page_obj.paginator.num_pages }}"
                            class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-primary-600 transition-colors duration-200 dark:text-gray-400 dark:hover:text-primary-400">
                            <i class="fas fa-angle-double-right"></i>
                        </a>
                        {% endif %}
                    </nav>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Mobile filter toggle function
    function toggleMobileFilters() {
        const mobileFilters = document.getElementById('mobileFilters');
        mobileFilters.classList.toggle('hidden');
    }

    // Filter news by type
    function filterNews(type) {
        const newsCards = document.querySelectorAll('.news-card');
        const filterChips = document.querySelectorAll('.filter-chip');

        // Update active filter chip
        filterChips.forEach(chip => {
            chip.classList.remove('active');
            // FIX: Removed syntax error (extra quotes/comma) and added dark classes for reset
            chip.classList.remove('bg-primary-600', 'text-white');
            chip.classList.add('bg-gray-100', 'text-gray-700', 'dark:bg-gray-700', 'dark:text-gray-300');
        });

        // Add active style to the clicked chip
        // FIX: Removed syntax error (extra quotes/comma) and added dark classes for active state removal
        if (event && event.target) {
            const clickedChip = event.target.closest('button');
            clickedChip.classList.add('active');
            clickedChip.classList.add('bg-primary-600', 'text-white');
            clickedChip.classList.remove('bg-gray-100', 'text-gray-700', 'dark:bg-gray-700', 'dark:text-gray-300');
        }


        // Filter news cards
        newsCards.forEach(card => {
            const isFeatured = card.getAttribute('data-featured') === 'true';
            const isBreaking = card.getAttribute('data-breaking') === 'true';

            if (type === 'all' || (type === 'featured' && isFeatured) || (type === 'breaking' && isBreaking)) {
                card.style.display = 'block';
                card.classList.add('animate-fade-in');
            } else {
                card.style.display = 'none';
                card.classList.remove('animate-fade-in');
            }
        });

        // Close mobile filters
        const mobileFilters = document.getElementById('mobileFilters');
        if (mobileFilters) {
            mobileFilters.classList.add('hidden');
        }
    }

    // Initialize filters
    document.addEventListener('DOMContentLoaded', function() {
        // --- Initialization Logic ---
        const setInitialActiveChip = (selector) => {
            const buttons = document.querySelectorAll(selector);
            buttons.forEach(chip => {
                const text = chip.textContent.trim();
                // Check if the chip text includes "Semua" for the default active filter
                if (text === 'Semua' || text.includes('Semua Berita')) {
                    chip.classList.add('active', 'bg-primary-600', 'text-white');
                    chip.classList.remove('bg-gray-100', 'text-gray-700', 'dark:bg-gray-700', 'dark:text-gray-300');
                } else {
                    // Ensure non-"Semua" chips have the correct inactive classes
                    chip.classList.remove('active', 'bg-primary-600', 'text-white');
                    chip.classList.add('bg-gray-100', 'text-gray-700', 'dark:bg-gray-700', 'dark:text-gray-300');
                }
            });
        };

        // Set initial active state for both desktop and mobile filters
        setInitialActiveChip('.lg\\:w-1\\/4 .filter-chip');
        setInitialActiveChip('.mobile-filter .filter-chip');
    });
</script>
{% endblock %}