{% extends "base.html" %}
{% block title %}Analysis{% endblock %}

{% block content %}
<div class="space-y-6">
    <h1 class="text-2xl font-bold text-white">Analysis</h1>

    <!-- Algorithm Info -->
    <div class="glass rounded-xl border border-gray-800 p-4">
        <div class="flex items-center justify-between">
            <h3 class="text-sm font-semibold text-gray-400">Engine Status</h3>
            <span class="text-xs text-emerald-400">{{ algorithms|length }} algorithms registered</span>
        </div>
        <div class="flex flex-wrap gap-2 mt-2">
            {% for algo in algorithms %}
            <span class="text-xs px-2 py-1 rounded-full
                {% if algo.category == 'technical' %}bg-blue-900/40 text-blue-300 border border-blue-800
                {% elif algo.category == 'patterns' %}bg-purple-900/40 text-purple-300 border border-purple-800
                {% elif algo.category == 'quantitative' %}bg-amber-900/40 text-amber-300 border border-amber-800
                {% else %}bg-gray-900/40 text-gray-300 border border-gray-800{% endif %}">
                {{ algo.name }}
            </span>
            {% endfor %}
        </div>
    </div>

    <!-- Quick Analysis Grid -->
    <h2 class="text-lg font-semibold text-white">Pilih {{ item_label }} untuk Analisis</h2>

    {% if watchlist %}
    <h3 class="text-sm text-gray-400">Watchlist</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for item in watchlist %}
        <a href="/market/asset/{{ item.asset_id }}?tab=analysis"
           class="glass rounded-xl border border-gray-800 p-4 hover:border-koin-700 transition group"
           x-data="{ score: null, loading: false }"
           x-init="loading=true; fetch('/api/v1/analysis/score/{{ item.asset_id }}?timeframe=1h').then(r=>r.json()).then(d=>{score=d;loading=false}).catch(()=>loading=false)">
            <div class="flex items-center justify-between">
                <span class="font-semibold text-white group-hover:text-koin-300">{{ item.asset_id }}</span>
                <template x-if="!loading && score">
                    <span class="text-sm font-mono font-bold"
                          :class="score.signal==='BUY'?'text-emerald-400':score.signal==='SELL'?'text-red-400':'text-gray-400'"
                          x-text="score.signal + ' (' + score.score + ')'"></span>
                </template>
                <template x-if="loading">
                    <span class="text-xs text-gray-500">Loading...</span>
                </template>
            </div>
            <p class="text-xs text-gray-500 mt-1">{{ item.notes or 'Klik untuk analisis lengkap' }}</p>
        </a>
        {% endfor %}
    </div>
    {% endif %}

    <h3 class="text-sm text-gray-400 mt-4">Semua {{ item_label }}</h3>
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-3">
        {% for coin in coins %}
        <a href="/market/asset/{{ coin.id }}?tab=analysis"
           class="glass rounded-lg border border-gray-800 px-4 py-3 hover:border-koin-700 transition">
            <span class="font-medium text-white">{{ coin.name }}</span>
            <span class="text-gray-500 text-xs ml-1">{{ coin.symbol }}</span>
        </a>
        {% endfor %}
    </div>
</div>
{% endblock %}