{% extends "base.html" %}
{% block title %}AI Insights{% endblock %}
{% block page_title %}AI Insights{% endblock %}

{% block content %}
<script>window.CURRENCY_SYMBOL = "{{ currency_symbol }}";</script>
<div class="stats-grid mb-4">
    <div class="glass-card glass-card-primary p-4"><div class="d-flex align-items-center gap-3"><i class="fas fa-heartbeat" style="color: var(--accent-primary); font-size: 24px;"></i><div><small style="color: var(--text-secondary);">Health Score</small><div style="font-size: 22px; font-weight: 700;">{{ "%.0f"|format(summary.health_score) }}/100</div></div></div></div>
    <div class="glass-card glass-card-success p-4"><div class="d-flex align-items-center gap-3"><i class="fas fa-money-bill-wave" style="color: #10B981; font-size: 24px;"></i><div><small style="color: var(--text-secondary);">30d Profit</small><div style="font-size: 22px; font-weight: 700;">{{ currency_symbol }}{{ "{:,.0f}".format(summary.profit_30d) }}</div></div></div></div>
    <div class="glass-card glass-card-warning p-4"><div class="d-flex align-items-center gap-3"><i class="fas fa-exclamation-triangle" style="color: #F59E0B; font-size: 24px;"></i><div><small style="color: var(--text-secondary);">Risk Score</small><div style="font-size: 22px; font-weight: 700;">{{ "%.0f"|format(risk_summary.overall_score) }}</div></div></div></div>
</div>

<div class="glass-card p-4">
    <h5 class="mb-4" style="font-weight: 600;"><i class="fas fa-robot me-2" style="color: var(--accent-primary);"></i>AI-Generated Insights</h5>
    {% for insight in insights %}
    <div class="mb-3 p-4" style="background: rgba(255,255,255,0.03); border-radius: 12px; border-left: 3px solid {% if insight.type == 'warning' %}#F59E0B{% elif insight.type == 'alert' %}#EF4444{% elif insight.type == 'success' %}#10B981{% else %}#00D4FF{% endif %};">
        <div class="d-flex justify-content-between align-items-start mb-2">
            <div class="d-flex align-items-center gap-2">
                <i class="fas fa-{% if insight.type == 'warning' %}exclamation-triangle{% elif insight.type == 'alert' %}bell{% elif insight.type == 'success' %}check-circle{% else %}lightbulb{% endif %}" 
                   style="color: {% if insight.type == 'warning' %}#F59E0B{% elif insight.type == 'alert' %}#EF4444{% elif insight.type == 'success' %}#10B981{% else %}#00D4FF{% endif %};"></i>
                <h6 class="mb-0" style="font-weight: 600;">{{ insight.title }}</h6>
            </div>
            <span class="badge-glass badge-info">{{ insight.confidence }}% confidence</span>
        </div>
        <p style="color: var(--text-secondary); margin-bottom: 12px;">{{ insight.description }}</p>
        <div class="d-flex align-items-center gap-2">
            <i class="fas fa-arrow-right" style="color: var(--accent-primary); font-size: 11px;"></i>
            <span style="font-size: 13px; color: var(--accent-primary);">{{ insight.action }}</span>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}