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

{% block extra_css %} 
<style> 
    .category-hero { 
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); 
        color: white; 
    } 
    .document-card { 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        border: 1px solid #e5e7eb; 
    } 
    .document-card:hover { 
        transform: translateY(-4px); 
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
    } 
    .document-card { 
        border-color: #e5e7eb; /* Menggunakan border terang */
    } 
    .document-card:hover { 
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 0px 6px -2px rgba(0, 0, 0, 0.05); /* Mengurangi shadow hover */
    } 
    .category-badge { 
        padding: 0.25rem 0.75rem; 
        border-radius: 9999px; 
        font-size: 0.75rem; 
        font-weight: 600; 
    } 
    .category-profil_desa { background-color: #ecfdf5; color: #065f46; } 
    .category-data_kependudukan { background-color: #f0f9ff; color: #0369a1; } 
    .category-peta_desa { background-color: #fef2f2; color: #dc2626; } 
    .file-icon { 
        width: 48px; 
        height: 48px; 
        border-radius: 12px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        font-size: 1.5rem; 
        color: white; 
    } 
    .file-pdf { background: linear-gradient(135deg, #ef4444, #dc2626); } 
    .file-doc, .file-docx { background: linear-gradient(135deg, #3b82f6, #2563eb); } 
    .file-xls, .file-xlsx { background: linear-gradient(135deg, #10b981, #059669); } 
    .file-default { background: linear-gradient(135deg, #64748b, #475569); } 
    .stats-card { 
        background: rgba(255,255,255,0.1); /* Latar belakang semi transparan terang */
        backdrop-filter: blur(10px); 
        border: 1px solid rgba(255,255,255,0.2); 
    } 
    .category-section { 
        background: linear-gradient(135deg, #fffbeb, #fef3c7); 
        border: 1px solid #fde68a; 
    } 
    /* Menghilangkan kelas tema gelap yang tidak relevan */
    /* .document-card { border-color: #374151; } */ 
    /* .document-card:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); } */ 
    /* .stats-card { background: linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); border: 1px solid rgba(255,255,255,0.1); } */ 
    /* .category-section { background: linear-gradient(135deg, #92400e, #b45309); border: 1px solid #f59e0b; } */
</style> 
{% endblock extra_css %} 

{% block content %} 
<main>
    <!-- 1. HEADER / HERO SECTION -->
    <header class="relative h-64 sm:h-80 md:h-96 lg:h-[500px] overflow-hidden">
        {% if hero_image_url %}
        <img src="{{ hero_image_url }}" alt="Profil Desa Hero" class="w-full h-full object-cover">
        {% else %}
        <div class="w-full h-full bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center">
            <i class="fas fa-info-circle text-4xl sm:text-6xl text-white opacity-50"></i>
        </div>
        {% endif %}
        
        <div class="absolute bottom-0 left-0 right-0 p-4 sm:p-6 lg:p-8 text-white">
            <div class="max-w-7xl mx-auto text-center">
                <div class="inline-flex items-center px-4 py-2 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
                    <i class="fas fa-info-circle mr-2"></i> Profil Desa
                </div>
                <!-- H1 untuk judul utama halaman -->
                <h1 class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold mb-2 leading-tight text-white"> 
                    <i class="fas fa-info-circle mr-3"></i> Profil <span class="text-orange-400">Desa</span>
                </h1> 
                <p class="text-sm sm:text-base lg:text-lg opacity-90 max-w-3xl mx-auto text-white"> Akses data dan informasi lengkap Desa Pulosarok </p> 
                
                <!-- Quick Stats (Article/Details) --> 
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto mt-8"> 
                    <div class="bg-white/20 backdrop-blur-sm rounded-xl p-4"> 
                        <div class="text-2xl font-bold mb-1 text-white">{{ documents.paginator.count|default:0 }}</div> 
                        <div class="text-sm opacity-80 text-white">Total Dokumen</div> 
                    </div> 
                    <div class="bg-white/20 backdrop-blur-sm rounded-xl p-4"> 
                        <div class="text-2xl font-bold mb-1 text-white">{{ years|length|default:0 }}</div> 
                        <div class="text-sm opacity-80 text-white">Tahun Tersedia</div> 
                    </div> 
                    <div class="bg-white/20 backdrop-blur-sm rounded-xl p-4"> 
                        <div class="text-2xl font-bold mb-1 text-white">100%</div> 
                        <div class="text-sm opacity-80 text-white">Akurat</div> 
                    </div> 
                    <div class="bg-white/20 backdrop-blur-sm rounded-xl p-4"> 
                        <div class="text-2xl font-bold mb-1 text-white">24/7</div> 
                        <div class="text-sm opacity-80 text-white">Akses</div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </header> 

    <!-- 2. MAIN CONTENT AREA -->
    <section id="document-list-section" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> 

        <!-- Category Information (Section Block) --> 
        <section class="category-section rounded-2xl p-8 mb-8"> 
            <header class="text-center mb-8"> 
                <div class="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> 
                    <i class="fas fa-info-circle text-white text-3xl"></i> 
                </div> 
                <!-- H2 untuk sub-judul bagian -->
                <h2 class="text-2xl font-bold text-gray-900 mb-4"> Profil Desa Pulosarok </h2> 
                <p class="text-gray-700 max-w-3xl mx-auto"> Desa Pulosarok menyediakan berbagai dokumen profil dan data desa yang dapat diakses oleh masyarakat. Dokumen ini mencakup informasi geografis, demografis, dan profil lengkap desa untuk mendukung transparansi dan keterbukaan informasi publik. </p> 
            </header>
            
            <!-- Category Types (Article Cards) --> 
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> 
                <article class="bg-white rounded-xl p-6 text-center"> 
                    <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center mx-auto mb-4"> 
                        <i class="fas fa-home text-white text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk judul kategori -->
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Profil Desa</h3> 
                    <p class="text-sm text-gray-600">Informasi lengkap tentang desa</p> 
                </article> 
                <article class="bg-white rounded-xl p-6 text-center"> 
                    <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-4"> 
                        <i class="fas fa-users text-white text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk judul kategori -->
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Data Kependudukan</h3> 
                    <p class="text-sm text-gray-600">Data agregat penduduk desa</p> 
                </article> 
                <article class="bg-white rounded-xl p-6 text-center"> 
                    <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-red-600 rounded-full flex items-center justify-center mx-auto mb-4"> 
                        <i class="fas fa-map text-white text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk judul kategori -->
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Peta Desa</h3> 
                    <p class="text-sm text-gray-600">Peta wilayah dan batas desa</p> 
                </article> 
            </div> 
        </section> 

        <!-- Filter Section --> 
        <section id="filter-section" class="bg-white rounded-2xl p-6 mb-8 shadow-sm"> 
            <!-- H2 untuk judul bagian filter -->
            <h2 class="text-lg font-semibold text-gray-900 mb-4"> <i class="fas fa-filter text-orange-500 mr-2"></i> Filter Dokumen </h2> 
            <form method="get" class="grid grid-cols-1 md:grid-cols-3 gap-4"> 
                <div> 
                    <label for="search" class="block text-sm font-medium text-gray-700 mb-2">Pencarian</label> 
                    <input type="text" id="search" name="search" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent" placeholder="Cari dokumen..." value="{{ search }}"> 
                </div> 
                <div> 
                    <label for="year" class="block text-sm font-medium text-gray-700 mb-2">Tahun</label> 
                    <select id="year" name="year" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"> 
                        <option value="">Semua Tahun</option> 
                        {% for year in years %} 
                        <option value="{{ year }}" {% if selected_year == year|stringformat:"s" %}selected{% endif %}>{{ year }}</option> 
                        {% endfor %} 
                    </select> 
                </div> 
                <div class="flex items-end"> 
                    <button type="submit" class="w-full bg-gradient-to-r from-orange-600 to-orange-700 text-white px-4 py-2 rounded-lg font-semibold hover:from-orange-700 hover:to-orange-800 transition-all duration-300"> 
                        <i class="fas fa-search mr-2"></i>Filter 
                    </button> 
                </div> 
            </form> 
        </section> 

        <!-- Documents Grid --> 
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> 
            {% for document in documents %} 
            <article class="document-card bg-white rounded-xl p-6"> 
                <div class="flex items-start gap-4 mb-4"> 
                    <div class="file-icon file-{{ document.file|file_extension }}"> 
                        {% with ext=document.file|file_extension %} 
                        {% if ext == 'pdf' %} <i class="fas fa-file-pdf"></i> 
                        {% elif ext == 'doc' or ext == 'docx' %} <i class="fas fa-file-word"></i> 
                        {% elif ext == 'xls' or ext == 'xlsx' %} <i class="fas fa-file-excel"></i> 
                        {% else %} <i class="fas fa-file"></i> 
                        {% endif %} 
                        {% endwith %} 
                    </div> 
                    <div class="flex-1 min-w-0"> 
                        <header>
                            <div class="flex items-center gap-2 mb-2"> 
                                <span class="category-badge category-{{ document.category.category_type }}"> {{ document.category.name }} </span> 
                                <span class="text-xs text-gray-500">{{ document.document_year }}</span> 
                            </div> 
                            <!-- H3 untuk judul dokumen dalam daftar -->
                            <h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-2"> 
                                <a href="{% url 'documents:public_detail' document.slug %}" class="hover:text-orange-600 transition-colors"> 
                                    {{ document.title }} 
                                </a> 
                            </h3> 
                        </header>
                        {% if document.document_number %} 
                        <p class="text-sm text-gray-600 mb-2"> 
                            <i class="fas fa-hashtag mr-1"></i>{{ document.document_number }} 
                        </p> 
                        {% endif %} 
                        {% if document.summary %} 
                        <p class="text-sm text-gray-600 mb-3 line-clamp-2"> 
                            {{ document.summary }} 
                        </p> 
                        {% endif %} 
                    </div> 
                </div> 
                <div class="flex items-center justify-between text-sm text-gray-500 mb-4"> 
                    <div class="flex items-center gap-4"> 
                        <span><i class="fas fa-eye mr-1"></i>{{ document.view_count }}</span> 
                        <span><i class="fas fa-download mr-1"></i>{{ document.download_count }}</span> 
                    </div> 
                    <span>{{ document.created_at|date:"d M Y" }}</span> 
                </div> 
                <footer>
                    <div class="flex gap-2"> 
                        <a href="{% url 'documents:public_detail' document.slug %}" class="flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-blue-700 transition-colors text-center"> 
                            <i class="fas fa-eye mr-1"></i>Lihat 
                        </a> 
                        <a href="{% url 'documents:public_download' document.slug %}" class="flex-1 bg-orange-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-orange-700 transition-colors text-center"> 
                            <i class="fas fa-download mr-1"></i>Download 
                        </a> 
                    </div> 
                </footer>
            </article> 
            {% empty %} 
            <div class="col-span-full"> 
                <div class="bg-white rounded-xl p-12 text-center"> 
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4"> 
                        <i class="fas fa-file-slash text-gray-400 text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk pesan kosong -->
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">Tidak Ada Dokumen</h3> 
                    <p class="text-gray-600 mb-6"> Belum ada dokumen profil desa yang tersedia. </p> 
                    <a href="{% url 'documents:public_list' %}" class="bg-gradient-to-r from-orange-600 to-orange-700 text-white px-6 py-3 rounded-lg font-semibold hover:from-orange-700 hover:to-orange-800 transition-all duration-300"> 
                        <i class="fas fa-list mr-2"></i>Lihat Semua Dokumen 
                    </a> 
                </div> 
            </div> 
            {% endfor %} 
        </div> 

        <!-- Pagination --> 
        {% if documents.has_other_pages %} 
        <div class="mt-8"> 
            <div class="flex justify-center"> 
                <nav class="flex items-center space-x-2" aria-label="Pagination"> 
                    {% if documents.has_previous %} 
                    <a href="?page=1{% if search %}&search={{ search }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md hover:bg-gray-50">
                        <i class="fas fa-angle-double-left"></i> 
                    </a> 
                    <a href="?page={{ documents.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 hover:bg-gray-50">
                        <i class="fas fa-angle-left"></i> 
                    </a> 
                    {% endif %} 
                    {% for num in documents.paginator.page_range %} 
                    {% if documents.number == num %} 
                    <span aria-current="page" class="px-3 py-2 text-sm font-medium text-white bg-orange-600 border border-orange-600">{{ num }}</span> 
                    {% elif num > documents.number|add:'-3' and num < documents.number|add:'3' %} 
                    <a href="?page={{ num }}{% if search %}&search={{ search }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 hover:bg-gray-50">{{ num }}</a> 
                    {% endif %} 
                    {% endfor %} 
                    {% if documents.has_next %} 
                    <a href="?page={{ documents.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 hover:bg-gray-50">
                        <i class="fas fa-angle-right"></i> 
                    </a> 
                    <a href="?page={{ documents.paginator.num_pages }}{% if search %}&search={{ search }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50">
                        <i class="fas fa-angle-double-right"></i> 
                    </a> 
                    {% endif %} 
                </nav> 
            </div> 
        </div> 
        {% endif %} 

        <!-- Quick Access / FOOTER --> 
        <div class="mt-16"> 
            <!-- H2 untuk sub-judul bagian -->
            <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center"> 
                <i class="fas fa-external-link-alt text-orange-500 mr-2"></i> Akses Cepat 
            </h2> 
            <footer class="grid grid-cols-1 md:grid-cols-3 gap-6"> 
                <a href="{% url 'documents:public_list' %}" class="document-card bg-white rounded-xl p-6 text-center group"> 
                    <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"> 
                        <i class="fas fa-list text-white text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk judul akses cepat -->
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Semua Dokumen</h3> 
                    <p class="text-sm text-gray-600">Lihat semua dokumen transparansi</p> 
                </a> 
                <a href="{% url 'documents:transparansi_anggaran' %}" class="document-card bg-white rounded-xl p-6 text-center group"> 
                    <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"> 
                        <i class="fas fa-chart-pie text-white text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk judul akses cepat -->
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Transparansi Anggaran</h3> 
                    <p class="text-sm text-gray-600">Dokumen anggaran dan keuangan</p> 
                </a> 
                <a href="{% url 'documents:produk_hukum' %}" class="document-card bg-white rounded-xl p-6 text-center group"> 
                    <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"> 
                        <i class="fas fa-gavel text-white text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk judul akses cepat -->
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Produk Hukum</h3> 
                    <p class="text-sm text-gray-600">Peraturan dan keputusan desa</p> 
                </a> 
            </footer>
        </div> 
    </section> 
</main>

{% endblock content %} 

{% block extra_js %} 
<script> 
    document.addEventListener('DOMContentLoaded', function() { 
        // Auto-submit form on filter change 
        const filterSelects = document.querySelectorAll('#year'); 
        filterSelects.forEach(select => { 
            select.addEventListener('change', function() { 
                this.form.submit(); 
            }); 
        }); 
        
        // Add smooth scrolling for internal links 
        const links = document.querySelectorAll('a[href^="#"]'); 
        links.forEach(link => { 
            link.addEventListener('click', function(e) { 
                e.preventDefault(); 
                const target = document.querySelector(this.getAttribute('href')); 
                if (target) { 
                    target.scrollIntoView({ behavior: 'smooth' }); 
                } 
            }); 
        }); 
    }); 
</script> 
{% endblock extra_js %}