<div class="flex-between" style="gap: 1rem;">
    <div class="container flex-between" style="gap: 0.5rem;">
        <div class="stat-card">
            <p class="stat-label">Executed</p>
            <p class="stat-value" data-testid="tests-executed">{{ total }}</p>
        </div>

        <div class="stat-card passed">
            <p class="stat-label">Passed</p>
            <p class="stat-value" id="passed" data-testid="tests-passed">{{ passed }}</p>
        </div>

        <div class="stat-card skipped">
            <p class="stat-label">Skipped</p>
            <p class="stat-value" id="skipped" data-testid="tests-skipped">{{ skipped }}</p>
        </div>

        <div class="stat-card failed">
            <p class="stat-label">Failed</p>
            <p class="stat-value" id="failed" data-testid="tests-failed">{{ failed }}</p>
        </div>
    </div>

    <div class="container flex-between" style="gap: 0.5rem;">
        <div class="stat-card">
            <p class="stat-label">Pass Rate</p>
            <p class="stat-value" data-testid="passed-rate">{{ pass_rate }}%</p>
        </div>
        <div class="stat-card">
            <p class="stat-label">Fail Rate</p>
            <p class="stat-value" data-testid="failed-rate">{{ fail_rate }}%</p>
        </div>

        <div class="stat-card">
            <p class="stat-label">Duration</p>
            {% import './components/duration.html' as execution %}
            {{execution.statistics(duration)}}
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const passed = parseInt("{{passed}}");
            const failed = parseInt("{{failed}}");

            if (failed === 0 && passed > 0) {
                // Trigger confetti 🎉
                setTimeout(() => {
                    confetti({
                        particleCount: 150,
                        angle: 90,
                        spread: 90,
                        origin: { x: 0.5, y: 1.1 },
                        colors: ['#15803d', '#dcfce7', '#16a34a']
                    });
                }, 300);
            }
        });
    </script>
</div>