{% extends "base.html" %}

{% from "macros/breadcrumb.html" import breadcrumb %}
{% from "macros/interpret_safety_ratings.html" import interpret_safety_ratings %}
{% from "macros/use_hazards_limitations.html" import use_hazards_limitations %}


{% block title %}{{ benchmark_name }} Benchmark{% endblock %}

{% block content %}
    <div class="mlc--section__topline">
      {{ breadcrumb(None, benchmark_definition, page_type=page_type, view_embed=view_embed) }}
    </div>

    <div class="mlc--section">
        <h1 class="mlc--header">{{ content(benchmark_definition, "name") }}</h1>
    </div>

    {% include "_provisional.html" %}

    {{ use_hazards_limitations(benchmark_definition) }}

    {{ interpret_safety_ratings() }}

    <div class="mlc--section__header">
        <h2>AI Systems Evaluated</h2>
        <p>
            {{ content("general", "ai_systems_evaluated") }}
        </p>
    </div>

    <figure class="mlc--section overflow-auto mlc--table__box-shadow">
        <table class="mlc--table__ai-systems">
            <thead>
            <tr>
                <th>AI System</th>
                <th>Overall Safety Rating</th>
                <th colspan="2">Explanation</th>
            </tr>
            </thead>
            <tbody>
            {% for benchmark_score in grouped_benchmark_scores[benchmark_definition] %}
                <tr>
                    <td>{{ content(benchmark_score.sut, "name") }}</td>
                    <td>
                        <div class="mlc--test-score-item__rank__container">
                            <span class="mlc--test-score-item__rank mlc--grade-background__{{ benchmark_score.numeric_grade() | string }}">{{ content("grades", benchmark_score.numeric_grade() | string)["rank"] }}</span>
                            <span class="mlc--test-score-item__explanation">{{ content("grades", benchmark_score.numeric_grade() | string)["explanation"] }}</span>
                        </div>
                    </td>
                    <td>
                        {{ content("grades", benchmark_score.numeric_grade() | string)["long_description"] }}
                    </td>
                    <td class="mlc--button-container__align-right">
                        <a role="button" class="mlc--button__sm"
                          href="{{ test_report_path(benchmark_score.sut.key, benchmark_score.benchmark_definition.path_name(), page_type=page_type) }}"><span class="mlc--button-content">Show
                          Details </span>&gt;</a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </figure>

    <hr>

    <article class="mlc--card__muted-background">
        <h4>Don't see the AI system you are looking for?</h4>
        <p>
            {{ content("general", "new_benchmarks") | safe }}
        </p>
    </article>
{% endblock %}