<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Performance Report</title>
    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
    <style>
        .metrics-table {
            margin-bottom: 2rem;
        }
        
        .text-output {
            width: 100%;
            min-height: 400px;
            font-family: monospace;
            font-size: 14px;
            padding: 1rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <h1>Performance Report</h1>
    
    <div class="metrics-table">
        <h2>Performance Metrics</h2>
        <table>
            <thead>
                <tr>
                    <th>Metric</th>
                    <th>Value</th>
                    <th>Unit</th>
                </tr>
            </thead>
            <tbody>
                {% for metric in metrics %}
                <tr>
                    <td>{{ metric.name }}</td>
                    <td>{{ metric.value }}</td>
                    <td>{{ metric.unit }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <div class="text-section">
        <h2>Detailed Output</h2>
        <textarea class="text-output" readonly>{{ text_content }}</textarea>
    </div>
</body>
</html>
