{{define "overview-content"}}
<div id="tab-overview" class="tab-content">
    <div class="sticky-header">
        <div class="stats">
            <div class="stat-card">
                <h3>Total Balance</h3>
                <div class="value" id="balance">$0.00</div>
            </div>
            <div class="stat-card">
                <h3>Active Trades</h3>
                <div class="value" id="active-trades">0</div>
            </div>
            <div class="stat-card">
                <h3>Pending Trades</h3>
                <div class="value" id="pending-trades">0</div>
            </div>
        </div>
    </div>

    <h2>Recent Trades</h2>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Symbol</th>
                <th>Action</th>
                <th>Qty</th>
                <th>Status</th>
                <th>Price</th>
                <th>P&L</th>
                <th>Confidence</th>
                <th>Created</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="trades-body-overview">
            <tr><td colspan="10" style="text-align: center;">Loading...</td></tr>
        </tbody>
    </table>
</div>
{{end}}