{% extends "base.html" %}
{% block title %}Load Test Results - {{ scenario }}{% endblock %}

{% block content %}
<main class="max-w-4xl mx-auto px-4 py-8">
<section class="text-center mb-10">
    <h2 class="text-3xl font-bold mb-6 text-center">
        Load Test Results: {{ scenario }}
    </h2>

    <!-- Progress indicator -->
    <p>{{ progress }}</p>
</section>
    <!--<div class="grid grid-cols-1 md:grid-cols-2 gap-8">-->
    <section class="grid gap-8">
        {% for metric, chart_path in charts.items() %}
        <div class="bg-white shadow rounded-2xl p-6">
            <h3 class="text-xl font-semibold mb-4 text-gray-800">
                {{ metric }}
            </h3>
            <img src="{{ url_for('static', filename=chart_path.replace('static/', '')) }}"
                 alt="{{ metric }} chart"
                 class="w-full rounded-xl mb-4 shadow"
            style="width: 100%;">
            <p class="text-gray-700 leading-relaxed">
                {{ metric_descriptions[metric] }}
            </p>
        </div>
        {% endfor %}
    </section>
    <!--</div>-->


    <section class="text-center mt-12">
        <a href="{{ url_for('demo') }}"
           class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-2xl shadow">
           🔄 Run Another Test
        </a>
    </section>

    <div class="mt-12 bg-blue-50 border-l-4 border-blue-600 p-6 rounded-xl">
        <h3 class="text-2xl font-bold text-blue-800 mb-2">Why These Results Matter</h3>
        <p class="text-gray-700 leading-relaxed mb-4">
            Load testing is more than numbers — it’s about ensuring your website stays fast,
            reliable, and profitable under pressure. By identifying bottlenecks before your customers
            do, you protect sales, trust, and brand reputation.
        </p>
        <p class="text-gray-800 font-medium">
            📩 Want to test your website? Contact me at 
            <a href="mailto:arek@errorrate.net" class="text-blue-600 underline">arek@errorrate.net</a>
        </p>
    </div>

</main>
{% endblock %}