<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>{{ formatted_date }}</title>

        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 2rem;
            }

            .pass {
                color: green;
                font-weight: bold;
            }

            .fail {
                color: red;
                font-weight: bold;
            }

            .test-card {
                border: 1px solid #ccc;
                border-radius: 8px;
                padding: 1rem;
                margin-bottom: 1rem;
            }

            pre {
                background: #f5f5f5;
                padding: 1rem;
                border-radius: 4px;
            }
        </style>
    </head>
    <body>
        <h1>Test performed on {{ formatted_date }}</h1>
        <h2>{{ passed_tests }} of {{ total_tests }} tests passed</h2>

        {% for test_name, result in results["Test results"].items() %}
        <div
            class="test-card {% if result.success %}passed-test{% else %}failed-test{% endif %}"
        >
            <h2>{{ test_name }}</h2>

            {% if result.success %}
            <p class="pass">PASS</p>
            {% else %}
            <p class="fail">FAIL</p>
            {% endif %} {% if result.harvest_data %}
            <h3>Test Data:</h3>

            {% for key, value in result.harvest_data.items() %}
            <p>
                <strong>{{ key.replace('_', ' ').title() }}:</strong>
                {{ value }}
            </p>
            {% endfor %} {% endif %} {% if result.log %}
            <h3>Logs:</h3>
            {% for log in result.log %}
            <p>{{ log }}</p>
            {% endfor %} {% endif %}
        </div>
        {% endfor %}
    </body>
</html>
