{% from 'transcript.jinja' import transcript_container %}
<!DOCTYPE html>
<html>
    <head>
        <title>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">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <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>
            function toggleVisibility(family) {
                const familyButtons = document.querySelectorAll('.' + family + '-child');
                familyButtons.forEach(button => {
                    button.classList.toggle('hidden');
                });
            }
        </script>
        <script>
            {% include 'js/transcript.js' %}
        </script>
    </head>
    <body>
        <div id="header">
            {% for field, data in benchmark_run.summary.formatted_summary().items() %}
                <p>{{ field|capitalize }}: {{ data }}</p>
            {% endfor %}
        </div>
        <div id="container">
            <div id="selector">
                {% for family, results in benchmark_run.result_groups.items() %}
                    {% if results|length == 1 %}
                        <button class="{{ results[0].display_color() }}" onclick="window.location.hash='{{ results[0].name }}'">{{ results[0].name }}</button>
                    {% else %}
                        <button class="{{ results[0].display_color() }}" onclick="toggleVisibility('{{family}}')">{{family}}</button>
                        {% for result in results %}
                            <button class="hidden {{ family }}-child family-child {{ result.display_color() }}" onclick="window.location.hash='{{ result.name }}'">{{ result.name }}</button>
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            </div>
            <div id="viewer">
                {% for test, formatted_result in benchmark_run.formatted_results().items() %}
                    <div id="{{ test }}" class="result-section">
                        {% for display_name, section in formatted_result.items() %}
                        <h1>{{ display_name|capitalize }}</h1>
                            <div class="content">
                                {% if section.type == "text" %}
                                    {{ section.content |escape }}
                                {% elif section.type == "code" %}
                                    <pre><code>{{ section.content |escape }}</code></pre>
                                {% elif section.type == "json" %}
                                    <pre>{{ section.content |tojson(indent=4)|safe}}</pre>
                                {% elif section.type == "transcript" %}
                                    {{ transcript_container(section.content) }}
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </body>
</html>
