{% extends "base.html" %}
{% block title_key %}backtest.history_title{% endblock %}
{% block title %}Backtest History{% endblock %}

{% block content %}
<h2 class="text-2xl font-bold text-gray-800 mb-4">Riwayat Hasil Backtest</h2>
<p class="text-gray-600 mb-6">Daftar semua simulasi backtest yang telah dijalankan dan disimpan.</p>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Kolom Daftar Riwayat -->
    <div class="lg:col-span-1 bg-white p-4 rounded-lg shadow">
        <h3 class="font-bold text-lg mb-2">Daftar Pengujian</h3>
        <div id="history-list-container" class="max-h-[600px] overflow-y-auto">
            <!-- Daftar akan dimuat di sini oleh JavaScript -->
            <p>Memuat riwayat...</p>
        </div>
    </div>

    <!-- Kolom Detail Hasil -->
    <div id="detail-container" class="lg:col-span-2 bg-white p-6 rounded-lg shadow">
        <div id="detail-view" class="hidden">
            <h3 class="text-xl font-bold mb-2">Detail Hasil Backtest</h3>
            <p class="text-sm text-gray-500 mb-4">ID: <span id="detail-id"></span> | Tanggal: <span id="detail-timestamp"></span></p>
            
            <div id="detail-summary" class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6"></div>
            
            <div class="mb-6">
                <canvas id="detail-equity-chart"></canvas>
            </div>

            <div id="detail-params"></div>
            <div id="detail-log"></div>
        </div>
        <div id="detail-placeholder" class="text-center text-gray-500 py-10">
            <i class="fas fa-search-plus text-4xl mb-4"></i>
            <p>Pilih salah satu hasil dari daftar di samping untuk melihat detailnya.</p>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/backtest_history.js') }}"></script>
{% endblock %}