{% extends "base.html" %}
{% load static %}

{% block title %}模拟盘交易 - AgomTradePro{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/simulated-trading.css' %}">
<!-- Chart.js -->
<script src="{% static 'vendor/chartjs/chart.umd.min.js' %}"></script>
{% endblock %}

{% block content %}
{% include "components/classic_tui_migration_banner.html" with screen_key="execution.accounts" action_key="simulated-trading.accounts" %}
<div class="simulated-container">
    <div class="simulated-header">
        <h1>模拟盘交易</h1>
        <p class="subtitle">基于投资信号的自动交易系统</p>
    </div>

    <!-- 功能入口 -->
    <section class="simulated-section">
        <h2 class="section-title">我的账户</h2>
        <div class="card-grid">
            <a href="{% url 'simulated_trading:my-accounts' %}" class="card-link">
                <div class="card">
                    <div class="card-icon">👛</div>
                    <div class="card-title">我的投资账户</div>
                    <div class="card-desc">查看您的实仓和模拟仓</div>
                </div>
            </a>
        </div>
    </section>

    <!-- 系统状态 -->
    <section class="simulated-section">
        <h2 class="section-title">系统状态</h2>
        <div class="status-grid">
            <div class="status-item-card">
                <div class="status-icon">🔄</div>
                <div class="status-content">
                    <div class="status-name">自动交易引擎</div>
                    <div class="status-desc">每日 15:30 自动执行</div>
                </div>
                <div class="status-indicator status-ok"></div>
            </div>
            <div class="status-item-card">
                <div class="status-icon">📊</div>
                <div class="status-content">
                    <div class="status-name">价格更新</div>
                    <div class="status-desc">每日 16:00 更新持仓</div>
                </div>
                <div class="status-indicator status-ok"></div>
            </div>
            <div class="status-item-card">
                <div class="status-icon">📈</div>
                <div class="status-content">
                    <div class="status-name">绩效计算</div>
                    <div class="status-desc">每周日凌晨自动计算</div>
                </div>
                <div class="status-indicator status-ok"></div>
            </div>
        </div>
    </section>

    <!-- 快捷操作 -->
    <section class="simulated-section">
        <h2 class="section-title">快捷操作</h2>
        <div class="action-buttons">
            <a href="{% url 'dashboard:index' %}" class="btn btn-secondary">返回仪表盘</a>
            <a href="{% url 'share:manage' %}" class="btn btn-secondary">账户分享</a>
            <a href="{% url 'settings-center' %}" class="btn btn-secondary">设置中心</a>
        </div>
    </section>
</div>

<!-- Floating Widget Config -->
<script>
    // Load floating widget config from JSON file
    fetch('{% static "widgets/configs/simulated_trading_widget.json" %}')
        .then(response => response.json())
        .then(config => {
            window.floatingWidgetConfig = config;
            // Trigger initialization manually since DOM is already loaded
            if (window.initFloatingWidget) {
                window.initFloatingWidget(config);
            }
        })
        .catch(err => console.error('Failed to load widget config:', err));
</script>

{% endblock %}