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

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

{% block meta_description %}
Informasi terkini dan berita terbaru dari Desa Pulosarok. Dapatkan update terbaru tentang kegiatan desa, program pemerintah, dan informasi penting lainnya.
{% endblock %} 

{% block extra_css %} 
<style> 
    /* Custom styles for news cards and responsiveness */
    .news-card { 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        border-radius: 12px; 
        overflow: hidden; 
        cursor: pointer;
        position: relative;
    } 
    .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); 
    } 
    /* Darker shadow on hover */
    .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); 
    }
    
    /* Make the entire card clickable */
    .news-card a {
        display: block;
        height: 100%;
        text-decoration: none;
        color: inherit;
        position: relative;
        z-index: 1;
    }
    
    .news-card a:hover {
        text-decoration: none;
        color: inherit;
    }
    
    /* Ensure images are clickable */
    .news-card a img {
        pointer-events: none;
    }
    
    /* Make sure badges don't interfere with clicking */
    .category-badge,
    .featured-badge {
        pointer-events: none;
        z-index: 10;
    }
    
    /* Remove any link styling that might interfere */
    .news-card a:focus {
        outline: none;
    }
    
    .news-card a:focus-visible {
        outline: 2px solid #3B82F6;
        outline-offset: 2px;
    }
    
    /* Ensure all text inside links inherits color */
    .news-card a * {
        color: inherit;
    } 
    .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; 
    } 
    .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); 
    } 
    
    
    /* Existing mobile filter custom CSS has been removed to rely on cleaner Tailwind classes */

    /* Mobile Layout - 2 rows responsive */ 
    @media (max-width: 640px) { 
        .news-grid { 
            grid-template-columns: repeat(2, 1fr) !important; 
            gap: 0.5rem !important; 
        } 
        .news-card { 
            margin-bottom: 0; 
            min-height: 200px; 
        } 
        .news-image { 
            aspect-ratio: 16/9; 
            height: 120px !important; 
        }
        
        /* Make featured news image smaller on mobile */
        .news-card .news-image {
            height: 120px !important;
        } 
        .news-card .p-2 { 
            padding: 0.5rem !important; 
        }
        
        .news-card a {
            padding: 0.5rem !important;
        }
        
        /* Featured news mobile adjustments */
        @media (max-width: 640px) {
            .news-card .news-image {
                height: 120px !important;
            }
            
            .news-card {
                min-height: 200px !important;
            }
        }
        
        /* Force larger images on mobile */
        @media (max-width: 640px) {
            .news-image {
                height: 120px !important;
                min-height: 120px !important;
            }
            
            .news-card .news-image {
                height: 120px !important;
                min-height: 120px !important;
            }
        }
        
        /* Mobile pagination styling */
        @media (max-width: 640px) {
            .pagination-nav {
                flex-wrap: wrap;
                gap: 0.25rem;
                padding: 0.5rem;
            }
            
            .pagination-nav a,
            .pagination-nav span {
                width: 2.5rem !important;
                height: 2.5rem !important;
                font-size: 0.75rem !important;
            }
            
            .pagination-nav .ellipsis {
                display: none;
            }
        } 
        .news-card h3 { 
            font-size: 0.75rem !important; 
            line-height: 1.2 !important; 
            margin-bottom: 0.25rem !important; 
        } 
        .news-card p { 
            font-size: 0.625rem !important; 
            line-height: 1.3 !important; 
            margin-bottom: 0.5rem !important; 
        } 
        .news-card .text-xs { 
            font-size: 0.5rem !important; 
        } 
        .category-badge span, .featured-badge span { 
            padding: 0.125rem 0.25rem !important; 
            font-size: 0.5rem !important; 
        } 
    } 
    /* Tablet Layout */ 
    @media (min-width: 641px) and (max-width: 1024px) { 
        .news-grid { 
            grid-template-columns: repeat(2, 1fr); 
            gap: 1.5rem; 
        } 
    } 
    /* Desktop Layout */ 
    @media (min-width: 1025px) { 
        .news-grid { 
            grid-template-columns: repeat(3, 1fr); 
            gap: 2rem; 
        } 
    } 
</style> 
{% endblock %} 

{% block content %} 
<section class="relative py-8 sm:py-12 lg:py-16 overflow-hidden"> 
    {% if hero_image_url %} 
    <div class="absolute inset-0 bg-cover bg-center bg-no-repeat bg-fixed" style="background-image: url('{{ hero_image_url }}');"></div> 
    <div class="absolute inset-0 bg-gradient-to-br from-blue-600/80 to-indigo-700/80"></div> 
    {% else %} 
    <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700"></div> 
    {% endif %} 
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> 
        <div class="text-center text-white"> 
            <div class="mb-4 sm:mb-6"> 
                <i class="fas fa-newspaper text-4xl sm:text-5xl lg:text-6xl opacity-90"></i> 
            </div> 
            <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-2 md:mb-3"> 
                Berita Desa 
            </h1> 
            <p class="text-sm sm:text-base md:text-lg mb-4 md:mb-6 max-w-3xl mx-auto opacity-95 leading-relaxed"> 
                Informasi terkini dan berita terbaru dari Desa Pulosarok 
            </p> 
            <p class="text-xs sm:text-sm md:text-base max-w-2xl mx-auto opacity-90 leading-relaxed"> 
                Dapatkan update terbaru tentang kegiatan desa, program pemerintah, dan informasi penting lainnya 
            </p> 
        </div> 
    </div> 
</section> 

<!-- Mobile Filter (Added dark theme classes) -->
<div class="mobile-filter border-b border-gray-200 px-4 py-3 md:hidden dark:bg-gray-900 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> 
            {% for category in categories %} 
            <button onclick="filterNews('{{ category.slug }}')" 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"> 
                {{ category.name }} 
            </button> 
            {% endfor %} 
        </div> 
    </div> 
</div> 

<!-- Main Content Area -->
<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 Filters (Added dark theme 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-filter mr-2 text-primary-600"></i> Kategori 
                </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> 
                    {% for category in categories %} 
                    <button onclick="filterNews('{{ category.slug }}')" 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-tag mr-2" style="color: {{ category.color }}"></i>{{ category.name }} 
                        <span class="float-right text-xs text-gray-500 dark:text-gray-400">{{ category.news.count }}</span> 
                    </button> 
                    {% endfor %} 
                </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="flex flex-wrap gap-2"> 
                    {% for tag in popular_tags %} 
                    <a href="{% url 'news:by_tag' tag.slug %}" class="inline-flex items-center px-3 py-1.5 text-xs 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-white"> 
                        #{{ tag.name }} 
                    </a> 
                    {% endfor %} 
                </div> 
            </div> 
            {% endif %} 
        </div> 
        
        <!-- News List (Added dark theme 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="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 dark:shadow-2xl"> 
                        <a href="{% url 'news:detail' news.slug %}" class="block h-full">
                            <div class="relative"> 
                                {% if news.featured_image %} 
                                <img src="{{ news.featured_image.url }}" alt="{{ news.title }}" class="news-image w-full h-40 md:h-48 object-cover"> 
                                {% else %} 
                                <div class="news-image w-full h-40 md: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-lg md: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-gray-100 hover:text-primary-600 transition-colors duration-200"> 
                                    {{ news.title }} 
                                </h3> 
                                <div class="text-gray-600 text-sm mb-4 line-clamp-3 dark:text-gray-400">
                                    {{ news.content|striptags|truncatechars:150 }}
                                </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>
                        </a>
                    </article> 
                    {% endfor %} 
                </div> 
            </div> 
            {% endif %} 
            
            <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 
                    </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-2 md:grid-cols-2 lg:grid-cols-3 gap-3 md: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 dark:shadow-2xl" data-category="{{ news.category.slug }}">
                        <a href="{% url 'news:detail' news.slug %}" class="block h-full">
                            <div class="relative">
                                {% if news.featured_image %}
                                <img src="{{ news.featured_image.url }}" alt="{{ news.title }}" class="news-image w-full h-24 md:h-48 object-cover">
                                {% else %}
                                <div class="news-image w-full h-24 md: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-lg md: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-2 md:p-4">
                                <h3 class="text-xs md:text-lg font-bold text-gray-900 mb-1 md:mb-2 line-clamp-2 dark:text-gray-100 hover:text-primary-600 transition-colors duration-200">
                                    {{ news.title }}
                                </h3>
                                <div class="text-gray-600 text-xs md:text-sm mb-2 md:mb-3 line-clamp-1 md:line-clamp-2 dark:text-gray-400">
                                    {{ news.content|striptags|truncatechars:100 }}
                                </div>
                                <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                                    <div class="flex items-center space-x-1 md:space-x-2">
                                        <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-1 md: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>
                        </a>
                    </article>
                    {% empty %} 
                    <div class="col-span-full text-center py-12"> 
                        <i class="fas fa-newspaper 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 yang dipublikasikan saat ini.</p> 
                    </div> 
                    {% endfor %} 
                </div> 
                
                {% if is_paginated %} 
                <div class="mt-8 flex justify-center"> 
                    <nav class="pagination-nav flex items-center justify-center space-x-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-2 border border-gray-200 dark:border-gray-700"> 
                        {% if page_obj.has_previous %} 
                        <a href="?page=1" class="flex items-center justify-center w-10 h-10 text-sm font-medium text-gray-500 hover:text-white hover:bg-gray-600 rounded-lg transition-all duration-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600" title="Halaman Pertama"> 
                            <i class="fas fa-angle-double-left"></i> 
                        </a> 
                        <a href="?page={{ page_obj.previous_page_number }}" class="flex items-center justify-center w-10 h-10 text-sm font-medium text-gray-500 hover:text-white hover:bg-gray-600 rounded-lg transition-all duration-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600" title="Halaman Sebelumnya"> 
                            <i class="fas fa-angle-left"></i> 
                        </a> 
                        {% else %}
                        <span class="flex items-center justify-center w-10 h-10 text-sm font-medium text-gray-300 dark:text-gray-600 cursor-not-allowed"> 
                            <i class="fas fa-angle-double-left"></i> 
                        </span>
                        <span class="flex items-center justify-center w-10 h-10 text-sm font-medium text-gray-300 dark:text-gray-600 cursor-not-allowed"> 
                            <i class="fas fa-angle-left"></i> 
                        </span>
                        {% endif %} 
                        
                        <!-- Page numbers -->
                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                            <span class="flex items-center justify-center w-10 h-10 text-sm font-medium text-white bg-gray-600 rounded-lg shadow-md"> 
                                {{ num }} 
                            </span>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <a href="?page={{ num }}" class="flex items-center justify-center w-10 h-10 text-sm font-medium text-gray-700 hover:text-white hover:bg-gray-600 rounded-lg transition-all duration-200 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-600"> 
                                {{ num }} 
                            </a>
                            {% elif num == 1 or num == page_obj.paginator.num_pages %}
                            <a href="?page={{ num }}" class="flex items-center justify-center w-10 h-10 text-sm font-medium text-gray-700 hover:text-white hover:bg-gray-600 rounded-lg transition-all duration-200 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-600"> 
                                {{ num }} 
                            </a>
                            {% elif num == page_obj.number|add:'-4' or num == page_obj.number|add:'4' %}
                            <span class="ellipsis flex items-center justify-center w-10 h-10 text-sm font-medium text-gray-400 dark:text-gray-500"> 
                                ... 
                            </span>
                            {% endif %}
                        {% endfor %}
                        
                        {% if page_obj.has_next %} 
                        <a href="?page={{ page_obj.next_page_number }}" class="flex items-center justify-center w-10 h-10 text-sm font-medium text-gray-500 hover:text-white hover:bg-gray-600 rounded-lg transition-all duration-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600" title="Halaman Selanjutnya"> 
                            <i class="fas fa-angle-right"></i> 
                        </a> 
                        <a href="?page={{ page_obj.paginator.num_pages }}" class="flex items-center justify-center w-10 h-10 text-sm font-medium text-gray-500 hover:text-white hover:bg-gray-600 rounded-lg transition-all duration-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600" title="Halaman Terakhir"> 
                            <i class="fas fa-angle-double-right"></i> 
                        </a> 
                        {% else %}
                        <span class="flex items-center justify-center w-10 h-10 text-sm font-medium text-gray-300 dark:text-gray-600 cursor-not-allowed"> 
                            <i class="fas fa-angle-right"></i> 
                        </span>
                        <span class="flex items-center justify-center w-10 h-10 text-sm font-medium text-gray-300 dark:text-gray-600 cursor-not-allowed"> 
                            <i class="fas fa-angle-double-right"></i> 
                        </span>
                        {% 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 category
    function filterNews(categorySlug) { 
        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)
            chip.classList.add('bg-gray-100', 'text-gray-700');
            chip.classList.remove('bg-primary-600', 'text-white'); 
        }); 

        // Apply active classes to the clicked chip
        // The event object is assumed to be available or passed to the function in the real environment
        // Assuming 'event' is available globally from the inline 'onclick' handler in the template
        event.target.classList.add('active'); 
        event.target.classList.add('bg-primary-600', 'text-white'); 
        // FIX: Removed syntax error (extra quotes/comma)
        event.target.classList.remove('bg-gray-100', 'text-gray-700'); 

        // Filter news cards
        newsCards.forEach(card => { 
            const cardCategory = card.getAttribute('data-category'); 
            
            if (categorySlug === 'all' || cardCategory === categorySlug) { 
                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() { 
        // Set initial active state for desktop filters
        const desktopFilters = document.querySelectorAll('.filter-chip'); 
        desktopFilters.forEach(chip => { 
            // Check if the chip text includes "Semua" for the default active filter
            if (chip.textContent.includes('Semua')) { 
                chip.classList.add('active'); 
            } 
        }); 
    }); 
</script> 
{% endblock %}