{% from 'transcript.jinja' import transcript_container %}
<!DOCTYPE html>
<html>
    <head>
        <title>Exercism Benchmark Results</title>
        <style>
            {% include 'css/benchmark.css' %}
            {% include 'css/transcript.css' %}
        </style>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                function updateVisibility() {
                    const hash = window.location.hash.substring(1);
                    const resultSections = document.querySelectorAll('.result-section');
                    resultSections.forEach(section => {
                        if (section.id === hash || hash === '') {
                            section.style.display = 'block';
                        } else {
                            section.style.display = 'none';
                        }
                    });
                }

                window.addEventListener('hashchange', updateVisibility);
            });
        </script>
        <script>
            {% include 'js/transcript.js' %}
        </script>
    </head>
    <body>
        <div id="header">
            <p>Average tokens per iteration for passed tests: {{ summary.avgTokens }}</p>
            <p>Passed: {{ summary.passed }}</p>
            <p>Failed: {{ summary.failed }}</p>
            <p>Reasons: {% for reason, count in summary.reasons.items() %}{{ reason }}: {{ count }} {% endfor %}</p>
        </div>
        <div id="container">
            <div id="selector">
                {% for test, result in summary.results_map.items() %}
                    <button class="{{ 'success' if result.passed else 'failure' }}" onclick="window.location.hash='{{ test }}'">{{ test }}</button>
                {% endfor %}
            </div>
            <div id="viewer">
                {% for test, result in summary.results_map.items() %}
                    <div id="{{ test }}" class="result-section">
                        <h1>Instructions:</h1>
                        <div class="content">{{ result.instructions }}</div>
                        <h1>Code:</h1>
                        <div class="content">
                            <pre><code>
                                {{ result.code }}
                            </code></pre>
                        </div>
                        <h1>Analysis:</h1>
                        <div class="content">{{ result.response }}</div>
                        <h1>Test Output:</h1>
                        <div class="content">{{ result['test-output'] }}</div>


                        <h1>Transcript</h1>
                        <div class="content">{{ transcript_container(result["transcript"]) }}</div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </body>
</html>
