
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Portfolio Performance Report</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        .header { background: #f5f5f5; padding: 20px; margin-bottom: 20px; }
        .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .metric-box { border: 1px solid #ddd; padding: 15px; border-radius: 4px; }
        .metric-label { color: #666; font-size: 12px; font-weight: 600; }
        .metric-value { font-size: 24px; font-weight: bold; margin-top: 5px; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th { background: #f5f5f5; padding: 10px; text-align: left; font-weight: 600; }
        td { padding: 10px; border-bottom: 1px solid #eee; }
    </style>
</head>
<body>
    <div class="header">
        <h1>Portfolio Performance Report</h1>
        <p>{{ timestamp }}</p>
    </div>

    <div class="metrics">
        <div class="metric-box">
            <div class="metric-label">Total Return</div>
            <div class="metric-value">{{ performance.total_return | percent }}</div>
        </div>
        <div class="metric-box">
            <div class="metric-label">Sharpe Ratio</div>
            <div class="metric-value">{{ performance.sharpe_ratio | round(2) }}</div>
        </div>
        <div class="metric-box">
            <div class="metric-label">Volatility</div>
            <div class="metric-value">{{ performance.volatility | percent }}</div>
        </div>
        <div class="metric-box">
            <div class="metric-label">Max Drawdown</div>
            <div class="metric-value">{{ performance.max_drawdown | percent }}</div>
        </div>
    </div>

    {% if holdings %}
    <h2>Holdings</h2>
    <table>
        <thead>
            <tr>
                <th>Symbol</th>
                <th>Shares</th>
                <th>Price</th>
                <th>Value</th>
                <th>Return</th>
            </tr>
        </thead>
        <tbody>
            {% for holding in holdings %}
            <tr>
                <td>{{ holding.symbol }}</td>
                <td>{{ holding.quantity }}</td>
                <td>{{ holding.current_price | currency }}</td>
                <td>{{ holding.current_value | currency }}</td>
                <td>{{ holding.return_pct | percent }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}
</body>
</html>
