{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Analisis Teras Strategik" %} — {{ bengkel.title }}{% endblock %}

{% block breadcrumb %}
    <a href="{% url 'bengkel:list' %}" class="text-blue-600 hover:underline text-xs font-bold">Pustaka Bengkel</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:detail' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">{{ bengkel.title|truncatechars:30 }}</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:overview_map' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Pusat Kawalan AI</a> <span class="mx-2 text-slate-400">/</span>
    <span class="text-slate-500 font-medium text-xs">Langkah 4: Teras Strategik</span>
{% endblock %}

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
    .radar-bg { background-image: radial-gradient(circle at center, #ecfdf5 0%, transparent 70%); }
</style>

<div class="animate-fade-up min-h-screen pb-10">
    <div class="max-w-[1600px] w-full mx-auto">
        
        <div class="relative overflow-hidden bg-gradient-to-br from-emerald-900 via-teal-800 to-cyan-900 rounded-2xl px-8 py-7 mb-8 shadow-lg">
            <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);background-size:24px 24px;"></div>
            
            <div class="relative flex flex-wrap justify-between items-center gap-4">
                <div class="flex items-center gap-4">
                    <a href="{% url 'bengkel:overview_map' pk=bengkel.pk %}" class="text-white/70 hover:text-white bg-white/10 hover:bg-white/20 w-10 h-10 rounded-full flex items-center justify-center transition shadow-sm border border-white/20 backdrop-blur-sm" title="Kembali ke Pusat Kawalan">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div>
                        <div class="inline-flex items-center gap-1.5 bg-emerald-500/20 border border-emerald-400/30 text-emerald-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-3">
                            <i class="fas fa-columns"></i> Synthesis & Formulation
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Strategic Pillars & Endorsement</h1>
                        <p class="text-white/70 text-sm mt-1">AI-driven overarching pillars encompassing endorsed themes, refined by participant inputs.</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="bg-teal-500/20 border border-teal-400/30 text-teal-100 text-xs font-bold px-4 py-2.5 rounded-xl backdrop-blur-sm flex items-center shadow-inner">
                        <i class="fas fa-check-double text-teal-400 mr-2"></i> Pillar Endorsement Active
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div id="btn-jana-pillar" onclick="janaPillarAI()" class="bg-emerald-50 p-5 rounded-xl shadow-sm border-2 border-emerald-200 cursor-pointer hover:border-emerald-500 hover:shadow-md transition group relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-10 group-hover:opacity-20 transition"><i class="fas fa-brain text-8xl text-emerald-500"></i></div>
                <div class="text-emerald-600 text-[10px] font-black uppercase tracking-widest mb-1 flex justify-between items-center relative z-10">
                    Tindakan Penganjur
                    <span class="text-[8px] bg-emerald-500 text-white px-1.5 py-0.5 rounded opacity-100 transition"><i class="fas fa-bolt"></i> Live AI</span>
                </div>
                <div class="text-2xl font-black text-emerald-800 relative z-10 mt-2">Jana Teras AI</div>
                <div class="text-[10px] text-emerald-600 font-bold mt-1 relative z-10">Sintesis Tema ke Teras Besar</div>
            </div>
            
            <div onclick="bukaModalInsight('modal-improvizations')" class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 cursor-pointer hover:border-teal-400 hover:shadow-md transition group relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5 group-hover:opacity-10 transition"><i class="fas fa-lightbulb text-8xl text-teal-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 flex justify-between items-center relative z-10">
                    Pillar Improvizations
                    <span class="text-[8px] bg-teal-50 text-teal-600 px-1.5 py-0.5 rounded transition animate-pulse"><i class="fas fa-bolt"></i> Live</span>
                </div>
                <div class="text-3xl font-black text-teal-600 relative z-10" id="live-jumlah-idea">{{ jumlah_idea }}</div>
                <div class="text-[10px] text-slate-500 mt-1 font-medium relative z-10">Re-learned by LLM Base</div>
            </div>
            
            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5"><i class="fas fa-poll text-8xl text-cyan-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 flex justify-between items-center relative z-10">
                    Total Endorsements
                    <span class="text-[8px] bg-cyan-50 text-cyan-600 px-1.5 py-0.5 rounded transition animate-pulse"><i class="fas fa-bolt"></i> Live</span>
                </div>
                <div class="text-3xl font-black text-cyan-600 relative z-10" id="live-jumlah-sokongan">{{ jumlah_sokongan }}</div>
                <div class="text-[10px] text-cyan-500 mt-1 font-bold relative z-10">Sokongan Peserta Teras</div>
            </div>
            
            <div class="bg-gradient-to-br from-emerald-50 to-teal-50 p-5 rounded-xl shadow-sm border border-emerald-100 cursor-pointer hover:shadow-md transition" onclick="maraKeFasaLima()">
                <div class="text-emerald-800 text-[10px] font-bold uppercase tracking-widest mb-1 flex items-center gap-1.5">
                    Ready for Strategy <i class="fas fa-lock-open text-[9px] text-emerald-500"></i>
                </div>
                <div class="text-3xl font-black text-emerald-700">Top {{ jumlah_pillar }}</div>
                <div class="text-[10px] text-emerald-500 mt-1 font-bold"><i class="fas fa-arrow-right"></i> Proceed to 30-Year Strategy</div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            
            <div class="lg:col-span-4 flex flex-col gap-6">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 radar-bg h-full">
                    <div class="flex justify-between items-center mb-4 border-b border-slate-100 pb-3">
                        <h3 class="font-bold text-sm text-slate-800"><i class="fas fa-poll text-emerald-500 mr-2"></i> Pillar Endorsement & Alignment</h3>
                        <span class="text-[9px] bg-teal-50 text-teal-600 border border-teal-100 font-bold px-2 py-1 rounded uppercase tracking-wider">Live</span>
                    </div>
                    <div class="relative h-[300px] w-full flex items-center justify-center">
                        <canvas id="grafPillar"></canvas>
                    </div>

                    <div class="mt-6 pt-4 border-t border-slate-100 space-y-3">
                        <div class="flex items-start gap-3">
                            <div class="w-1.5 h-10 bg-emerald-500 rounded-full shrink-0"></div>
                            <p class="text-[10px] text-slate-500 leading-tight"><strong class="text-slate-700 block mb-1">Theme Consolidation</strong> AI secara automatik mengelompokkan tema-tema berkaitan di bawah Teras Strategik utama.</p>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="w-1.5 h-10 bg-teal-500 rounded-full shrink-0"></div>
                            <p class="text-[10px] text-slate-500 leading-tight"><strong class="text-slate-700 block mb-1">Human-In-The-Loop (HITL)</strong> Peserta menambah <strong>{{ jumlah_idea }} idea skop baharu</strong>, membolehkan LKB memperhalusi definisi teras ini.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-8">
                <div class="flex justify-between items-center mb-5">
                    <h3 class="font-black text-xl text-slate-800 flex items-center"><i class="fas fa-columns text-emerald-600 mr-2"></i> {{ jumlah_pillar }} Teras Strategik Induk</h3>
                    <div class="flex gap-2">
                        <button onclick="pindahMuka(-1)" class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 hover:bg-emerald-100 hover:text-emerald-600 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed" id="btn-prev"><i class="fas fa-chevron-left"></i></button>
                        <span id="page-info" class="text-xs font-bold text-slate-500 flex items-center px-2">1/1</span>
                        <button onclick="pindahMuka(1)" class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 hover:bg-emerald-100 hover:text-emerald-600 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed" id="btn-next"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>

                <div class="grid grid-cols-1 xl:grid-cols-2 gap-4 pb-6 min-h-[400px]" id="bekas-kad-pillar">
                    {% for item in pillar_data %}
                    <div class="kad-penganjur bg-white rounded-xl shadow-sm border border-slate-200 border-l-4 border-l-emerald-500 p-5 hover:shadow-md hover:border-emerald-300 transition flex flex-col h-full animate-fade-up">
                        <div class="flex justify-between items-start mb-3 border-b border-slate-100 pb-3">
                            <span class="bg-emerald-50 text-emerald-700 font-black px-2 py-1 rounded text-[10px] uppercase">TERAS-0{{ item.obj.urutan }}</span>
                            <span class="bg-teal-50 text-teal-700 text-[10px] font-bold px-2 py-1 rounded-full border border-teal-100"><i class="fas fa-check-circle mr-1"></i> <span id="live-pillar-vote-{{ item.obj.id }}">{{ item.undi }}</span> Sokongan</span>
                        </div>
                        <h4 class="font-bold text-slate-800 text-sm leading-snug mb-2">{{ item.obj.teras }}</h4>
                        <p class="text-[11px] text-slate-500 leading-relaxed mb-4 flex-1">{{ item.obj.penerangan }}</p>

                        <div class="mb-3">
                            <span class="text-[8px] font-black text-slate-400 uppercase tracking-widest block mb-1">Merangkumi Tema:</span>
                            <div class="flex flex-wrap gap-1">
                                {% for tema_name in item.tema_list %}
                                    {% if tema_name %}
                                    <span class="bg-slate-100 text-slate-600 text-[9px] font-bold px-1.5 py-0.5 rounded">{{ tema_name }}</span>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>

                        {% if item.ideas %}
                        <div class="bg-emerald-50 p-3 rounded-lg border border-emerald-100 mt-auto relative">
                            <div class="flex justify-between items-start mb-2">
                                <strong class="text-emerald-800 uppercase tracking-widest text-[8px] font-black"><i class="fas fa-lightbulb mr-1"></i> {{ item.ideas.count }} Idea Skop Tambahan:</strong>
                                <button onclick="murnikanPillar(this, '{{ item.obj.id }}')" class="bg-teal-100 hover:bg-teal-200 text-teal-700 text-[9px] font-bold px-2 py-1 rounded transition flex items-center shadow-sm">
                                    <i class="fas fa-magic mr-1"></i> Refine AI
                                </button>
                            </div>
                            <ul class="space-y-1.5 mt-1">
                                {% for idea in item.ideas|slice:":2" %}
                                <li class="text-[10px] text-slate-600 flex gap-2">
                                    <i class="fas fa-comment-dots text-emerald-400 mt-0.5"></i>
                                    <span class="italic">"{{ idea.idea|truncatechars:60 }}"</span>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}
                    </div>
                    {% empty %}
                    <div class="col-span-full py-12 text-center border-2 border-dashed border-slate-300 rounded-xl bg-slate-50 kad-penganjur hidden">
                        <i class="fas fa-robot text-4xl text-slate-300 mb-3 block"></i>
                        <p class="text-slate-500 font-bold">Tiada Teras AI Dijana.</p>
                        <p class="text-xs text-slate-400">Sila tekan butang 'Jana Teras AI' di atas.</p>
                    </div>
                    {% endfor %}
                </div>
            </div>

<script>
    // LOGIK PAGINASI KAD (PENGANJUR)
    let currentTPage = 0;
    const cardsPerPage = 2; // Papar 2 kad serentak (kiri dan kanan)
    const allCards = document.querySelectorAll('.kad-penganjur:not(.hidden)');
    const totalPages = Math.ceil(allCards.length / cardsPerPage);

    function tunjukMukaSurat() {
        if(allCards.length === 0) return;
        allCards.forEach(c => c.style.display = 'none'); 
        
        let mula = currentTPage * cardsPerPage;
        let tamat = mula + cardsPerPage;
        
        for(let i=mula; i<tamat && i<allCards.length; i++) {
            allCards[i].style.display = 'flex'; 
        }
        
        document.getElementById('page-info').innerText = `${currentTPage + 1} / ${totalPages}`;
        document.getElementById('btn-prev').disabled = currentTPage === 0;
        document.getElementById('btn-next').disabled = currentTPage === totalPages - 1;
    }

    function pindahMuka(arah) {
        currentTPage += arah;
        if(currentTPage < 0) currentTPage = 0;
        if(currentTPage >= totalPages) currentTPage = totalPages - 1;
        tunjukMukaSurat();
    }

    window.addEventListener('DOMContentLoaded', () => tunjukMukaSurat());
</script>

        </div>
    </div>
</div>

<div id="modal-improvizations" class="fixed inset-0 bg-slate-900 bg-opacity-80 z-[1100] flex justify-center items-center backdrop-blur-sm p-4 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="modal-box bg-slate-50 rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col overflow-hidden transform scale-95 transition-transform duration-300">
        <div class="bg-gradient-to-r from-teal-900 to-teal-700 p-5 flex justify-between items-center text-white border-b-4 border-teal-500">
            <div>
                <h2 class="text-xl font-black flex items-center"><i class="fas fa-lightbulb text-teal-300 mr-2"></i> LKB Learning Log</h2>
                <p class="text-teal-200 text-xs mt-0.5">Audit trail of the {{ jumlah_idea }} new scope ideas ingested by the AI.</p>
            </div>
            <button onclick="tutupModalInsight('modal-improvizations')" class="bg-white/10 hover:bg-red-500 w-8 h-8 rounded-full transition flex items-center justify-center"><i class="fas fa-times"></i></button>
        </div>
        <div class="p-6 overflow-y-auto flex-1 bg-white">
            <table class="w-full text-left border-collapse text-xs">
                <thead class="bg-slate-100 text-slate-500 uppercase font-black tracking-widest text-[9px]">
                    <tr>
                        <th class="p-3 border-b border-slate-200">Timestamp</th>
                        <th class="p-3 border-b border-slate-200">Participant / SME</th>
                        <th class="p-3 border-b border-slate-200">Scope Idea Ingested</th>
                        <th class="p-3 border-b border-slate-200 text-center">AI Target</th>
                    </tr>
                </thead>
                <tbody>
                    {% for idea in semua_idea %}
                    <tr class="border-b border-slate-100 transition {% if '[BANTAHAN STRATEGIK]' in idea.idea %}bg-rose-50 hover:bg-rose-100{% else %}hover:bg-teal-50{% endif %}">
                        <td class="p-3 text-slate-400">{{ idea.created_at|date:"M d, h:i A" }}</td>
                        <td class="p-3 font-bold text-slate-700">{{ idea.user.get_full_name|default:idea.user.username }}</td>
                        <td class="p-3 italic text-slate-600">
                            {% if '[BANTAHAN STRATEGIK]' in idea.idea %}
                                <span class="bg-rose-200 text-rose-800 text-[8px] font-black px-1.5 py-0.5 rounded uppercase mr-1"><i class="fas fa-exclamation-triangle"></i> BANTAHAN</span>
                                <span class="text-rose-700">"{{ idea.idea|slice:'21:' }}"</span>
                            {% else %}
                                <span class="bg-teal-100 text-teal-800 text-[8px] font-black px-1.5 py-0.5 rounded uppercase mr-1"><i class="fas fa-lightbulb"></i> SKOP</span>
                                "{{ idea.idea|slice:'20:' }}"
                            {% endif %}
                        </td>
                        <td class="p-3 text-center"><span class="bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full font-bold text-[8px]">TERAS-0{{ idea.pillar.urutan }}</span></td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="4" class="p-5 text-center text-slate-400">Tiada input skop direkodkan.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    let chartPillarObj = null;

    window.addEventListener('DOMContentLoaded', () => {
        // Graf Bar Horizontal untuk Sokongan Teras (Dinamik)
        const grafLabels = JSON.parse('{{ graf_labels_json|escapejs }}');
        const grafData = JSON.parse('{{ graf_data_json|escapejs }}');

        const canvasPillar = document.getElementById('grafPillar');
        if (canvasPillar) {
            const ctxPillar = canvasPillar.getContext('2d');
            chartPillarObj = new Chart(ctxPillar, {
                type: 'bar',
                data: {
                    labels: grafLabels,
                    datasets: [{
                        label: 'Sokongan (Votes)',
                        data: grafData,
                        backgroundColor: [
                            'rgba(16, 185, 129, 0.8)', // Emerald
                            'rgba(20, 184, 166, 0.8)',  // Teal
                            'rgba(6, 182, 212, 0.8)'   // Cyan
                        ],
                        borderRadius: 8,
                        barThickness: 45
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { 
                        legend: { display: false }
                    },
                    scales: {
                        x: {
                            beginAtZero: true,
                            grid: { color: '#f1f5f9' },
                            ticks: { stepSize: 1 }
                        },
                        y: {
                            grid: { display: false },
                            ticks: { font: { size: 11, weight: 'bold' } }
                        }
                    }
                }
            });
        }

        // --- FUNGSI LIVE POLLING (Setiap 5 Saat) ---
        setInterval(() => {
            fetch("{% url 'bengkel:pillar_live_data_ajax' pk=bengkel.pk %}")
            .then(res => res.json())
            .then(data => {
                // Update Jumlah Keseluruhan
                const elIdea = document.getElementById('live-jumlah-idea');
                if(elIdea) elIdea.innerText = data.jumlah_idea;
                
                const elSokong = document.getElementById('live-jumlah-sokongan');
                if(elSokong) elSokong.innerText = data.jumlah_sokongan;
                
                // Update Graf Bar Mendatar
                if(chartPillarObj) {
                    chartPillarObj.data.labels = data.graf_labels;
                    chartPillarObj.data.datasets[0].data = data.graf_data;
                    chartPillarObj.update('none'); // Update tanpa kelip
                }

                // Update Undi pada setiap kad Teras
                for (const [pillarId, undiCount] of Object.entries(data.pillar_votes)) {
                    const elPillarVote = document.getElementById(`live-pillar-vote-${pillarId}`);
                    if(elPillarVote) {
                        elPillarVote.innerText = undiCount;
                    }
                }
            })
            .catch(err => console.log("Gagal menarik data live Teras:", err));
        }, 5000);
    });

    // FUNGSI MODAL INSIGHTS
    window.bukaModalInsight = function(modalId) {
        const modal = document.getElementById(modalId);
        if(modal) {
            const box = modal.querySelector('.modal-box');
            modal.classList.remove('pointer-events-none', 'opacity-0');
            box.classList.remove('scale-95');
        }
    };

    window.tutupModalInsight = function(modalId) {
        const modal = document.getElementById(modalId);
        if(modal) {
            const box = modal.querySelector('.modal-box');
            modal.classList.add('opacity-0');
            box.classList.add('scale-95');
            setTimeout(() => { modal.classList.add('pointer-events-none'); }, 300);
        }
    };

    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    async function janaPillarAI() {
        const btn = document.getElementById('btn-jana-pillar');
        if(!confirm("{% trans 'Arahkan AI merumuskan Tema-tema yang diundi kepada Teras Strategik Utama sekarang?' %}")) return;
        
        const originalContent = btn.innerHTML;
        btn.innerHTML = `<div class="text-center pt-2"><i class="fas fa-circle-notch fa-spin text-3xl text-emerald-500 mb-2"></i><br><span class="text-xs font-bold text-emerald-800">AI Mensintesis Teras...</span></div>`;
        btn.style.pointerEvents = "none";

        try {
            const response = await fetch("{% url 'bengkel:jana_pillar_penganjur_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' }
            });
            const data = await response.json();
            
            if(data.success) {
                alert("{% trans 'Berjaya!' %} " + data.mesej);
                location.reload(); 
            } else {
                alert("{% trans 'Ralat AI:' %} " + data.error);
                btn.innerHTML = originalContent;
                btn.style.pointerEvents = "auto";
            }
        } catch (error) {
            alert("{% trans 'Ralat rangkaian.' %}");
            btn.innerHTML = originalContent;
            btn.style.pointerEvents = "auto";
        }
    }

    async function murnikanPillar(btn, pillarId) {
        if(!confirm("{% trans 'Arahkan AI untuk menyerap idea skop tambahan peserta dan menulis semula Teras ini menjadi Versi 2.0?' %}")) return;
        
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Upg...';
        btn.disabled = true;

        try {
            const response = await fetch("{% url 'bengkel:murnikan_pillar_ai_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: { 
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}' 
                },
                body: JSON.stringify({ 'pillar_id': pillarId })
            });
            const data = await response.json();
            
            if(data.success) {
                alert("{% trans 'Teras Strategik berjaya dimurnikan (Versi 2.0)!' %}");
                location.reload(); 
            } else {
                alert("{% trans 'Info:' %} " + data.error);
                btn.innerHTML = originalHTML;
                btn.disabled = false;
            }
        } catch (error) {
            alert("{% trans 'Ralat rangkaian.' %}");
            btn.innerHTML = originalHTML;
            btn.disabled = false;
        }
    }

    // Fungsi Gatekeeper Penganjur membuka Langkah 5 (Semakan Strategi) bagi pihak peserta
    window.maraKeFasaLima = function() {
        fetch("{% url 'bengkel:unlock_blueprint_step' pk=bengkel.pk %}", {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ step: 5 })
        })
        .then(() => {
            window.location.href = "{% url 'bengkel:analisis_strategi' pk=bengkel.pk %}";
        })
        .catch(err => console.error("Gagal mengemas kini pintu sekatan makro fasa 5: ", err));
    };

    
</script>
{% endblock %}