<!DOCTYPE html>
<html>
<head>
    <title>MT5 Trade Analytics Dashboard</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>

<div class="container">
    <h1>MT5 Trade Analytics Dashboard</h1>
    <p class="subtitle">Summary statistics computed from stored closed trade records.</p>

    <div class="section">
        <h2>Performance Summary</h2>

        <div class="grid">
            <div class="card">
                <span class="label">Total Trades</span>
                <strong>{{ total_trades }}</strong>
            </div>

            <div class="card">
                <span class="label">Total Profit</span>
                <strong>{{ total_profit }}</strong>
            </div>

            <div class="card">
                <span class="label">Win Rate</span>
                <strong>{{ win_rate }}%</strong>
            </div>
        </div>
    </div>

    <div class="section">
        <h2>Trade Breakdown</h2>

        <div class="grid">
            <div class="card">
                <span class="label">Winning Trades</span>
                <strong>{{ winning_trades }}</strong>
            </div>

            <div class="card">
                <span class="label">Losing Trades</span>
                <strong>{{ losing_trades }}</strong>
            </div>

            <div class="card">
                <span class="label">Average Profit</span>
                <strong>{{ average_profit }}</strong>
            </div>
        </div>
    </div>

    <div class="section">
        <h2>Trade Duration</h2>

        <div class="grid">
            <div class="card">
                <span class="label">Average Duration</span>
                <strong>{{ average_duration }} sec</strong>
            </div>

            <div class="card">
                <span class="label">Maximum Duration</span>
                <strong>{{ max_duration }} sec</strong>
            </div>

            <div class="card">
                <span class="label">Minimum Duration</span>
                <strong>{{ min_duration }} sec</strong>
            </div>
        </div>
    </div>
</div>

</body>
</html>