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

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

{% block meta_description %}{{ news.meta_description|default:news.excerpt|default:news.content|truncatechars:160 }}{% endblock %}

{% block og_title %}{{ news.title }}{% endblock %}
{% block og_description %}{{ news.meta_description|default:news.excerpt|default:news.content|truncatechars:160 }}{% endblock %}
{% block og_image %}{% if news.featured_image %}{{ news.featured_image.url }}{% elif website_settings.site_logo %}{{ website_settings.site_logo.url }}{% endif %}{% endblock %}

{% block extra_css %}
<style>
    /* * Kustomisasi tampilan konten berita 
     * Ini penting untuk memastikan konten dinamis dari Rich Text Editor terlihat bagus
     */
    .news-content {
        line-height: 1.8;
        font-size: 1.1rem;
        color: #374151; /* light mode text color */
    }

    .dark .news-content {
        color: #d1d5db; /* dark mode text color */
    }

    /* Summernote content styling - ensure proper rendering */
    .news-content * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Reset any conflicting styles for Summernote content */
    .news-content div[style] {
        display: block !important;
    }

    .news-content p[style] {
        display: block !important;
    }

    .news-content h1[style], .news-content h2[style], .news-content h3[style],
    .news-content h4[style], .news-content h5[style], .news-content h6[style] {
        display: block !important;
    }

    /* Headings */
    .news-content h1, .news-content h2, .news-content h3, 
    .news-content h4, .news-content h5, .news-content h6 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        font-weight: 600;
        color: #1f2937;
        line-height: 1.3;
    }

    .dark .news-content h1, .dark .news-content h2, .dark .news-content h3,
    .dark .news-content h4, .dark .news-content h5, .dark .news-content h6 {
        color: #f9fafb;
    }

    .news-content h1 { font-size: 2.25rem; }
    .news-content h2 { font-size: 1.875rem; }
    .news-content h3 { font-size: 1.5rem; }
    .news-content h4 { font-size: 1.25rem; }
    .news-content h5 { font-size: 1.125rem; }
    .news-content h6 { font-size: 1rem; }

    /* Paragraphs */
    .news-content p {
        margin-bottom: 1.5rem;
        line-height: 1.8;
    }

    /* Images */
    .news-content img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
        margin: 2rem 0;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .dark .news-content img {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    }

    /* Blockquotes */
    .news-content blockquote {
        border-left: 4px solid #3b82f6;
        padding-left: 1.5rem;
        margin: 2rem 0;
        font-style: italic;
        background: linear-gradient(to right, rgba(59, 130, 246, 0.1), transparent);
        padding: 1.5rem 1.5rem 1.5rem 2rem;
        border-radius: 0 8px 8px 0;
        color: #4b5563;
    }

    .dark .news-content blockquote {
        background: linear-gradient(to right, rgba(59, 130, 246, 0.2), transparent);
        color: #9ca3af;
        border-left-color: #60a5fa;
    }

    /* Lists */
    .news-content ul, .news-content ol {
        margin: 1.5rem 0;
        padding-left: 2rem;
    }

    .news-content li {
        margin-bottom: 0.75rem;
        line-height: 1.7;
    }

    .news-content ul {
        list-style-type: disc;
    }

    .news-content ol {
        list-style-type: decimal;
    }

    /* Links */
    .news-content a {
        color: #3b82f6;
        text-decoration: underline;
        transition: color 0.2s ease;
    }

    .news-content a:hover {
        color: #2563eb;
    }

    .dark .news-content a {
        color: #60a5fa;
    }

    .dark .news-content a:hover {
        color: #93c5fd;
    }

    /* Tables */
    .news-content table {
        border-collapse: collapse;
        width: 100%;
        margin: 2rem 0;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .news-content table td, .news-content table th {
        border: 1px solid #e5e7eb;
        padding: 12px 16px;
        text-align: left;
    }

    .dark .news-content table td, .dark .news-content table th {
        border-color: #374151;
    }

    .news-content table th {
        background: #f3f4f6;
        font-weight: 600;
        color: #1f2937;
    }

    .dark .news-content table th {
        background: #374151;
        color: #f9fafb;
    }

    .news-content table tbody tr:nth-child(even) {
        background: #f9fafb;
    }

    .dark .news-content table tbody tr:nth-child(even) {
        background: #1f2937;
    }

    /* Code */
    .news-content pre {
        background: #1f2937;
        color: #f9fafb;
        border-radius: 8px;
        padding: 1.5rem;
        margin: 2rem 0;
        overflow-x: auto;
        font-family: 'Courier New', monospace;
        font-size: 0.875rem;
        line-height: 1.6;
    }

    .dark .news-content pre {
        background: #111827;
    }

    .news-content code {
        background: #f3f4f6;
        color: #ef4444;
        padding: 0.2rem 0.4rem;
        border-radius: 4px;
        font-family: 'Courier New', monospace;
        font-size: 0.875rem;
    }

    .dark .news-content code {
        background: #374151;
        color: #fca5a5;
    }

    /* Horizontal Rule */
    .news-content hr {
        border: none;
        border-top: 2px solid #e5e7eb;
        margin: 3rem 0;
    }

    .dark .news-content hr {
        border-top-color: #374151;
    }

    /* Videos */
    .news-content iframe {
        max-width: 100%;
        border-radius: 12px;
        margin: 2rem 0;
    }

    /* Strong and Em */
    .news-content strong {
        font-weight: 700;
        color: #111827;
    }

    .dark .news-content strong {
        color: #f9fafb;
    }

    .news-content em {
        font-style: italic;
    }

    /* Komponen Kustom */
    .share-buttons {
        position: sticky;
        top: 100px;
    }

    .share-button {
        transition: all 0.3s ease;
    }

    .share-button:hover {
        transform: translateY(-2px);
    }

    .comment-form {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(16, 185, 129, 0.05));
    }

    .dark .comment-form {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    }

    .comment-item {
        border-left: 3px solid var(--primary-color);
    }

    .author-card {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    }

    .dark .author-card {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.2));
    }

    .related-news-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    .dark .related-news-card:hover {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    }

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

    @media (max-width: 640px) {
        .share-buttons {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 50;
        }

        .share-buttons .flex {
            flex-direction: column;
            gap: 0.5rem;
        }

        .share-button {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    }
</style>
{% endblock %}

{% block content %}
<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">
        
        <article class="lg:w-2/3">
            
            <header class="mb-8">
                
                {# Metadata dan Badge #}
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center space-x-4">
                        <a href="{% url 'news:by_category' news.category.slug %}" class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium text-white" style="background-color: {{ news.category.color }}">
                            <i class="fas fa-tag mr-2"></i>{{ news.category.name }}
                        </a>
                        {% if news.is_featured %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-500 text-white">
                            <i class="fas fa-star mr-1"></i>Berita Utama
                        </span>
                        {% endif %}
                        {% if news.is_breaking %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-500 text-white">
                            <i class="fas fa-bolt mr-1"></i>Breaking News
                        </span>
                        {% endif %}
                    </div>
                    
                    <div class="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
                        <span class="flex items-center">
                            <i class="fas fa-eye mr-1"></i>{{ news.views_count }} views
                        </span>
                        <span class="flex items-center">
                            <i class="fas fa-comment mr-1"></i>{{ news.comments_count }} komentar
                        </span>
                        <span class="flex items-center">
                            <i class="fas fa-clock mr-1"></i>{{ news.reading_time }} min baca
                        </span>
                    </div>
                </div>
                
                
                {# Judul Berita #}
                <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4 leading-tight">
                    {{ news.title }}
                </h1>
                
                
                {# Cuplikan (Excerpt) #}
                {% if news.excerpt %}
                <div class="text-lg text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
                    {{ news.excerpt|safe }}
                </div>
                {% endif %}
                
                
                {# Info Penulis dan Tanggal #}
                <div class="flex items-center justify-between py-4 border-t border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center">
                                <i class="fas fa-user text-white"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-900 dark:text-white">{{ news.author.get_full_name|default:news.author.username }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Penulis</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-right">
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            <i class="fas fa-calendar mr-1"></i>
                            {{ news.published_date|date:"d F Y" }}
                        </p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            <i class="fas fa-clock mr-1"></i>
                            {{ news.published_date|date:"H:i" }} WIB
                        </p>
                    </div>
                </div>
            </header>
            
            
            {# Gambar Unggulan #}
            {% if news.featured_image %}
            <div class="mb-8">
                <img src="{{ news.featured_image.url }}" alt="{{ news.featured_image_alt|default:news.title }}" class="news-image w-full rounded-xl shadow-lg">
                {% if news.featured_image_alt %}
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 italic">{{ news.featured_image_alt }}</p>
                {% endif %}
            </div>
            {% endif %}
            
            
            {# Embed YouTube #}
            {% if news.youtube_url %}
            <div class="mb-8">
                {{ news.youtube_url|youtube_embed }}
            </div>
            {% endif %}
            
            
            {# Konten Berita Utama #}
            <div class="news-content prose prose-lg max-w-none text-gray-700 dark:text-gray-300">
                {{ news.content|safe }}
            </div>
            
            
            {# Tag #}
            {% if news.tags.exists %}
            <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-hashtag mr-2 text-primary-600"></i>Tag
                </h3>
                <div class="flex flex-wrap gap-2">
                    {% for tag in news.tags.all %}
                    <a href="{% url 'news:by_tag' tag.slug %}" class="inline-flex items-center px-3 py-1.5 text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-primary-100 dark:hover:bg-primary-900 hover:text-primary-700 dark:hover:text-primary-300 transition-colors duration-200">
                        #{{ tag.name }}
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            
            
            {# Tombol Bagikan Mobile/Desktop Bawah #}
            <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 lg:hidden">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-share-alt mr-2 text-primary-600"></i>Bagikan
                </h3>
                <div class="flex flex-wrap gap-3">
                    <button onclick="shareOnFacebook()" class="share-button inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                        <i class="fab fa-facebook-f mr-2"></i>Facebook
                    </button>
                    <button onclick="shareOnTwitter()" class="share-button inline-flex items-center px-4 py-2 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition-colors duration-200">
                        <i class="fab fa-twitter mr-2"></i>Twitter
                    </button>
                    <button onclick="shareOnWhatsApp()" class="share-button inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200">
                        <i class="fab fa-whatsapp mr-2"></i>WhatsApp
                    </button>
                    <button onclick="copyLink()" class="share-button inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200">
                        <i class="fas fa-link mr-2"></i>Copy Link
                    </button>
                </div>
            </div>
        </article>
        
        
        {# Sidebar #}
        <aside class="lg:w-1/3">
            
            {# Kartu Penulis (Added dark theme classes) #}
            <div class="author-card rounded-xl p-6 mb-6 bg-white dark:bg-gray-800 shadow-lg">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-user mr-2 text-primary-600"></i>Tentang Penulis
                </h3>
                <div class="flex items-center space-x-3 mb-4">
                    <div class="w-12 h-12 bg-primary-600 rounded-full flex items-center justify-center">
                        <i class="fas fa-user text-white"></i>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-900 dark:text-white">{{ news.author.get_full_name|default:news.author.username }}</h4>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Penulis</p>
                    </div>
                </div>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    Penulis artikel ini dari tim redaksi Desa Pulosarok.
                </p>
            </div>
            
            
            {# Berita Terkait (Added dark theme classes) #}
            {% if related_news %}
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-newspaper mr-2 text-primary-600"></i>Berita Terkait
                </h3>
                <div class="space-y-4">
                    {% for related in related_news %}
                    <article class="related-news-card bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                        <div class="flex space-x-3">
                            {% if related.featured_image %}
                            <img src="{{ related.featured_image.url }}" alt="{{ related.title }}" class="w-16 h-16 object-cover rounded-lg flex-shrink-0">
                            {% else %}
                            <div class="w-16 h-16 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-newspaper text-white text-sm"></i>
                            </div>
                            {% endif %}
                            <div class="flex-1 min-w-0">
                                <h4 class="text-sm font-medium text-gray-900 dark:text-white line-clamp-2 mb-1">
                                    <a href="{% url 'news:detail' related.slug %}" class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200">
                                        {{ related.title }}
                                    </a>
                                </h4>
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ related.published_date|date:"d M Y" }}
                                </p>
                            </div>
                        </div>
                    </article>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            
            
            {# Tombol Bagikan Desktop (Sticky) #}
            <div class="hidden lg:block">
                <div class="share-buttons">
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                            <i class="fas fa-share-alt mr-2 text-primary-600"></i>Bagikan
                        </h3>
                        <div class="flex flex-col space-y-3">
                            <button onclick="shareOnFacebook()" class="share-button flex items-center justify-center w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                                <i class="fab fa-facebook-f mr-2"></i>Facebook
                            </button>
                            <button onclick="shareOnTwitter()" class="share-button flex items-center justify-center w-full px-4 py-3 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition-colors duration-200">
                                <i class="fab fa-twitter mr-2"></i>Twitter
                            </button>
                            <button onclick="shareOnWhatsApp()" class="share-button flex items-center justify-center w-full px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200">
                                <i class="fab fa-whatsapp mr-2"></i>WhatsApp
                            </button>
                            <button onclick="copyLink()" class="share-button flex items-center justify-center w-full px-4 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200">
                                <i class="fas fa-link mr-2"></i>Copy Link
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
    </div>
    
    
    {# Bagian Komentar #}
    {% if news.allow_comments %}
    <div class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
        <div class="max-w-4xl">
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">
                <i class="fas fa-comments mr-2 text-primary-600"></i>Komentar ({{ news.comments_count }})
            </h3>
            
            
            {# Form Komentar #}
            <div class="comment-form rounded-xl p-6 mb-8 dark:bg-gray-800/50">
                <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Tulis Komentar</h4>
                <form method="post" action="{% url 'news:add_comment' news.slug %}">
                    {% csrf_token %}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label for="author_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama</label>
                            <input type="text" name="author_name" id="author_name" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
                        </div>
                        <div>
                            <label for="author_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
                            <input type="email" name="author_email" id="author_email" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Komentar</label>
                        <textarea name="content" id="content" rows="4" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-gray-700 dark:text-white"></textarea>
                    </div>
                    <button type="submit" class="inline-flex items-center px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
                        <i class="fas fa-paper-plane mr-2"></i>Kirim Komentar
                    </button>
                </form>
            </div>
            
            
            {# Daftar Komentar #}
            <div class="space-y-6">
                {% for comment in comments %}
                <div class="comment-item bg-white dark:bg-gray-800 rounded-lg p-4 pl-6 shadow-md">
                    <div class="flex items-start justify-between mb-2">
                        <div class="flex items-center space-x-3">
                            <div class="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-user text-white text-xs"></i>
                            </div>
                            <div>
                                <h5 class="font-medium text-gray-900 dark:text-white">{{ comment.author_name }}</h5>
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ comment.created_at|date:"d M Y, H:i" }}</p>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-700 dark:text-gray-300 ml-11 mt-2">{{ comment.content }}</p>
                </div>
                {% empty %}
                <div class="text-center py-8">
                    <i class="fas fa-comments text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
                    <p class="text-gray-500 dark:text-gray-400">Belum ada komentar. Jadilah yang pertama berkomentar!</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Fungsi untuk membagikan konten di media sosial
    function shareOnFacebook() {
        const url = encodeURIComponent(window.location.href);
        const title = encodeURIComponent('{{ news.title }}');
        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}&quote=${title}`, '_blank', 'width=600,height=400');
    }

    function shareOnTwitter() {
        const url = encodeURIComponent(window.location.href);
        const title = encodeURIComponent('{{ news.title }}');
        window.open(`https://twitter.com/intent/tweet?url=${url}&text=${title}`, '_blank', 'width=600,height=400');
    }

    function shareOnWhatsApp() {
        const url = encodeURIComponent(window.location.href);
        const title = encodeURIComponent('{{ news.title }}');
        window.open(`https://wa.me/?text=${title}%20${url}`, '_blank');
    }

    // Fungsi untuk menyalin tautan (link) ke clipboard
    function copyLink() {
        // Menggunakan document.execCommand('copy') sebagai fallback jika navigator.clipboard tidak tersedia
        const tempInput = document.createElement('input');
        tempInput.value = window.location.href;
        document.body.appendChild(tempInput);
        tempInput.select();
        document.execCommand('copy');
        document.body.removeChild(tempInput);

        // Menampilkan pesan sukses
        const button = event.target.closest('button');
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check mr-2"></i>Link Disalin!';
        button.classList.add('bg-green-600', 'hover:bg-green-700');
        button.classList.remove('bg-gray-600', 'hover:bg-gray-700');

        setTimeout(function() {
            button.innerHTML = originalText;
            button.classList.remove('bg-green-600', 'hover:bg-green-700');
            button.classList.add('bg-gray-600', 'hover:bg-gray-700');
        }, 2000);
    }

    // Lacak tampilan (view) saat dokumen dimuat
    document.addEventListener('DOMContentLoaded', function() {
        // Simple view tracking - menggunakan GET request untuk menghindari error 405
        console.log('Berita dibuka:', '{{ news.title }}');
        // View tracking bisa diimplementasikan dengan AJAX GET request atau server-side
    });
</script>
{% endblock %}