{% extends "base.html" %}
{% block title %}Contagion Detector{% endblock %}

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

    <!-- ═══════════════════════════════════════════════════════════
         HEADER
         ═══════════════════════════════════════════════════════════ -->
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div class="flex items-center gap-3">
            <a href="{{ tools_base }}/" class="text-gray-500 hover:text-gray-300 transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-white flex items-center gap-2">
                    <svg class="w-6 h-6 text-red-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zM12 15.75h.007v.008H12v-.008z"/></svg>
                    Contagion Detector
                </h1>
                <p class="text-sm text-gray-500 mt-0.5">Cascading selloff prediction &amp; safe haven identification</p>
            </div>
        </div>
        <div class="flex items-center gap-3">
            <!-- Asset Type Dropdown -->
            <select x-model="assetType" @change="fetchData()"
                    class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-red-500">
                <option value="all">Semua Aset</option>
                <option value="crypto">Kripto</option>
                <option value="stock">Saham IDX</option>
                <option value="stock_us">Saham US</option>
            </select>
            <!-- Refresh -->
            <button @click="fetchData()" :disabled="loading"
                    class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition"
                    :class="loading ? 'bg-gray-800 text-gray-500 cursor-not-allowed' : 'bg-red-600 hover:bg-red-700 text-white'">
                <svg :class="loading && 'animate-spin'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
            </button>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         LOADING STATE
         ═══════════════════════════════════════════════════════════ -->
    <div x-show="loading" x-cloak class="text-center py-16">
        <svg class="animate-spin h-8 w-8 text-red-500 mx-auto" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
        <p class="text-gray-500 text-sm mt-3">Menganalisis contagion risk pasar...</p>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         EMPTY STATE
         ═══════════════════════════════════════════════════════════ -->
    <div x-show="!loading && !data" x-cloak
         class="text-center py-16 glass rounded-xl border border-gray-800">
        <svg class="mx-auto h-12 w-12 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zM12 15.75h.007v.008H12v-.008z"/>
        </svg>
        <h3 class="mt-4 text-lg font-medium text-gray-400">Data Contagion Belum Tersedia</h3>
        <p class="mt-2 text-sm text-gray-600 max-w-md mx-auto">
            Pastikan data harga sudah di-sync dan analisis contagion telah dijalankan melalui pipeline.
        </p>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         MAIN CONTENT (shown when data loaded)
         ═══════════════════════════════════════════════════════════ -->
    <div x-show="!loading && data" x-cloak class="space-y-5">

        <!-- ─── CONTAGION STATE BANNER ─── -->
        <div class="rounded-xl border p-5"
             :class="bannerClass()">
            <div class="flex items-start gap-4">
                <!-- Icon -->
                <div class="flex-shrink-0 mt-0.5">
                    <template x-if="contagionLevel() === 'critical'">
                        <svg class="w-8 h-8 text-red-400 animate-pulse" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
                    </template>
                    <template x-if="contagionLevel() === 'high'">
                        <svg class="w-8 h-8 text-orange-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
                    </template>
                    <template x-if="contagionLevel() === 'moderate'">
                        <svg class="w-8 h-8 text-amber-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
                    </template>
                    <template x-if="contagionLevel() === 'early'">
                        <svg class="w-8 h-8 text-yellow-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
                    </template>
                    <template x-if="contagionLevel() === 'none' || !contagionLevel()">
                        <svg class="w-8 h-8 text-emerald-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286z"/></svg>
                    </template>
                </div>
                <!-- Content -->
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 flex-wrap">
                        <span class="text-xs font-bold uppercase tracking-widest px-2.5 py-0.5 rounded-full"
                              :class="levelBadgeClass()">
                            <span x-text="contagionLevel() ? contagionLevel().toUpperCase() : 'UNKNOWN'"></span>
                        </span>
                        <span class="text-xs text-gray-500" x-show="data?.contagion_state?.decline_pct != null">
                            Decline: <span class="font-semibold tabular-nums" :class="data?.contagion_state?.decline_pct < 0 ? 'text-red-400' : 'text-gray-300'" x-text="(data?.contagion_state?.decline_pct || 0).toFixed(1) + '%'"></span>
                        </span>
                        <span class="text-xs text-gray-500" x-show="data?.contagion_state?.avg_change_24h != null">
                            Avg 24h: <span class="font-semibold tabular-nums" :class="(data?.contagion_state?.avg_change_24h || 0) < 0 ? 'text-red-400' : 'text-emerald-400'" x-text="((data?.contagion_state?.avg_change_24h || 0) >= 0 ? '+' : '') + (data?.contagion_state?.avg_change_24h || 0).toFixed(2) + '%'"></span>
                        </span>
                    </div>
                    <p class="mt-2 text-sm" :class="bannerTextClass()" x-text="data?.contagion_state?.message || 'No contagion state data available.'"></p>
                </div>
            </div>
        </div>

        <!-- ─── STATS CARDS ─── -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <div class="glass rounded-xl border border-gray-700 p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Total Assets</p>
                <p class="text-2xl font-bold text-white mt-1" x-text="data?.stats?.total_assets ?? 0"></p>
            </div>
            <div class="glass rounded-xl border border-red-800/60 p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Predicted Victims</p>
                <div class="flex items-center gap-2 mt-1">
                    <span class="w-2.5 h-2.5 rounded-full bg-red-500" x-show="(data?.stats?.predicted_victims ?? 0) > 0"></span>
                    <p class="text-2xl font-bold text-red-400" x-text="data?.stats?.predicted_victims ?? 0"></p>
                </div>
            </div>
            <div class="glass rounded-xl border border-emerald-800/60 p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Safe Havens</p>
                <div class="flex items-center gap-2 mt-1">
                    <span class="w-2.5 h-2.5 rounded-full bg-emerald-500" x-show="(data?.stats?.safe_havens ?? 0) > 0"></span>
                    <p class="text-2xl font-bold text-emerald-400" x-text="data?.stats?.safe_havens ?? 0"></p>
                </div>
            </div>
            <div class="glass rounded-xl border border-amber-800/60 p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Divergent Assets</p>
                <div class="flex items-center gap-2 mt-1">
                    <span class="w-2.5 h-2.5 rounded-full bg-amber-500" x-show="(data?.stats?.divergent_assets ?? 0) > 0"></span>
                    <p class="text-2xl font-bold text-amber-400" x-text="data?.stats?.divergent_assets ?? 0"></p>
                </div>
            </div>
        </div>

        <!-- ─── RECOMMENDATIONS ─── -->
        <div x-show="(data?.recommendations || []).length > 0" x-cloak
             class="glass rounded-xl border border-gray-700 p-4">
            <h3 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg>
                Recommendations
            </h3>
            <div class="space-y-2">
                <template x-for="(rec, rIdx) in (data?.recommendations || [])" :key="rIdx">
                    <div class="flex items-start gap-2.5 text-sm">
                        <span class="flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold mt-0.5"
                              :class="rec.priority === 'high' ? 'bg-red-900/50 text-red-400 border border-red-800/50' :
                                      rec.priority === 'medium' ? 'bg-amber-900/50 text-amber-400 border border-amber-800/50' :
                                      'bg-gray-800 text-gray-400 border border-gray-700'"
                              x-text="rIdx + 1"></span>
                        <div>
                            <span class="text-gray-300" x-text="rec.text || rec.message || rec"></span>
                            <span x-show="rec.priority" class="ml-1.5 text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded"
                                  :class="rec.priority === 'high' ? 'bg-red-900/30 text-red-400' :
                                          rec.priority === 'medium' ? 'bg-amber-900/30 text-amber-400' :
                                          'bg-gray-800 text-gray-500'"
                                  x-text="rec.priority"></span>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <!-- ═══════════════════════════════════════════════════════════
             TABS: Victims | Safe Havens | All Assets
             ═══════════════════════════════════════════════════════════ -->
        <div class="flex gap-1 bg-gray-900/60 rounded-lg p-1 w-fit border border-gray-800">
            <button @click="activeTab = 'victims'"
                    class="px-4 py-2 text-sm font-medium rounded-md transition"
                    :class="activeTab === 'victims' ? 'bg-red-600 text-white shadow' : 'text-gray-400 hover:text-gray-200'">
                <span class="flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
                    Victims
                    <span x-show="(data?.predicted_victims || []).length > 0" x-cloak
                          class="text-[10px] opacity-70" x-text="'(' + (data?.predicted_victims || []).length + ')'"></span>
                </span>
            </button>
            <button @click="activeTab = 'havens'"
                    class="px-4 py-2 text-sm font-medium rounded-md transition"
                    :class="activeTab === 'havens' ? 'bg-emerald-600 text-white shadow' : 'text-gray-400 hover:text-gray-200'">
                <span class="flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286z"/></svg>
                    Safe Havens
                    <span x-show="(data?.safe_havens || []).length > 0" x-cloak
                          class="text-[10px] opacity-70" x-text="'(' + (data?.safe_havens || []).length + ')'"></span>
                </span>
            </button>
            <button @click="activeTab = 'all'"
                    class="px-4 py-2 text-sm font-medium rounded-md transition"
                    :class="activeTab === 'all' ? 'bg-gray-600 text-white shadow' : 'text-gray-400 hover:text-gray-200'">
                <span class="flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/></svg>
                    All Assets
                    <span x-show="(data?.all_assets || []).length > 0" x-cloak
                          class="text-[10px] opacity-70" x-text="'(' + (data?.all_assets || []).length + ')'"></span>
                </span>
            </button>
        </div>

        <!-- ═══════════════════════════════════════════════════════════
             TAB 1: PREDICTED VICTIMS
             ═══════════════════════════════════════════════════════════ -->
        <div x-show="activeTab === 'victims'" x-cloak class="space-y-3">

            <!-- Empty -->
            <div x-show="(data?.predicted_victims || []).length === 0"
                 class="text-center py-12 glass rounded-xl border border-gray-800">
                <svg class="mx-auto h-10 w-10 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <h3 class="mt-3 text-sm font-medium text-gray-400">Tidak ada predicted victims</h3>
                <p class="mt-1 text-xs text-gray-600">Pasar saat ini tidak menunjukkan tanda contagion signifikan.</p>
            </div>

            <!-- Victim Cards -->
            <template x-for="(v, vIdx) in (data?.predicted_victims || [])" :key="vIdx">
                <div class="glass rounded-xl border border-red-800/40 hover:border-red-700/60 p-4 transition"
                     :style="'animation-delay: ' + (vIdx * 50) + 'ms'">
                    <div class="flex items-start justify-between gap-4">
                        <!-- Left: Symbol + Risk Bar -->
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2.5 mb-2">
                                <img :src="'/static/icons/' + (__itemLabelLower === 'coin' ? 'coins' : 'stocks') + '/' + v.coin_symbol + '.png'"
                                     :data-symbol="v.coin_symbol"
                                     onerror="__iconError(this)"
                                     class="w-7 h-7 rounded-full bg-gray-800" alt="">
                                <div>
                                    <span class="text-white font-semibold text-sm" x-text="v.coin_symbol"></span>
                                    <span x-show="v.coin_name" class="text-gray-500 text-xs ml-1" x-text="v.coin_name"></span>
                                </div>
                            </div>
                            <!-- Victim Risk Bar -->
                            <div class="mb-2">
                                <div class="flex items-center justify-between mb-1">
                                    <span class="text-[10px] text-gray-500 uppercase tracking-wider">Victim Risk</span>
                                    <span class="text-xs font-bold tabular-nums"
                                          :class="(v.victim_risk || 0) >= 80 ? 'text-red-400' :
                                                  (v.victim_risk || 0) >= 60 ? 'text-orange-400' :
                                                  (v.victim_risk || 0) >= 40 ? 'text-amber-400' : 'text-yellow-400'"
                                          x-text="(v.victim_risk || 0).toFixed(0) + '%'"></span>
                                </div>
                                <div class="w-full h-2 bg-gray-700 rounded-full overflow-hidden">
                                    <div class="h-full rounded-full transition-all duration-700"
                                         :class="(v.victim_risk || 0) >= 80 ? 'bg-red-500' :
                                                 (v.victim_risk || 0) >= 60 ? 'bg-orange-500' :
                                                 (v.victim_risk || 0) >= 40 ? 'bg-amber-500' : 'bg-yellow-500'"
                                         :style="'width: ' + Math.min(v.victim_risk || 0, 100) + '%'"></div>
                                </div>
                            </div>
                            <!-- Reasons -->
                            <div x-show="(v.reasons || []).length > 0" class="mt-2">
                                <div class="flex flex-wrap gap-1.5">
                                    <template x-for="(reason, ri) in (v.reasons || [])" :key="ri">
                                        <span class="text-[10px] px-2 py-0.5 rounded-full bg-red-900/30 text-red-400 border border-red-800/30"
                                              x-text="reason"></span>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <!-- Right: Stats -->
                        <div class="text-right flex-shrink-0 space-y-1">
                            <div>
                                <span class="text-[10px] text-gray-500 block">Current 24h</span>
                                <span class="text-sm font-bold tabular-nums"
                                      :class="(v.current_change || 0) < 0 ? 'text-red-400' : 'text-emerald-400'"
                                      x-text="((v.current_change || 0) >= 0 ? '+' : '') + (v.current_change || 0).toFixed(2) + '%'"></span>
                            </div>
                            <div x-show="v.est_drop != null">
                                <span class="text-[10px] text-gray-500 block">Est. Drop</span>
                                <span class="text-sm font-bold tabular-nums text-red-400"
                                      x-text="(v.est_drop || 0).toFixed(1) + '%'"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <!-- ═══════════════════════════════════════════════════════════
             TAB 2: SAFE HAVENS
             ═══════════════════════════════════════════════════════════ -->
        <div x-show="activeTab === 'havens'" x-cloak class="space-y-3">

            <!-- Empty -->
            <div x-show="(data?.safe_havens || []).length === 0"
                 class="text-center py-12 glass rounded-xl border border-gray-800">
                <svg class="mx-auto h-10 w-10 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zM12 15.75h.007v.008H12v-.008z"/>
                </svg>
                <h3 class="mt-3 text-sm font-medium text-gray-400">Tidak ada safe havens terdeteksi</h3>
                <p class="mt-1 text-xs text-gray-600">Belum ada aset yang memenuhi kriteria safe haven saat ini.</p>
            </div>

            <!-- Haven Cards -->
            <template x-for="(h, hIdx) in (data?.safe_havens || [])" :key="hIdx">
                <div class="glass rounded-xl border border-emerald-800/40 hover:border-emerald-700/60 p-4 transition"
                     :style="'animation-delay: ' + (hIdx * 50) + 'ms'">
                    <div class="flex items-center justify-between gap-4">
                        <!-- Left: Symbol + Score -->
                        <div class="flex items-center gap-3 min-w-0">
                            <img :src="'/static/icons/' + (__itemLabelLower === 'coin' ? 'coins' : 'stocks') + '/' + h.coin_symbol + '.png'"
                                 :data-symbol="h.coin_symbol"
                                 onerror="__iconError(this)"
                                 class="w-8 h-8 rounded-full bg-gray-800" alt="">
                            <div>
                                <div class="flex items-center gap-2">
                                    <span class="text-white font-semibold text-sm" x-text="h.coin_symbol"></span>
                                    <span x-show="h.coin_name" class="text-gray-500 text-xs" x-text="h.coin_name"></span>
                                </div>
                                <!-- Haven Score Bar -->
                                <div class="flex items-center gap-2 mt-1">
                                    <span class="text-[10px] text-gray-500">Haven Score</span>
                                    <div class="w-24 h-1.5 bg-gray-700 rounded-full overflow-hidden">
                                        <div class="h-full rounded-full bg-emerald-500 transition-all duration-700"
                                             :style="'width: ' + Math.min(h.haven_score || 0, 100) + '%'"></div>
                                    </div>
                                    <span class="text-[10px] font-bold text-emerald-400 tabular-nums"
                                          x-text="(h.haven_score || 0).toFixed(0)"></span>
                                </div>
                            </div>
                        </div>
                        <!-- Right: Change + Stress -->
                        <div class="text-right flex-shrink-0 space-y-1">
                            <div>
                                <span class="text-[10px] text-gray-500 block">24h Change</span>
                                <span class="text-sm font-bold tabular-nums text-emerald-400"
                                      x-text="((h.change_24h || 0) >= 0 ? '+' : '') + (h.change_24h || 0).toFixed(2) + '%'"></span>
                            </div>
                            <div x-show="h.stress_level != null">
                                <span class="text-[10px] text-gray-500 block">Stress Level</span>
                                <span class="text-[11px] font-semibold px-1.5 py-0.5 rounded"
                                      :class="h.stress_level === 'low' ? 'bg-emerald-900/40 text-emerald-400' :
                                              h.stress_level === 'moderate' ? 'bg-amber-900/40 text-amber-400' :
                                              h.stress_level === 'high' ? 'bg-orange-900/40 text-orange-400' :
                                              'bg-red-900/40 text-red-400'"
                                      x-text="h.stress_level"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <!-- ═══════════════════════════════════════════════════════════
             TAB 3: ALL ASSETS
             ═══════════════════════════════════════════════════════════ -->
        <div x-show="activeTab === 'all'" x-cloak class="space-y-3">

            <!-- Empty -->
            <div x-show="sortedAssets().length === 0"
                 class="text-center py-12 glass rounded-xl border border-gray-800">
                <svg class="mx-auto h-10 w-10 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/>
                </svg>
                <h3 class="mt-3 text-sm font-medium text-gray-400">Tidak ada data aset</h3>
                <p class="mt-1 text-xs text-gray-600">Data contagion per aset belum tersedia.</p>
            </div>

            <!-- Assets Card Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
                <template x-for="(a, aIdx) in sortedAssets()" :key="aIdx">
                    <div class="glass rounded-xl border hover:border-gray-600 p-4 transition"
                         :class="(a.contagion_risk || 0) >= 80 ? 'border-red-800/50' :
                                 (a.contagion_risk || 0) >= 60 ? 'border-orange-800/50' :
                                 (a.contagion_risk || 0) >= 40 ? 'border-amber-800/50' :
                                 'border-gray-700'"
                         :style="'animation-delay: ' + (aIdx * 30) + 'ms'">

                        <!-- Row 1: Symbol + Name + Stress Level -->
                        <div class="flex items-start justify-between gap-3 mb-3">
                            <div class="flex items-center gap-2.5 min-w-0">
                                <img :src="'/static/icons/' + (__itemLabelLower === 'coin' ? 'coins' : 'stocks') + '/' + a.coin_symbol + '.png'"
                                     :data-symbol="a.coin_symbol"
                                     onerror="__iconError(this)"
                                     class="w-7 h-7 rounded-full bg-gray-800 flex-shrink-0" alt="">
                                <div class="min-w-0">
                                    <span class="text-white font-semibold text-sm" x-text="a.coin_symbol"></span>
                                    <span x-show="a.coin_name" class="text-gray-500 text-xs ml-1 truncate" x-text="a.coin_name"></span>
                                </div>
                            </div>
                            <!-- Stress Level Badge -->
                            <span x-show="a.stress_level" class="flex-shrink-0 text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full"
                                  :class="a.stress_level === 'low' ? 'bg-emerald-900/40 text-emerald-400 border border-emerald-800/30' :
                                          a.stress_level === 'moderate' ? 'bg-amber-900/40 text-amber-400 border border-amber-800/30' :
                                          a.stress_level === 'high' ? 'bg-orange-900/40 text-orange-400 border border-orange-800/30' :
                                          a.stress_level === 'critical' ? 'bg-red-900/40 text-red-400 border border-red-800/30' :
                                          'bg-gray-800 text-gray-500 border border-gray-700'"
                                  x-text="a.stress_level"></span>
                        </div>

                        <!-- Row 2: Contagion Risk Bar (0-100) -->
                        <div class="mb-3">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-[10px] text-gray-500 uppercase tracking-wider">Contagion Risk</span>
                                <span class="text-xs font-bold tabular-nums"
                                      :class="(a.contagion_risk || 0) >= 80 ? 'text-red-400' :
                                              (a.contagion_risk || 0) >= 60 ? 'text-orange-400' :
                                              (a.contagion_risk || 0) >= 40 ? 'text-amber-400' :
                                              (a.contagion_risk || 0) >= 20 ? 'text-yellow-400' : 'text-emerald-400'"
                                      x-text="(a.contagion_risk || 0).toFixed(0) + ' / 100'"></span>
                            </div>
                            <div class="w-full h-2 bg-gray-700 rounded-full overflow-hidden">
                                <div class="h-full rounded-full transition-all duration-700"
                                     :class="(a.contagion_risk || 0) >= 80 ? 'bg-red-500' :
                                             (a.contagion_risk || 0) >= 60 ? 'bg-orange-500' :
                                             (a.contagion_risk || 0) >= 40 ? 'bg-amber-500' :
                                             (a.contagion_risk || 0) >= 20 ? 'bg-yellow-500' : 'bg-emerald-500'"
                                     :style="'width: ' + Math.min(a.contagion_risk || 0, 100) + '%'"></div>
                            </div>
                        </div>

                        <!-- Row 3: Metrics Grid -->
                        <div class="grid grid-cols-4 gap-2 text-center">
                            <div>
                                <span class="text-[10px] text-gray-500 block">24h</span>
                                <span class="text-xs font-semibold tabular-nums"
                                      :class="(a.change_24h || 0) < 0 ? 'text-red-400' : 'text-emerald-400'"
                                      x-text="((a.change_24h || 0) >= 0 ? '+' : '') + (a.change_24h || 0).toFixed(2) + '%'"></span>
                            </div>
                            <div>
                                <span class="text-[10px] text-gray-500 block">7d</span>
                                <span class="text-xs font-semibold tabular-nums"
                                      :class="(a.change_7d || 0) < 0 ? 'text-red-400' : 'text-emerald-400'"
                                      x-text="((a.change_7d || 0) >= 0 ? '+' : '') + (a.change_7d || 0).toFixed(2) + '%'"></span>
                            </div>
                            <div>
                                <span class="text-[10px] text-gray-500 block">ATR%</span>
                                <span class="text-xs font-semibold tabular-nums text-gray-300"
                                      x-text="(a.atr_pct || 0).toFixed(1) + '%'"></span>
                            </div>
                            <div>
                                <span class="text-[10px] text-gray-500 block">Vol Ratio</span>
                                <span class="text-xs font-semibold tabular-nums"
                                      :class="(a.vol_ratio_pct || 0) > 150 ? 'text-orange-400' :
                                              (a.vol_ratio_pct || 0) > 100 ? 'text-amber-400' : 'text-gray-300'"
                                      x-text="(a.vol_ratio_pct || 0).toFixed(0) + '%'"></span>
                            </div>
                        </div>

                        <!-- Row 4: ML Indicators -->
                        <div class="mt-3 flex items-center justify-between flex-wrap gap-2 pt-2 border-t border-gray-700/50">
                            <div class="flex items-center gap-3">
                                <!-- ML Trend -->
                                <div x-show="a.ml_trend" class="flex items-center gap-1">
                                    <span class="text-[10px] text-gray-500">ML:</span>
                                    <span class="text-[10px] font-semibold px-1.5 py-0.5 rounded"
                                          :class="a.ml_trend === 'bullish' ? 'bg-emerald-900/40 text-emerald-400' :
                                                  a.ml_trend === 'bearish' ? 'bg-red-900/40 text-red-400' :
                                                  'bg-gray-800 text-gray-400'"
                                          x-text="a.ml_trend"></span>
                                </div>
                                <!-- Bullish Score -->
                                <div x-show="a.bullish_score != null" class="flex items-center gap-1">
                                    <span class="text-[10px] text-gray-500">Bull:</span>
                                    <span class="text-[10px] font-bold tabular-nums"
                                          :class="(a.bullish_score || 0) >= 60 ? 'text-emerald-400' :
                                                  (a.bullish_score || 0) >= 40 ? 'text-gray-300' : 'text-red-400'"
                                          x-text="(a.bullish_score || 0).toFixed(0) + '%'"></span>
                                </div>
                            </div>
                            <!-- Acceleration -->
                            <div x-show="a.acceleration != null" class="flex items-center gap-1">
                                <span class="text-[10px] text-gray-500">Accel:</span>
                                <span class="text-[10px] font-bold tabular-nums"
                                      :class="(a.acceleration || 0) > 0 ? 'text-emerald-400' :
                                              (a.acceleration || 0) < 0 ? 'text-red-400' : 'text-gray-400'"
                                      x-text="((a.acceleration || 0) >= 0 ? '+' : '') + (a.acceleration || 0).toFixed(2)"></span>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>

    </div><!-- /main content -->
</div>
{% endblock %}

{% block scripts %}
<script>
function contagionPanel() {
    return {
        loading: false,
        data: null,
        assetType: '{{ asset_mode | default("all") }}',
        activeTab: 'victims',

        async fetchData() {
            this.loading = true;
            try {
                const resp = await fetch(`/api/v1/market/contagion?asset_type=${this.assetType}`);
                const json = await resp.json();
                if (json.status === 'ok' || json.data) {
                    this.data = json.data || json;
                } else {
                    this.data = json;
                }
            } catch (e) {
                console.error('Contagion fetch error:', e);
                this.data = null;
            } finally {
                this.loading = false;
            }
        },

        /* ── Contagion level helpers ── */
        contagionLevel() {
            return (this.data?.contagion_state?.level || this.data?.contagion_state?.contagion_level || 'none').toLowerCase();
        },

        bannerClass() {
            const lvl = this.contagionLevel();
            switch (lvl) {
                case 'critical': return 'bg-red-950/60 border-red-700';
                case 'high':     return 'bg-orange-950/60 border-orange-700';
                case 'moderate': return 'bg-amber-950/60 border-amber-700';
                case 'early':    return 'bg-yellow-950/60 border-yellow-700';
                default:         return 'bg-emerald-950/40 border-emerald-700';
            }
        },

        bannerTextClass() {
            const lvl = this.contagionLevel();
            switch (lvl) {
                case 'critical': return 'text-red-300';
                case 'high':     return 'text-orange-300';
                case 'moderate': return 'text-amber-300';
                case 'early':    return 'text-yellow-300';
                default:         return 'text-emerald-300';
            }
        },

        levelBadgeClass() {
            const lvl = this.contagionLevel();
            switch (lvl) {
                case 'critical': return 'bg-red-600 text-white animate-pulse';
                case 'high':     return 'bg-orange-600 text-white';
                case 'moderate': return 'bg-amber-600 text-white';
                case 'early':    return 'bg-yellow-600 text-gray-900';
                default:         return 'bg-emerald-600 text-white';
            }
        },

        /* ── Sorted all_assets by contagion_risk DESC ── */
        sortedAssets() {
            const items = [...(this.data?.all_assets || [])];
            items.sort((a, b) => (b.contagion_risk || 0) - (a.contagion_risk || 0));
            return items;
        }
    };
}
</script>
{% endblock %}