{% extends "base.html" %}
{% block title %}Liquidation Predictor{% endblock %}

{% block content %}
<div x-data="liquidationPanel()" 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>
                    Liquidation Predictor
                </h1>
                <p class="text-sm text-gray-500 mt-0.5">Predict forced liquidation cascades &amp; front-run price moves</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 ? 'Analyzing...' : '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">Scanning liquidation zones & cascade probabilities...</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 Liquidation 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 liquidation predictor telah dijalankan melalui pipeline.
        </p>
    </div>

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

        <!-- ─── MARKET STRESS BANNER ─── -->
        <div class="rounded-xl border p-5"
             :class="stressBannerClass()">
            <div class="flex items-start gap-4">
                <!-- Icon -->
                <div class="flex-shrink-0 mt-0.5">
                    <template x-if="stressLevel() === '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="stressLevel() === 'elevated'">
                        <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="stressLevel() === 'low' || !stressLevel()">
                        <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="stressLevel() === 'critical' ? 'bg-red-600 text-white animate-pulse' :
                                      stressLevel() === 'elevated' ? 'bg-amber-600 text-white' :
                                      'bg-emerald-600 text-white'">
                            <span x-text="(stressLevel() || 'LOW').toUpperCase() + ' STRESS'"></span>
                        </span>
                        <span class="text-xs text-gray-500" x-show="data?.market_stress?.high_risk_count != null">
                            High Risk Assets: <span class="font-semibold tabular-nums text-red-400" x-text="data?.market_stress?.high_risk_count ?? 0"></span>
                        </span>
                        <span class="text-xs text-gray-500" x-show="data?.market_stress?.avg_cascade_prob != null">
                            Avg Cascade: <span class="font-semibold tabular-nums"
                                :class="(data?.market_stress?.avg_cascade_prob || 0) >= 50 ? 'text-red-400' :
                                        (data?.market_stress?.avg_cascade_prob || 0) >= 25 ? 'text-amber-400' : 'text-emerald-400'"
                                x-text="(data?.market_stress?.avg_cascade_prob || 0).toFixed(1) + '%'"></span>
                        </span>
                    </div>
                    <p class="mt-2 text-sm" :class="stressLevel() === 'critical' ? 'text-red-300' :
                                                     stressLevel() === 'elevated' ? 'text-amber-300' : 'text-emerald-300'"
                       x-text="data?.market_stress?.message || stressMessage()"></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 Analyzed</p>
                <p class="text-2xl font-bold text-white mt-1" x-text="data?.stats?.total_analyzed ?? (data?.items || []).length"></p>
            </div>
            <div class="glass rounded-xl border border-red-800/60 p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wider">High Risk</p>
                <div class="flex items-center gap-2 mt-1">
                    <span class="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse" x-show="(data?.stats?.high_risk ?? 0) > 0"></span>
                    <p class="text-2xl font-bold text-red-400" x-text="data?.stats?.high_risk ?? 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">Moderate Risk</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?.moderate_risk ?? 0) > 0"></span>
                    <p class="text-2xl font-bold text-amber-400" x-text="data?.stats?.moderate_risk ?? 0"></p>
                </div>
            </div>
            <div class="glass rounded-xl border border-gray-700 p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Avg Cascade Prob</p>
                <p class="text-2xl font-bold tabular-nums mt-1"
                   :class="(data?.stats?.avg_cascade_prob || 0) >= 50 ? 'text-red-400' :
                           (data?.stats?.avg_cascade_prob || 0) >= 25 ? 'text-amber-400' : 'text-emerald-400'"
                   x-text="(data?.stats?.avg_cascade_prob || 0).toFixed(1) + '%'"></p>
            </div>
        </div>

        <!-- ─── TRADE SIGNALS ─── -->
        <div x-show="(data?.trade_signals || []).length > 0" x-cloak
             class="glass rounded-xl border border-amber-800/50 p-4">
            <h3 class="text-sm font-semibold text-amber-400 mb-3 flex items-center gap-2">
                <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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
                Trade Signals
            </h3>
            <div class="space-y-2">
                <template x-for="(sig, sIdx) in (data?.trade_signals || [])" :key="sIdx">
                    <div class="flex items-center justify-between bg-gray-900/50 rounded-lg px-3 py-2.5 gap-3">
                        <div class="flex items-center gap-2.5 min-w-0">
                            <img :src="'/static/icons/' + (__itemLabelLower === 'coin' ? 'coins' : 'stocks') + '/' + sig.coin_symbol + '.png'"
                                 :data-symbol="sig.coin_symbol"
                                 onerror="__iconError(this)"
                                 class="w-6 h-6 rounded-full bg-gray-800 flex-shrink-0" alt="">
                            <span class="text-white font-bold text-sm" x-text="sig.coin_symbol"></span>
                            <span class="px-2 py-0.5 rounded text-xs font-medium"
                                  :class="sig.action === 'LONG' || sig.action === 'BUY' ? 'bg-emerald-900/50 text-emerald-300' :
                                          sig.action === 'SHORT' || sig.action === 'SELL' ? 'bg-red-900/50 text-red-300' :
                                          sig.action === 'AVOID' ? 'bg-orange-900/50 text-orange-300' :
                                          'bg-gray-700 text-gray-400'"
                                  x-text="sig.action"></span>
                            <span x-show="sig.confidence" class="px-2 py-0.5 rounded text-xs"
                                  :class="sig.confidence === 'high' ? 'bg-yellow-900/50 text-yellow-300' :
                                          sig.confidence === 'medium' ? 'bg-gray-700 text-gray-300' :
                                          'bg-gray-800 text-gray-500'"
                                  x-text="sig.confidence"></span>
                        </div>
                        <div class="flex items-center gap-3 flex-shrink-0">
                            <span class="text-xs text-gray-400 text-right max-w-[200px] truncate" x-text="sig.reason || sig.description || ''"></span>
                            <span x-show="sig.cascade_probability != null" class="text-xs font-bold tabular-nums"
                                  :class="(sig.cascade_probability || 0) >= 60 ? 'text-red-400' :
                                          (sig.cascade_probability || 0) >= 30 ? 'text-amber-400' : 'text-emerald-400'"
                                  x-text="(sig.cascade_probability || 0).toFixed(0) + '%'"></span>
                        </div>
                    </div>
                </template>
            </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>

        <!-- ═══════════════════════════════════════════════════════════
             ITEM CARDS GRID
             ═══════════════════════════════════════════════════════════ -->
        <div>
            <h3 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5"/></svg>
                Liquidation Risk Analysis
                <span class="text-xs text-gray-600 font-normal" x-text="'(' + sortedItems().length + ' assets)'"></span>
            </h3>

            <!-- Empty items -->
            <div x-show="sortedItems().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 data liquidation risk</h3>
                <p class="mt-1 text-xs text-gray-600">Belum ada aset yang dianalisis untuk forced liquidation risk.</p>
            </div>

            <!-- Cards Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
                <template x-for="(item, idx) in sortedItems()" :key="idx">
                    <div class="glass rounded-xl border hover:border-gray-600 p-4 transition"
                         :class="item.risk_level === 'HIGH_RISK' ? 'border-red-800/50' :
                                 item.risk_level === 'MODERATE' ? 'border-amber-800/50' :
                                 'border-gray-700'"
                         :style="'animation-delay: ' + (idx * 30) + 'ms'">

                        <!-- Row 1: Symbol + Name + Risk Badge -->
                        <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') + '/' + item.coin_symbol + '.png'"
                                     :data-symbol="item.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="item.coin_symbol"></span>
                                    <span x-show="item.coin_name" class="text-gray-500 text-xs ml-1 truncate" x-text="item.coin_name"></span>
                                </div>
                            </div>
                            <!-- Risk Level Badge -->
                            <span class="flex-shrink-0 text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full"
                                  :class="item.risk_level === 'HIGH_RISK' ? 'bg-red-900/40 text-red-400 border border-red-800/30 animate-pulse' :
                                          item.risk_level === 'MODERATE' ? 'bg-amber-900/40 text-amber-400 border border-amber-800/30' :
                                          'bg-emerald-900/40 text-emerald-400 border border-emerald-800/30'"
                                  x-text="(item.risk_level || 'LOW').replace('_', ' ')"></span>
                        </div>

                        <!-- Row 2: Cascade Probability + Liquidation Zones side by side -->
                        <div class="flex items-stretch gap-4 mb-3">
                            <!-- Cascade Probability Circle -->
                            <div class="flex-shrink-0 flex flex-col items-center justify-center">
                                <div class="relative w-20 h-20">
                                    <!-- Background circle -->
                                    <svg class="w-20 h-20 transform -rotate-90" viewBox="0 0 72 72">
                                        <circle cx="36" cy="36" r="30" fill="none" stroke="currentColor"
                                                class="text-gray-700" stroke-width="6"/>
                                        <circle cx="36" cy="36" r="30" fill="none"
                                                stroke-width="6" stroke-linecap="round"
                                                :class="(item.cascade_probability || 0) >= 70 ? 'text-red-500' :
                                                        (item.cascade_probability || 0) >= 40 ? 'text-amber-500' : 'text-emerald-500'"
                                                :stroke-dasharray="(2 * Math.PI * 30)"
                                                :stroke-dashoffset="(2 * Math.PI * 30) * (1 - Math.min((item.cascade_probability || 0) / 100, 1))"
                                                style="transition: stroke-dashoffset 0.7s ease-out"/>
                                    </svg>
                                    <!-- Center text -->
                                    <div class="absolute inset-0 flex flex-col items-center justify-center">
                                        <span class="text-lg font-bold tabular-nums leading-none"
                                              :class="(item.cascade_probability || 0) >= 70 ? 'text-red-400' :
                                                      (item.cascade_probability || 0) >= 40 ? 'text-amber-400' : 'text-emerald-400'"
                                              x-text="(item.cascade_probability || 0).toFixed(0) + '%'"></span>
                                        <span class="text-[8px] text-gray-500 uppercase tracking-wider mt-0.5">Cascade</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Liquidation Zones -->
                            <div class="flex-1 min-w-0 flex flex-col justify-center space-y-2">
                                <!-- Long Liq Zone (danger below) -->
                                <div class="flex items-center justify-between gap-2">
                                    <span class="text-[10px] text-red-400 uppercase tracking-wider font-medium flex items-center gap-1">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></svg>
                                        Long Liq
                                    </span>
                                    <span class="text-xs font-bold tabular-nums text-red-400"
                                          x-text="item.long_liq_zone != null ? formatPrice(item.long_liq_zone) : '-'"></span>
                                </div>
                                <!-- Current Price (between zones) -->
                                <div class="flex items-center justify-between gap-2 bg-gray-800/50 rounded px-2 py-1">
                                    <span class="text-[10px] text-gray-400 uppercase tracking-wider font-medium">Current</span>
                                    <span class="text-xs font-bold tabular-nums text-white"
                                          x-text="item.current_price != null ? formatPrice(item.current_price) : '-'"></span>
                                </div>
                                <!-- Short Liq Zone (danger above) -->
                                <div class="flex items-center justify-between gap-2">
                                    <span class="text-[10px] text-emerald-400 uppercase tracking-wider font-medium flex items-center gap-1">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"/></svg>
                                        Short Liq
                                    </span>
                                    <span class="text-xs font-bold tabular-nums text-emerald-400"
                                          x-text="item.short_liq_zone != null ? formatPrice(item.short_liq_zone) : '-'"></span>
                                </div>
                            </div>
                        </div>

                        <!-- Row 3: Proximity Bar -->
                        <div class="mb-3">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-[10px] text-gray-500 uppercase tracking-wider">Proximity to Liquidation</span>
                                <span class="text-xs font-bold tabular-nums"
                                      :class="(item.proximity_pct || 0) <= 5 ? 'text-red-400' :
                                              (item.proximity_pct || 0) <= 15 ? 'text-orange-400' :
                                              (item.proximity_pct || 0) <= 30 ? 'text-amber-400' : 'text-emerald-400'"
                                      x-text="(item.proximity_pct || 0).toFixed(1) + '% away'"></span>
                            </div>
                            <div class="w-full h-2.5 bg-gray-700 rounded-full overflow-hidden">
                                <!-- Inverse bar: closer = more filled = more red -->
                                <div class="h-full rounded-full transition-all duration-700"
                                     :class="proximityBarColor(item.proximity_pct)"
                                     :style="'width: ' + Math.min(Math.max(100 - (item.proximity_pct || 100), 0), 100) + '%'"></div>
                            </div>
                        </div>

                        <!-- Row 4: Metrics Row -->
                        <div class="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs">
                            <!-- Volume Spike -->
                            <div class="flex items-center gap-1.5">
                                <span class="text-[10px] text-gray-500">Vol Spike</span>
                                <template x-if="item.volume_spike === true">
                                    <span class="flex items-center gap-0.5">
                                        <svg class="w-3.5 h-3.5 text-red-400 animate-pulse" fill="currentColor" viewBox="0 0 24 24"><path d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
                                        <span class="text-red-400 font-bold">YES</span>
                                    </span>
                                </template>
                                <template x-if="item.volume_spike !== true">
                                    <span class="text-gray-500">No</span>
                                </template>
                            </div>
                            <!-- Z-Score -->
                            <div x-show="item.zscore != null" class="flex items-center gap-1.5">
                                <span class="text-[10px] text-gray-500">Z-Score</span>
                                <span class="font-bold tabular-nums"
                                      :class="Math.abs(item.zscore || 0) >= 2 ? 'text-red-400' :
                                              Math.abs(item.zscore || 0) >= 1 ? 'text-amber-400' : 'text-gray-300'"
                                      x-text="(item.zscore || 0).toFixed(2)"></span>
                            </div>
                            <!-- ATR % -->
                            <div x-show="item.atr_pct != null" class="flex items-center gap-1.5">
                                <span class="text-[10px] text-gray-500">ATR%</span>
                                <span class="font-bold tabular-nums"
                                      :class="(item.atr_pct || 0) >= 8 ? 'text-red-400' :
                                              (item.atr_pct || 0) >= 4 ? 'text-amber-400' : 'text-gray-300'"
                                      x-text="(item.atr_pct || 0).toFixed(2) + '%'"></span>
                            </div>
                            <!-- Trade Signal -->
                            <div x-show="item.trade_signal" class="flex items-center gap-1.5">
                                <span class="text-[10px] text-gray-500">Signal</span>
                                <span class="px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase"
                                      :class="item.trade_signal === 'BUY' || item.trade_signal === 'LONG' ? 'bg-emerald-900/40 text-emerald-400' :
                                              item.trade_signal === 'SELL' || item.trade_signal === 'SHORT' ? 'bg-red-900/40 text-red-400' :
                                              item.trade_signal === 'AVOID' ? 'bg-orange-900/40 text-orange-400' :
                                              'bg-gray-800 text-gray-400'"
                                      x-text="item.trade_signal"></span>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>

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

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

        async fetchData() {
            this.loading = true;
            try {
                const resp = await fetch(`/api/v1/market/liquidation-predictor?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('Liquidation predictor fetch error:', e);
                this.data = null;
            } finally {
                this.loading = false;
            }
        },

        /* ── Stress level helpers ── */
        stressLevel() {
            return (this.data?.market_stress?.stress_level || this.data?.market_stress?.level || 'low').toLowerCase();
        },

        stressBannerClass() {
            const lvl = this.stressLevel();
            switch (lvl) {
                case 'critical': return 'bg-red-950/60 border-red-700';
                case 'elevated': return 'bg-amber-950/60 border-amber-700';
                default:         return 'bg-emerald-950/40 border-emerald-700';
            }
        },

        stressMessage() {
            const lvl = this.stressLevel();
            const hr = this.data?.market_stress?.high_risk_count || 0;
            switch (lvl) {
                case 'critical': return `CRITICAL: ${hr} assets approaching forced liquidation zones. Cascade risk is elevated — reduce leverage and monitor positions closely.`;
                case 'elevated': return `ELEVATED: ${hr} assets showing moderate liquidation risk. Watch for volume spikes that could trigger cascading events.`;
                default:         return 'Market stress is low. No significant forced liquidation cascades detected at current levels.';
            }
        },

        /* ── Sorted items by cascade probability DESC ── */
        sortedItems() {
            const items = [...(this.data?.items || [])];
            items.sort((a, b) => (b.cascade_probability || 0) - (a.cascade_probability || 0));
            return items;
        },

        /* ── Proximity bar color — closer = more red ── */
        proximityBarColor(pct) {
            const distance = pct || 100;
            if (distance <= 5) return 'bg-red-500';
            if (distance <= 10) return 'bg-orange-500';
            if (distance <= 20) return 'bg-amber-500';
            if (distance <= 30) return 'bg-yellow-500';
            return 'bg-emerald-500';
        },

        /* ── Price formatter ── */
        formatPrice(val) {
            if (val == null) return '-';
            if (val >= 1) return '$' + val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            if (val >= 0.01) return '$' + val.toFixed(4);
            return '$' + val.toFixed(6);
        }
    };
}
</script>
{% endblock %}