{% extends "base.html" %}
{% block title %}Risk Parity Allocator{% endblock %}

{% block content %}
<div x-data="riskParityPanel()" x-init="loadData()" class="space-y-6">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white flex items-center gap-2">
                <svg class="w-7 h-7 text-cyan-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.97zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.97z"/></svg>
                Risk Parity Allocator
            </h1>
            <p class="text-sm text-gray-400 mt-1">Equal risk contribution portfolio allocation with volatility-based weighting</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500" x-text="lastRefresh ? 'Updated: ' + lastRefresh : ''"></span>
        </div>
    </div>

    <!-- Capital Input Controls -->
    <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
        <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Allocation Parameters</h3>
        <div class="flex flex-wrap items-end gap-4">
            <div>
                <label class="block text-xs text-gray-400 mb-1">Capital (Rp / $)</label>
                <input type="number" x-model.number="capital" min="1000" step="1000"
                       class="bg-gray-900 border border-gray-600 text-gray-200 text-sm rounded-lg px-3 py-2 w-44"
                       placeholder="100000">
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">Max Positions</label>
                <select x-model="maxPositions" class="bg-gray-900 border border-gray-600 text-gray-200 text-sm rounded-lg px-3 py-2">
                    <option value="10">10</option>
                    <option value="15">15</option>
                    <option value="20" selected>20</option>
                    <option value="30">30</option>
                    <option value="50">50</option>
                </select>
            </div>
            <button @click="loadData()" :disabled="loading"
                    class="px-5 py-2 bg-cyan-600 hover:bg-cyan-500 text-white rounded-lg text-sm font-semibold transition disabled:opacity-50 flex items-center gap-2">
                <svg x-show="!loading" 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>
                <svg x-show="loading" x-cloak class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                Apply
            </button>
        </div>
    </div>

    <!-- Error State -->
    <div x-show="error" x-cloak class="bg-red-900/30 border border-red-700/50 rounded-xl p-4 text-sm text-red-300" x-text="error"></div>

    <!-- Loading State -->
    <div x-show="loading && items.length === 0" x-cloak class="text-center py-16">
        <svg class="animate-spin h-10 w-10 text-cyan-400 mx-auto" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
        </svg>
        <p class="text-gray-400 mt-4">Calculating risk parity allocations...</p>
    </div>

    <!-- Market Regime Badge -->
    <template x-if="data.market_regime">
        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border"
             :class="{
                 'bg-emerald-900/20 border-emerald-700/50': data.market_regime === 'LOW_VOL' || data.market_regime === 'BULL',
                 'bg-amber-900/20 border-amber-700/50': data.market_regime === 'NORMAL' || data.market_regime === 'TRANSITION',
                 'bg-red-900/20 border-red-700/50': data.market_regime === 'HIGH_VOL' || data.market_regime === 'BEAR' || data.market_regime === 'CRISIS',
                 'bg-gray-800 border-gray-700': !['LOW_VOL','BULL','NORMAL','TRANSITION','HIGH_VOL','BEAR','CRISIS'].includes(data.market_regime),
             }">
            <span class="text-xs font-semibold uppercase tracking-wider text-gray-400">Market Regime:</span>
            <span class="text-sm font-bold"
                  :class="{
                      'text-emerald-400': data.market_regime === 'LOW_VOL' || data.market_regime === 'BULL',
                      'text-amber-400': data.market_regime === 'NORMAL' || data.market_regime === 'TRANSITION',
                      'text-red-400': data.market_regime === 'HIGH_VOL' || data.market_regime === 'BEAR' || data.market_regime === 'CRISIS',
                      'text-gray-300': !['LOW_VOL','BULL','NORMAL','TRANSITION','HIGH_VOL','BEAR','CRISIS'].includes(data.market_regime),
                  }" x-text="(data.market_regime || '-').replace(/_/g, ' ')"></span>
        </div>
    </template>

    <!-- Summary Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <div class="text-xs text-gray-400 uppercase tracking-wider">Positions</div>
            <div class="text-2xl font-bold text-white mt-1" x-text="items.length"></div>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <div class="text-xs text-gray-400 uppercase tracking-wider">Portfolio Vol %</div>
            <div class="text-2xl font-bold text-cyan-400 mt-1" x-text="data.portfolio_vol_pct != null ? data.portfolio_vol_pct.toFixed(2) + '%' : '-'"></div>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <div class="text-xs text-gray-400 uppercase tracking-wider">Diversification Ratio</div>
            <div class="text-2xl font-bold text-white mt-1" x-text="data.diversification_ratio != null ? data.diversification_ratio.toFixed(2) : '-'"></div>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <div class="text-xs text-gray-400 uppercase tracking-wider">Vol Reduction</div>
            <div class="text-2xl font-bold text-emerald-400 mt-1" x-text="data.vol_reduction_pct != null ? data.vol_reduction_pct.toFixed(1) + '%' : '-'"></div>
        </div>
    </div>

    <!-- Vol Comparison Box -->
    <template x-if="data.equal_weight_vol != null && data.risk_parity_vol != null">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
            <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Equal Weight vs Risk Parity Volatility</h3>
            <div class="grid grid-cols-2 gap-6 mb-4">
                <div class="text-center">
                    <div class="text-xs text-gray-400 mb-2">Equal Weight Vol</div>
                    <div class="text-3xl font-black text-gray-300" x-text="data.equal_weight_vol.toFixed(2) + '%'"></div>
                    <div class="mt-2 w-full bg-gray-700 rounded-full h-3">
                        <div class="h-3 rounded-full bg-gray-500 transition-all" :style="'width:' + Math.min(data.equal_weight_vol * 2, 100) + '%'"></div>
                    </div>
                </div>
                <div class="text-center">
                    <div class="text-xs text-gray-400 mb-2">Risk Parity Vol</div>
                    <div class="text-3xl font-black text-cyan-400" x-text="data.risk_parity_vol.toFixed(2) + '%'"></div>
                    <div class="mt-2 w-full bg-gray-700 rounded-full h-3">
                        <div class="h-3 rounded-full bg-cyan-500 transition-all" :style="'width:' + Math.min(data.risk_parity_vol * 2, 100) + '%'"></div>
                    </div>
                </div>
            </div>
            <div class="text-center p-3 rounded-lg" :class="(data.vol_reduction_pct || 0) > 0 ? 'bg-emerald-900/20' : 'bg-red-900/20'">
                <span class="text-sm font-bold" :class="(data.vol_reduction_pct || 0) > 0 ? 'text-emerald-400' : 'text-red-400'">
                    <span x-text="(data.vol_reduction_pct || 0) > 0 ? '&#9660;' : '&#9650;'"></span>
                    <span x-text="Math.abs(data.vol_reduction_pct || 0).toFixed(1) + '% volatility reduction'"></span>
                </span>
            </div>
        </div>
    </template>

    <!-- Allocation Bar (Horizontal Stacked) -->
    <template x-if="items.length > 0">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
            <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Risk Parity Allocation</h3>
            <div class="flex h-8 rounded-full overflow-hidden bg-gray-700">
                <template x-for="(item, idx) in items.slice(0, 20)" :key="item.symbol || idx">
                    <div class="h-full transition-all relative group"
                         :style="'width:' + (item.risk_parity_pct || 0) + '%; background-color:' + barColor(idx)"
                         :title="item.symbol + ': ' + (item.risk_parity_pct || 0).toFixed(1) + '%'">
                        <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 hidden group-hover:block bg-gray-900 border border-gray-600 rounded px-2 py-1 text-[10px] text-white whitespace-nowrap z-10"
                             x-text="item.symbol + ' ' + (item.risk_parity_pct || 0).toFixed(1) + '%'"></div>
                    </div>
                </template>
            </div>
            <div class="flex flex-wrap gap-3 mt-3">
                <template x-for="(item, idx) in items.slice(0, 20)" :key="'leg' + idx">
                    <div class="flex items-center gap-1.5 text-[10px] text-gray-400">
                        <span class="w-2.5 h-2.5 rounded-sm inline-block" :style="'background-color:' + barColor(idx)"></span>
                        <span x-text="item.symbol"></span>
                        <span class="text-gray-500" x-text="(item.risk_parity_pct || 0).toFixed(1) + '%'"></span>
                    </div>
                </template>
            </div>
        </div>
    </template>

    <!-- Top & Bottom Allocations -->
    <template x-if="items.length > 0">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Largest Allocations -->
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                <h4 class="text-xs font-semibold text-cyan-400 uppercase tracking-wider mb-3">Largest Risk Parity Allocations</h4>
                <div class="space-y-2">
                    <template x-for="item in topAllocations" :key="'top_' + item.symbol">
                        <div class="flex items-center justify-between bg-cyan-900/10 rounded-lg px-3 py-2">
                            <div class="flex items-center gap-2">
                                <span class="text-sm text-white font-bold" x-text="item.symbol"></span>
                                <span class="text-[10px] text-gray-500" x-text="'Vol: ' + (item.volatility_pct || 0).toFixed(1) + '%'"></span>
                            </div>
                            <div class="flex items-center gap-3">
                                <div class="w-20 bg-gray-700 rounded-full h-1.5">
                                    <div class="h-1.5 rounded-full bg-cyan-500" :style="'width:' + Math.min((item.risk_parity_pct || 0) * 5, 100) + '%'"></div>
                                </div>
                                <span class="text-xs font-bold text-cyan-400 w-14 text-right" x-text="(item.risk_parity_pct || 0).toFixed(2) + '%'"></span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <!-- Smallest Allocations -->
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                <h4 class="text-xs font-semibold text-amber-400 uppercase tracking-wider mb-3">Smallest Risk Parity Allocations</h4>
                <div class="space-y-2">
                    <template x-for="item in bottomAllocations" :key="'bot_' + item.symbol">
                        <div class="flex items-center justify-between bg-amber-900/10 rounded-lg px-3 py-2">
                            <div class="flex items-center gap-2">
                                <span class="text-sm text-white font-bold" x-text="item.symbol"></span>
                                <span class="text-[10px] text-gray-500" x-text="'Vol: ' + (item.volatility_pct || 0).toFixed(1) + '%'"></span>
                            </div>
                            <div class="flex items-center gap-3">
                                <div class="w-20 bg-gray-700 rounded-full h-1.5">
                                    <div class="h-1.5 rounded-full bg-amber-500" :style="'width:' + Math.min((item.risk_parity_pct || 0) * 5, 100) + '%'"></div>
                                </div>
                                <span class="text-xs font-bold text-amber-400 w-14 text-right" x-text="(item.risk_parity_pct || 0).toFixed(2) + '%'"></span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </template>

    <!-- Risk Parity Methodology Info -->
    <div class="bg-cyan-900/15 border border-cyan-700/25 rounded-xl p-4">
        <div class="flex items-start gap-3">
            <svg class="w-5 h-5 text-cyan-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <div>
                <h4 class="text-sm font-medium text-cyan-300">Risk Parity Methodology</h4>
                <p class="text-xs text-gray-400 mt-1">Risk parity allocates capital so each position contributes <strong class="text-gray-300">equal risk</strong> to the portfolio. Lower-volatility assets receive larger allocations, higher-volatility assets receive smaller ones. This typically reduces portfolio volatility compared to equal-weight allocation while maintaining diversification benefits.</p>
                <div class="flex flex-wrap gap-3 mt-2">
                    <span class="text-[10px] text-gray-500 flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-500"></span> Overweight = low vol, more capital</span>
                    <span class="text-[10px] text-gray-500 flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-red-500"></span> Underweight = high vol, less capital</span>
                    <span class="text-[10px] text-gray-500 flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-cyan-500"></span> Target: equal risk contribution per asset</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Results count -->
    <div x-show="items.length > 0" class="text-xs text-gray-500">
        Showing <span class="text-white font-medium" x-text="filteredItems.length"></span> of <span x-text="items.length"></span> positions
        <span class="ml-3" x-show="capital > 0">Capital: <span class="text-cyan-400 font-medium" x-text="formatCurrency(capital)"></span></span>
    </div>

    <!-- Search -->
    <div class="relative">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
        <input type="text" x-model="search" placeholder="Search symbol..."
               class="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-200 focus:outline-none focus:ring-1 focus:ring-cyan-500">
    </div>

    <!-- Data Table -->
    <div x-show="!loading || items.length > 0" x-cloak class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-700 text-gray-400 text-xs uppercase tracking-wider">
                        <th class="px-4 py-3 text-left font-medium">#</th>
                        <th class="px-4 py-3 text-left font-medium">Symbol</th>
                        <th class="px-4 py-3 text-right font-medium cursor-pointer hover:text-white" @click="toggleSort('volatility_pct')">
                            Volatility %
                            <span x-show="sortKey === 'volatility_pct'" x-text="sortDir === 'desc' ? ' &#9660;' : ' &#9650;'"></span>
                        </th>
                        <th class="px-4 py-3 text-center font-medium">Vol Rank</th>
                        <th class="px-4 py-3 text-right font-medium">Equal Wt %</th>
                        <th class="px-4 py-3 text-right font-medium cursor-pointer hover:text-white" @click="toggleSort('risk_parity_pct')">
                            Risk Parity %
                            <span x-show="sortKey === 'risk_parity_pct'" x-text="sortDir === 'desc' ? ' &#9660;' : ' &#9650;'"></span>
                        </th>
                        <th class="px-4 py-3 text-right font-medium">Change</th>
                        <th class="px-4 py-3 text-right font-medium">$ Allocation</th>
                        <th class="px-4 py-3 text-right font-medium">Shares</th>
                        <th class="px-4 py-3 text-right font-medium">Risk Contrib %</th>
                        <th class="px-4 py-3 text-left font-medium">Signal</th>
                        <th class="px-4 py-3 text-left font-medium">Reasons</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="(item, idx) in filteredItems" :key="item.symbol || idx">
                        <tr class="border-b border-gray-700/50 hover:bg-gray-750 transition">
                            <td class="px-4 py-3 text-gray-500 text-xs" x-text="idx + 1"></td>
                            <td class="px-4 py-3">
                                <a :href="'/market/assets/' + (item.asset_id || item.symbol)"
                                   class="text-white font-bold hover:text-cyan-400 transition" x-text="item.symbol || '-'"></a>
                            </td>
                            <td class="px-4 py-3 text-right"
                                :class="(item.volatility_pct || 0) > 50 ? 'text-red-400' : (item.volatility_pct || 0) > 25 ? 'text-amber-400' : 'text-gray-300'"
                                x-text="item.volatility_pct != null ? item.volatility_pct.toFixed(2) + '%' : '-'"></td>
                            <td class="px-4 py-3 text-center">
                                <span class="px-2 py-0.5 rounded-full text-xs font-semibold"
                                      :class="(item.vol_rank || 0) <= 3 ? 'bg-green-900/50 text-green-300' : (item.vol_rank || 0) <= 10 ? 'bg-gray-700 text-gray-300' : 'bg-red-900/50 text-red-300'"
                                      x-text="item.vol_rank || '-'"></span>
                            </td>
                            <td class="px-4 py-3 text-right text-gray-400" x-text="item.equal_weight_pct != null ? item.equal_weight_pct.toFixed(2) + '%' : '-'"></td>
                            <td class="px-4 py-3 text-right text-cyan-400 font-bold" x-text="item.risk_parity_pct != null ? item.risk_parity_pct.toFixed(2) + '%' : '-'"></td>
                            <td class="px-4 py-3 text-right font-medium"
                                :class="(item.change_pct || 0) > 0 ? 'text-emerald-400' : (item.change_pct || 0) < 0 ? 'text-red-400' : 'text-gray-500'">
                                <span x-text="item.change_pct != null ? ((item.change_pct >= 0 ? '+' : '') + item.change_pct.toFixed(2) + '%') : '-'"></span>
                            </td>
                            <td class="px-4 py-3 text-right text-gray-300" x-text="item.allocation_amount != null ? formatCurrency(item.allocation_amount) : '-'"></td>
                            <td class="px-4 py-3 text-right text-gray-400" x-text="item.shares != null ? item.shares.toFixed(2) : '-'"></td>
                            <td class="px-4 py-3 text-right">
                                <div class="flex items-center gap-1 justify-end">
                                    <div class="w-12 bg-gray-700 rounded-full h-1.5">
                                        <div class="h-1.5 rounded-full bg-koin-500" :style="'width:' + Math.min((item.risk_contribution_pct || 0) * (items.length), 100) + '%'"></div>
                                    </div>
                                    <span class="text-xs text-gray-300" x-text="item.risk_contribution_pct != null ? item.risk_contribution_pct.toFixed(2) + '%' : '-'"></span>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <span class="px-2 py-0.5 rounded-full text-xs font-semibold"
                                      :class="weightSignalBadge(item.signal)" x-text="(item.signal || '-').replace(/_/g, ' ')"></span>
                            </td>
                            <td class="px-4 py-3 text-xs text-gray-400 max-w-[160px] truncate"
                                x-text="(item.reasons || []).join(', ') || '-'" :title="(item.reasons || []).join(', ')"></td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
        <div x-show="!loading && filteredItems.length === 0" class="text-center py-10">
            <p class="text-gray-500">No data matching your search</p>
        </div>
    </div>
</div>

<script>
function riskParityPanel() {
    return {
        data: {},
        items: [],
        loading: false,
        error: '',
        lastRefresh: null,
        search: '',
        capital: 100000,
        maxPositions: '20',
        sortKey: 'risk_parity_pct',
        sortDir: 'desc',

        get topAllocations() {
            return [...this.items]
                .sort((a, b) => (b.risk_parity_pct || 0) - (a.risk_parity_pct || 0))
                .slice(0, 5);
        },

        get bottomAllocations() {
            return [...this.items]
                .filter(i => (i.risk_parity_pct || 0) > 0)
                .sort((a, b) => (a.risk_parity_pct || 0) - (b.risk_parity_pct || 0))
                .slice(0, 5);
        },

        get filteredItems() {
            let list = [...this.items];
            if (this.search) {
                const q = this.search.toUpperCase();
                list = list.filter(i => (i.symbol || '').toUpperCase().includes(q));
            }
            list.sort((a, b) => {
                const av = a[this.sortKey] || 0;
                const bv = b[this.sortKey] || 0;
                return this.sortDir === 'desc' ? bv - av : av - bv;
            });
            return list;
        },

        toggleSort(key) {
            if (this.sortKey === key) {
                this.sortDir = this.sortDir === 'desc' ? 'asc' : 'desc';
            } else {
                this.sortKey = key;
                this.sortDir = 'desc';
            }
        },

        weightSignalBadge(signal) {
            const map = {
                'OVERWEIGHT': 'bg-green-900/50 text-green-300',
                'EQUAL': 'bg-gray-700/50 text-gray-300',
                'UNDERWEIGHT': 'bg-red-900/50 text-red-300',
            };
            return map[signal] || 'bg-gray-700/50 text-gray-400';
        },

        formatCurrency(v) {
            if (v == null) return '-';
            return Number(v).toLocaleString('id-ID', { maximumFractionDigits: 0 });
        },

        barColor(idx) {
            const colors = [
                '#06b6d4','#3b82f6','#8b5cf6','#ec4899','#f59e0b',
                '#10b981','#ef4444','#6366f1','#14b8a6','#f97316',
                '#84cc16','#a855f7','#0ea5e9','#e11d48','#22c55e',
                '#eab308','#7c3aed','#06b6d4','#dc2626','#2563eb'
            ];
            return colors[idx % colors.length];
        },

        async loadData() {
            this.loading = true;
            this.error = '';
            try {
                const r = await fetch(`/api/v1/market/risk-parity?capital=${this.capital}&limit=${this.maxPositions}&asset_type={{ asset_mode }}`);
                if (r.redirected) { window.location.href = '/auth/login'; return; }
                const json = await r.json();
                if (json.error) { this.error = json.error; this.loading = false; return; }
                this.data = json;
                this.items = json.items || json.results || [];
                this.items.sort((a, b) => (b.risk_parity_pct || 0) - (a.risk_parity_pct || 0));
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
            } catch (e) {
                this.error = 'Failed to load data: ' + e.message;
            }
            this.loading = false;
        }
    };
}
</script>
{% endblock %}