<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Performance Test Report</title>
    <style>
        /* Inline CSS for styling */
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 20px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1, h2, h3 {
            color: #0056b3;
            margin-bottom: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        .summary {
            margin-top: 20px;
            padding: 15px;
            background-color: #e9ecef;
            border-radius: 5px;
        }

        .summary p {
            margin: 5px 0;
        }

        .charts {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 20px;
        }

        .chart {
            width: 45%;
            min-width: 300px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
            box-sizing: border-box; /* Important for padding */
        }

        .chart img {
            max-width: 100%;
            height: auto;
        }

        @media (max-width: 768px) {
            .container {
                width: 95%;
            }

            .chart {
                width: 100%;
            }
        }

        .bottlenecks {
            margin-top: 20px;
            padding: 15px;
            background-color: #ffebee;
            border-radius: 5px;
            border: 1px solid #ef9a9a;
        }

        .bottlenecks h3 {
            color: #d32f2f;
        }

        .recommendations {
            margin-top: 20px;
            padding: 15px;
            background-color: #e8f5e9;
            border-radius: 5px;
            border: 1px solid #a5d6a7;
        }

        .recommendations h3 {
            color: #388e3c;
        }
    </style>
</head>
<body>

    <!-- Main Container -->
    <div class="container">

        <!-- Report Header -->
        <h1>Performance Test Report</h1>
        <p>Test Run: {{test_run_id}}</p>
        <p>Date: {{report_date}}</p>

        <!-- Test Summary -->
        <div class="summary">
            <h2>Test Summary</h2>
            <p><strong>Test Type:</strong> {{test_type}}</p>
            <p><strong>Target URL:</strong> {{target_url}}</p>
            <p><strong>Number of Users:</strong> {{number_of_users}}</p>
            <p><strong>Duration:</strong> {{duration}}</p>
            <p><strong>Status:</strong> {{test_status}}</p>
        </div>

        <!-- Key Metrics Table -->
        <h2>Key Metrics</h2>
        <table>
            <thead>
                <tr>
                    <th>Metric</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Average Response Time</td>
                    <td>{{average_response_time}} ms</td>
                </tr>
                <tr>
                    <td>Throughput</td>
                    <td>{{throughput}} requests/second</td>
                </tr>
                <tr>
                    <td>Error Rate</td>
                    <td>{{error_rate}} %</td>
                </tr>
                <tr>
                    <td>95th Percentile Response Time</td>
                    <td>{{percentile_95_response_time}} ms</td>
                </tr>
            </tbody>
        </table>

        <!-- Charts -->
        <div class="charts">
            <div class="chart">
                <h3>Response Time Over Time</h3>
                <img src="{{response_time_chart_url}}" alt="Response Time Chart">
            </div>
            <div class="chart">
                <h3>Throughput Over Time</h3>
                <img src="{{throughput_chart_url}}" alt="Throughput Chart">
            </div>
            <!-- Add more charts as needed -->
        </div>

        <!-- Bottleneck Identification -->
        <div class="bottlenecks">
            <h3>Bottleneck Identification</h3>
            <p>{{bottlenecks_summary}}</p>
            <ul>
                {{#bottlenecks}}
                <li>{{.}}</li>
                {{/bottlenecks}}
            </ul>
        </div>

        <!-- Recommendations -->
        <div class="recommendations">
            <h3>Recommendations</h3>
            <p>{{recommendations_summary}}</p>
            <ul>
                {{#recommendations}}
                <li>{{.}}</li>
                {{/recommendations}}
            </ul>
        </div>

    </div>

</body>
</html>