{% extends "base.html" %}
{% block title %}Trends Discovery - Viral Social Pro{% endblock %}
{% block nav_trends_discovery %}active{% endblock %}
{% block page_title %}Trends Discovery{% endblock %}
{% block page_subtitle %}Trending TikTok & YouTube Shorts em tempo real{% endblock %}

{% block content %}
<div x-data="trendsDiscoveryApp()" x-init="init()" class="space-y-5">

    <!-- Header + Controls -->
    <div class="glass-card rounded-2xl overflow-hidden animate-fade-up">
        <div class="p-5 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl gradient-fire flex items-center justify-center flex-shrink-0">
                    <i data-lucide="flame" class="w-6 h-6 text-white"></i>
                </div>
                <div>
                    <h1 class="text-xl md:text-2xl font-bold text-white">Trends Discovery</h1>
                    <p class="text-sm text-white/40 mt-0.5">Videos em alta no TikTok e YouTube Shorts</p>
                </div>
            </div>
            <div class="flex items-center gap-3 flex-wrap">
                <div class="glass-light rounded-xl px-4 py-2 text-sm">
                    <span class="text-white/50"><span class="text-orange-400 font-bold" x-text="status.credits_today || 0"></span> creditos hoje</span>
                    <span class="text-white/20 mx-2">|</span>
                    <span class="text-white/50"><span class="text-brand-300 font-bold" x-text="total"></span> videos</span>
                </div>
                <button @click="runTrendsScan()" :disabled="scanning"
                        class="px-4 py-2.5 rounded-xl gradient-fire text-white font-semibold text-sm hover:opacity-90 transition flex items-center gap-2 disabled:opacity-50">
                    <i data-lucide="flame" class="w-4 h-4" :class="scanning && 'animate-spin'"></i>
                    <span x-text="scanning ? 'Buscando...' : 'Buscar Trends'"></span>
                </button>
            </div>
        </div>

        <!-- Automation Toggle -->
        <div class="border-t border-white/5 p-4 flex flex-col md:flex-row md:items-center gap-4">
            <div class="flex items-center gap-3">
                <label class="text-sm text-white/60 flex items-center gap-2">
                    <i data-lucide="timer" class="w-4 h-4 text-brand-300"></i> Automacao
                </label>
                <button @click="toggleAutomation()"
                        class="relative w-12 h-6 rounded-full transition-colors duration-200"
                        :class="autoEnabled ? 'bg-emerald-500' : 'bg-white/10'">
                    <span class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white transition-transform duration-200"
                          :class="autoEnabled && 'translate-x-6'"></span>
                </button>
                <span class="text-xs font-bold" :class="autoEnabled ? 'text-emerald-400' : 'text-white/30'" x-text="autoEnabled ? 'LIGADA' : 'DESLIGADA'"></span>
            </div>
            <div class="flex items-center gap-2" x-show="autoEnabled">
                <span class="text-xs text-white/40">Intervalo:</span>
                <select x-model.number="autoInterval" @change="updateAutomation()" class="bg-white/5 border border-white/10 rounded-lg px-2 py-1 text-xs text-white/70 outline-none">
                    <option value="10">10 min</option>
                    <option value="15">15 min</option>
                    <option value="30">30 min</option>
                    <option value="60">1 hora</option>
                </select>
                <span class="text-[10px] text-white/30 ml-2">~<span x-text="Math.floor(1440/autoInterval * 2)"></span> creditos/dia</span>
            </div>
            <!-- Last run info -->
            <div class="flex-1 text-right" x-show="status.last_run">
                <span class="text-[10px] text-white/30">Ultimo scan: <span x-text="timeAgo(status.last_run)"></span></span>
                <span class="text-[10px] text-white/30 ml-2" x-show="status.last_tiktok_found">TT: <span class="text-white/50" x-text="status.last_tiktok_found"></span></span>
                <span class="text-[10px] text-white/30 ml-2" x-show="status.last_youtube_found">YT: <span class="text-white/50" x-text="status.last_youtube_found"></span></span>
                <span class="text-[10px] text-white/30 ml-2">Total runs: <span class="text-white/50" x-text="status.total_runs || 0"></span></span>
            </div>
        </div>
    </div>

    <!-- KPI Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 animate-fade-up-delay">
        <div class="glass-card rounded-xl p-4 text-center">
            <p class="stat-number text-brand-300" x-text="total"></p>
            <p class="text-[10px] text-white/40 mt-1">Videos Totais</p>
        </div>
        <div class="glass-card rounded-xl p-4 text-center">
            <p class="stat-number text-orange-400" x-text="status.last_videos_saved || 0"></p>
            <p class="text-[10px] text-white/40 mt-1">Ultimo Scan</p>
        </div>
        <div class="glass-card rounded-xl p-4 text-center">
            <p class="stat-number text-cyan-400" x-text="status.last_credits_used || 0"></p>
            <p class="text-[10px] text-white/40 mt-1">Creditos Ultimo</p>
        </div>
        <div class="glass-card rounded-xl p-4 text-center">
            <p class="stat-number text-emerald-400" x-text="status.total_runs || 0"></p>
            <p class="text-[10px] text-white/40 mt-1">Total Scans</p>
        </div>
    </div>

    <!-- Platform Tabs + Search -->
    <div class="space-y-3 animate-fade-up-delay">
        <div class="flex flex-wrap items-center gap-3">
            <div class="flex gap-1 bg-white/5 rounded-xl p-1">
                <button @click="filters.platform=''; applyFilters()" class="tab-btn" :class="filters.platform==='' && 'active'">Todos</button>
                <button @click="filters.platform='tiktok'; applyFilters()" class="tab-btn" :class="filters.platform==='tiktok' && 'active'">TikTok</button>
                <button @click="filters.platform='youtube'; applyFilters()" class="tab-btn" :class="filters.platform==='youtube' && 'active'">YouTube</button>
            </div>
            <!-- Search -->
            <div class="flex-1 min-w-[200px] flex items-center glass-light rounded-xl px-3 py-2">
                <i data-lucide="search" class="w-4 h-4 text-white/30 mr-2 flex-shrink-0"></i>
                <input type="text" x-model="filters.description_contains" @keyup.enter="applyFilters()" placeholder="Buscar por titulo, descricao..." class="bg-transparent border-none outline-none text-sm text-white/80 placeholder:text-white/25 w-full">
            </div>
            <!-- Sort -->
            <select x-model="filters.sort_by" @change="applyFilters()" class="bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-xs text-white/70 outline-none">
                <option value="collected">Mais Recentes</option>
                <option value="viral_score">Viral Score</option>
                <option value="views">Views</option>
                <option value="likes">Likes</option>
                <option value="engagement">Engagement</option>
            </select>
        </div>
        <!-- Quick Filters -->
        <div class="flex flex-wrap gap-2">
            <button @click="applyPreset('all')"
                    class="px-3 py-1.5 rounded-lg text-xs font-bold transition"
                    :class="activePreset === 'all' ? 'bg-brand-500 text-white shadow-lg shadow-brand-500/30' : 'glass-light text-brand-400 hover:bg-brand-500/20'">
                Todos
            </button>
            <button @click="applyPreset('mega_viral')"
                    class="px-3 py-1.5 rounded-lg text-xs font-bold transition"
                    :class="activePreset === 'mega_viral' ? 'bg-red-500 text-white shadow-lg shadow-red-500/30' : 'glass-light text-red-400 hover:bg-red-500/20'">
                MEGA VIRAL
            </button>
            <button @click="applyPreset('high_views')"
                    class="px-3 py-1.5 rounded-lg text-xs font-bold transition"
                    :class="activePreset === 'high_views' ? 'bg-orange-500 text-white shadow-lg shadow-orange-500/30' : 'glass-light text-orange-400 hover:bg-orange-500/20'">
                +1M Views
            </button>
            <button @click="applyPreset('recent')"
                    class="px-3 py-1.5 rounded-lg text-xs font-bold transition"
                    :class="activePreset === 'recent' ? 'bg-yellow-500 text-black shadow-lg shadow-yellow-500/30' : 'glass-light text-yellow-400 hover:bg-yellow-500/20'">
                Ultimas 24h
            </button>
            <button @click="applyPreset('short')"
                    class="px-3 py-1.5 rounded-lg text-xs font-bold transition"
                    :class="activePreset === 'short' ? 'bg-cyan-500 text-white shadow-lg shadow-cyan-500/30' : 'glass-light text-cyan-400 hover:bg-cyan-500/20'">
                Shorts (&lt;60s)
            </button>
            <button @click="applyPreset('shop')"
                    class="px-3 py-1.5 rounded-lg text-xs font-bold transition"
                    :class="activePreset === 'shop' ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/30' : 'glass-light text-emerald-400 hover:bg-emerald-500/20'">
                Com Produto
            </button>
        </div>
    </div>

    <!-- Filter Bar (inline) -->
    <div class="glass-card rounded-xl p-3">
        <div class="flex flex-wrap items-center gap-3">
            <div class="flex items-center gap-2">
                <span class="text-[10px] text-white/40">Views min:</span>
                <div class="flex gap-1">
                    <template x-for="v in [0, 50000, 100000, 500000, 1000000]">
                        <button @click="filters.min_views = v; applyFilters()"
                                class="px-2 py-0.5 rounded-md text-[10px] font-semibold transition"
                                :class="filters.min_views === v ? 'bg-brand-500/30 text-brand-300' : 'bg-white/5 text-white/40 hover:text-white/60'"
                                x-text="v === 0 ? 'Todos' : formatNumber(v)"></button>
                    </template>
                </div>
            </div>
            <div class="h-4 w-px bg-white/10"></div>
            <div class="flex items-center gap-2">
                <span class="text-[10px] text-white/40">Publicado:</span>
                <select x-model.number="filters.published_within_hours" @change="applyFilters()" class="bg-white/5 border border-white/10 rounded-md px-2 py-0.5 text-[10px] text-white/70 outline-none">
                    <option value="0">Todos</option>
                    <option value="6">6h</option>
                    <option value="24">24h</option>
                    <option value="168">7 dias</option>
                    <option value="720">30 dias</option>
                </select>
            </div>
            <div class="h-4 w-px bg-white/10"></div>
            <div class="flex items-center gap-2">
                <span class="text-[10px] text-white/40">Criador:</span>
                <select x-model="filters.creator_tier" @change="applyFilters()" class="bg-white/5 border border-white/10 rounded-md px-2 py-0.5 text-[10px] text-white/70 outline-none">
                    <option value="">Todos</option>
                    <option value="nano">Nano (&lt;10K)</option>
                    <option value="micro">Micro (10-100K)</option>
                    <option value="mid">Mid (100K-1M)</option>
                    <option value="macro">Macro (1-10M)</option>
                    <option value="mega">Mega (10M+)</option>
                </select>
            </div>
            <div class="flex-1"></div>
            <button @click="clearFilters()" class="text-[10px] text-white/30 hover:text-white/60 transition">Limpar filtros</button>
            <span class="text-sm text-white/40"><span class="text-white font-bold" x-text="total"></span> videos</span>
        </div>
    </div>

    <!-- Loading skeleton -->
    <div x-show="loading" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <template x-for="i in 8">
            <div class="rounded-2xl overflow-hidden">
                <div class="skeleton" style="aspect-ratio: 9/16;"></div>
                <div class="p-3 space-y-2">
                    <div class="skeleton h-4 w-3/4"></div>
                    <div class="skeleton h-3 w-1/2"></div>
                </div>
            </div>
        </template>
    </div>

    <!-- Video Grid (9:16 cards) -->
    <div x-show="!loading" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <template x-for="video in videos" :key="video.id">
            <div class="glass-card rounded-2xl overflow-hidden group">
                <!-- Video Area (9:16) -->
                <div class="relative bg-dark-800 overflow-hidden" style="aspect-ratio: 9/16;">
                    <!-- Playing: TikTok Embed -->
                    <template x-if="playingVideoId === video.id && getTikTokVideoId(video)">
                        <iframe :src="'https://www.tiktok.com/player/v1/' + getTikTokVideoId(video) + '?autoplay=1&loop=1&controls=1&music_info=0&description=0'"
                            class="w-full h-full" frameborder="0" allow="autoplay; encrypted-media; fullscreen" allowfullscreen style="border:0;"></iframe>
                    </template>
                    <!-- Playing: YouTube Embed -->
                    <template x-if="playingVideoId === video.id && !getTikTokVideoId(video) && getYouTubeVideoId(video)">
                        <iframe :src="'https://www.youtube-nocookie.com/embed/' + getYouTubeVideoId(video) + '?autoplay=1&loop=1&rel=0&modestbranding=1&playsinline=1'"
                            class="w-full h-full" frameborder="0" allow="autoplay; encrypted-media; fullscreen" allowfullscreen style="border:0;"></iframe>
                    </template>
                    <!-- Not playing: Thumbnail + Play button -->
                    <template x-if="playingVideoId !== video.id || !getEmbeddableVideoId(video)">
                        <div class="relative w-full h-full">
                            <img :src="'/api/thumbnail/' + video.id" :alt="video.title" class="w-full h-full object-cover" loading="lazy" onerror="this.src=video.thumbnail_url; this.onerror=null">
                            <!-- Top badges -->
                            <div class="absolute top-2 left-2 flex gap-1.5">
                                <span class="px-2 py-0.5 rounded-lg text-[10px] font-bold uppercase" :class="'badge-'+video.platform" x-text="video.platform"></span>
                                <span class="px-2 py-0.5 text-[10px] font-bold rounded-lg" :class="getViralBadgeClass(video.viral_score)" x-text="video.viral_label"></span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <div class="w-9 h-9 rounded-full flex items-center justify-center text-[10px] font-bold" :style="'background:'+getScoreColor(video.viral_score)+'22; color:'+getScoreColor(video.viral_score)+'; border: 2px solid '+getScoreColor(video.viral_score)+'44'" x-text="Math.round(video.viral_score)"></div>
                            </div>
                            <!-- Duration badge -->
                            <div x-show="video.duration" class="absolute bottom-12 right-2 px-2 py-0.5 rounded-md bg-black/70 text-[10px] text-white/80 font-medium" x-text="video.duration_formatted"></div>
                            <!-- Play button -->
                            <div class="absolute inset-0 flex items-center justify-center cursor-pointer"
                                 @click="if(getEmbeddableVideoId(video)) { playingVideoId = video.id; $nextTick(() => { if(window.lucide) lucide.createIcons(); }); } else { openPreview(video); }">
                                <div class="w-14 h-14 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center group-hover:scale-110 transition-transform border border-white/20">
                                    <i data-lucide="play" class="w-7 h-7 text-white ml-0.5"></i>
                                </div>
                            </div>
                            <!-- Bottom stats bar -->
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2.5 pt-6">
                                <div class="flex items-center justify-between text-[10px] text-white/80">
                                    <div class="flex items-center gap-2">
                                        <span class="flex items-center gap-0.5"><i data-lucide="eye" class="w-3 h-3"></i><span x-text="video.views_formatted"></span></span>
                                        <span class="flex items-center gap-0.5"><i data-lucide="heart" class="w-3 h-3"></i><span x-text="formatNumber(video.likes)"></span></span>
                                    </div>
                                    <div class="flex gap-1">
                                        <button @click.stop="doDownload(video)" class="p-1 rounded-lg bg-white/20 hover:bg-emerald-500/40 transition" title="Download"><i data-lucide="download" class="w-3 h-3"></i></button>
                                        <a @click.stop :href="video.url" target="_blank" class="p-1 rounded-lg bg-white/20 hover:bg-white/40 transition" title="Abrir original"><i data-lucide="external-link" class="w-3 h-3"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <!-- Info area -->
                <div class="p-2.5">
                    <h4 class="text-xs font-semibold text-white/90 line-clamp-2 leading-snug mb-1.5" x-text="video.title?.substring(0,80)"></h4>
                    <div class="flex items-center justify-between">
                        <span class="text-[10px] text-white/40 truncate" x-text="'@'+(video.creator?.username || 'unknown')"></span>
                        <span class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold flex-shrink-0" :style="'background:'+getScoreColor(video.viral_score)+'15; color:'+getScoreColor(video.viral_score)" x-text="video.engagement_rate.toFixed(1)+'%'"></span>
                    </div>
                </div>
            </div>
        </template>
    </div>

    <!-- Empty state -->
    <div x-show="!loading && videos.length === 0" class="glass-card rounded-2xl p-12 text-center">
        <div class="w-16 h-16 rounded-2xl gradient-fire flex items-center justify-center mx-auto mb-4">
            <i data-lucide="flame" class="w-8 h-8 text-white"></i>
        </div>
        <h3 class="text-lg font-bold text-white/80 mb-2">Nenhum trend encontrado</h3>
        <p class="text-sm text-white/40 mb-6">Clique em "Buscar Trends" para descobrir videos em alta no TikTok e YouTube Shorts</p>
        <button @click="runTrendsScan()" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl gradient-fire text-white font-semibold text-sm">
            <i data-lucide="flame" class="w-4 h-4"></i> Buscar Trends Agora
        </button>
    </div>

    <!-- Load More -->
    <div x-show="!loading && videos.length > 0 && videos.length < total" class="flex justify-center py-4">
        <button @click="loadMore()" :disabled="loading"
                class="px-8 py-3 rounded-xl glass-card text-white/70 font-semibold text-sm hover:text-white hover:border-brand-500/30 transition flex items-center gap-2 disabled:opacity-50">
            <i data-lucide="chevrons-down" class="w-4 h-4"></i>
            Carregar mais (<span x-text="total - videos.length"></span> restantes)
        </button>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
function trendsDiscoveryApp() {
    return {
        videos: [],
        total: 0,
        loading: false,
        scanning: false,
        playingVideoId: null,
        offset: 0,
        limit: 24,

        // Status
        status: {},

        // Automation
        autoEnabled: false,
        autoInterval: 15,

        // Filters
        filters: {
            min_views: 0,
            min_viral_score: 0,
            min_engagement: 0,
            min_duration: 0,
            max_duration: 0,
            has_product: '',
            description_contains: '',
            creator_tier: '',
            published_within_hours: 0,
            sort_by: 'collected',
            platform: '',
            language: localStorage.getItem('globalLang') || '',
        },

        activePreset: 'all',

        presets: {
            all: {},
            mega_viral: { min_viral_score: 80, sort_by: 'viral_score' },
            high_views: { min_views: 1000000, sort_by: 'views' },
            recent: { published_within_hours: 24, sort_by: 'collected' },
            short: { max_duration: 60, sort_by: 'views' },
            shop: { has_product: 'yes', sort_by: 'views' },
        },

        init() {
            this.loadVideos();
            this.loadStatus();
            setInterval(() => this.loadStatus(), 30000);
            this.$nextTick(() => { if (window.lucide) lucide.createIcons(); });
            window.addEventListener('lang-changed', e => {
                this.filters.language = e.detail;
                this.applyFilters();
            });
        },

        openPreview(video) {
            window.dispatchEvent(new CustomEvent('preview-video', { detail: video }));
        },

        async doDownload(video) {
            if (!video?.url) return;
            showToast('Baixando video... aguarde', 'info');
            try {
                const params = new URLSearchParams({ url: video.url, quality: 'best' });
                const r = await fetch('/api/download/url?' + params, { method: 'POST' });
                const d = await r.json();
                if (d.error) { showToast('Erro: ' + d.error, 'error'); }
                else {
                    showToast('Download concluido!', 'success');
                    const a = document.createElement('a');
                    a.href = '/api/downloads/file?path=' + encodeURIComponent(d.path);
                    a.download = d.filename || 'video.mp4';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }
            } catch(e) { showToast('Erro no download', 'error'); }
        },

        async loadVideos() {
            this.loading = true;
            const params = new URLSearchParams();
            Object.entries(this.filters).forEach(([k, v]) => {
                if (v !== 0 && v !== '' && v !== false) params.append(k, v);
            });
            params.append('limit', this.limit);
            params.append('offset', this.offset);

            try {
                const res = await fetch('/api/trends-scanner/videos?' + params);
                const data = await res.json();
                if (this.offset === 0) {
                    this.videos = data.videos || [];
                } else {
                    this.videos = [...this.videos, ...(data.videos || [])];
                }
                this.total = data.total || 0;
            } catch (e) {
                console.error(e);
                showToast('Erro ao carregar videos', 'error');
            }
            this.loading = false;
            this.$nextTick(() => { if (window.lucide) lucide.createIcons(); });
        },

        async loadMore() {
            this.offset += this.limit;
            await this.loadVideos();
        },

        async loadStatus() {
            try {
                const res = await fetch('/api/trends-scanner/status');
                this.status = await res.json();
            } catch(e) {}
        },

        applyFilters() {
            this.offset = 0;
            this.activePreset = '';
            this.loadVideos();
        },

        clearFilters() {
            this.filters = {
                min_views: 0, min_viral_score: 0, min_engagement: 0,
                min_duration: 0, max_duration: 0, has_product: '',
                description_contains: '', creator_tier: '',
                published_within_hours: 0, sort_by: 'collected',
                platform: '', language: localStorage.getItem('globalLang') || '',
            };
            this.activePreset = 'all';
            this.offset = 0;
            this.loadVideos();
        },

        applyPreset(name) {
            this.clearFilters();
            this.activePreset = name;
            if (this.presets[name]) {
                Object.assign(this.filters, this.presets[name]);
            }
            this.offset = 0;
            this.loadVideos();
        },

        async runTrendsScan() {
            this.scanning = true;
            try {
                const res = await fetch('/api/trends-scanner/scan', { method: 'POST' });
                const data = await res.json();
                if (data.error) {
                    showToast(data.error, 'error');
                } else {
                    const msg = `TikTok: ${data.tiktok_found || 0}, YouTube: ${data.youtube_found || 0}, ${data.total_videos_saved || 0} salvos (${data.total_credits_used || 0} creditos)`;
                    showToast('Trends scan concluido! ' + msg, 'success');
                    this.offset = 0;
                    this.loadVideos();
                    this.loadStatus();
                }
            } catch(e) {
                showToast('Erro ao buscar trends', 'error');
            }
            this.scanning = false;
        },

        async toggleAutomation() {
            this.autoEnabled = !this.autoEnabled;
            await this.updateAutomation();
        },

        async updateAutomation() {
            try {
                const params = new URLSearchParams({
                    enabled: this.autoEnabled,
                    interval_minutes: this.autoInterval,
                });
                const res = await fetch('/api/trends-scanner/toggle?' + params, { method: 'POST' });
                const data = await res.json();
                if (this.autoEnabled) {
                    showToast(`Automacao ligada! Scan a cada ${this.autoInterval} min`, 'success');
                } else {
                    showToast('Automacao desligada', 'warning');
                }
            } catch(e) {
                showToast('Erro ao atualizar automacao', 'error');
            }
        },

        formatNumber(n) {
            if (!n) return '0';
            if (n >= 1000000) return (n/1000000).toFixed(1) + 'M';
            if (n >= 1000) return (n/1000).toFixed(1) + 'K';
            return n.toString();
        },

        getScoreColor(score) {
            if (score >= 90) return '#ef4444';
            if (score >= 75) return '#f97316';
            if (score >= 60) return '#eab308';
            if (score >= 40) return '#3b82f6';
            if (score >= 20) return '#22c55e';
            return '#6b7280';
        },

        getViralBadgeClass(score) {
            if (score >= 90) return 'bg-red-500/80 text-white animate-pulse';
            if (score >= 75) return 'bg-orange-500/80 text-white';
            if (score >= 60) return 'bg-yellow-500/80 text-black';
            if (score >= 40) return 'bg-blue-500/80 text-white';
            if (score >= 20) return 'bg-green-500/80 text-white';
            return 'bg-gray-500/80 text-white';
        },
    };
}
</script>
{% endblock %}