<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Evaluation Report — {{ models | join(", ") if models else "N/A" }}</title>
  <style>
{% include 'css/base.css' %}
  </style>
  <!-- Plotly.js via CDN -->
  <script src="https://cdn.plot.ly/plotly-2.35.2.min.js" charset="utf-8"></script>
</head>
<body>

{% include 'partials/toc_eval.html' %}

<!-- ── Back to top ────────────────────────────────────────────── -->
<a href="#top" class="back-to-top" id="back-to-top" aria-label="Back to top">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
    <polyline points="18 15 12 9 6 15"/>
  </svg>
</a>

<div class="container" id="top">

  {% include 'partials/header_eval.html' %}

  <!-- ── Overview ────────────────────────────────────────────── -->
  <section class="section" id="section-overview">
    <div class="section-header">
      <div class="section-icon">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/>
          <rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/>
        </svg>
      </div>
      <h2 class="section-title" data-i18n="section.overview">Overview</h2>
    </div>

    {% if summary_rows %}
    <div class="card">
      <div class="card-header">
        <span class="card-title" data-i18n="card.score_summary">Score Summary</span>
        <span class="card-badge">{{ summary_rows | length }} <span data-i18n="badge.entries">entries</span></span>
      </div>
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th data-i18n="col.dataset">Dataset</th>
              <th data-i18n="col.model">Model</th>
              <th data-i18n="col.metric">Metric</th>
              <th data-i18n="col.score">Score</th>
              <th data-i18n="col.num">Num</th>
            </tr>
          </thead>
          <tbody>
            {% for row in summary_rows %}
            <tr>
              <td><span class="tag">{{ row.dataset }}</span></td>
              <td>{{ row.model }}</td>
              <td><span class="metric-tag">{{ row.metric }}</span></td>
              <td class="score-cell">{{ "%.4f" | format(row.score) }}</td>
              <td class="num-cell">{{ row.num }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}

    {% if overview_chart_div %}
    <div class="card">
      <div class="card-header">
        <span class="card-title" data-i18n="card.overview_chart">Overall Score Chart</span>
      </div>
      <div class="chart-wrap">{{ overview_chart_div | safe }}</div>
    </div>
    {% endif %}

    {% if sunburst_chart_div %}
    <div class="card">
      <div class="card-header">
        <span class="card-title" data-i18n="card.score_dist">Score Distribution</span>
      </div>
      <div class="chart-wrap">{{ sunburst_chart_div | safe }}</div>
    </div>
    {% endif %}

  </section>

  <!-- ── Results by Dataset ───────────────────────────────────── -->
  <section class="section" id="section-results">
    <div class="section-header">
      <div class="section-icon">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M9 11l3 3L22 4"/>
          <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>
        </svg>
      </div>
      <h2 class="section-title" data-i18n="section.results">Results by Dataset</h2>
    </div>

    {% for ds in dataset_sections %}
    <details class="ds-card" id="ds-{{ loop.index }}" {% if loop.first %}open{% endif %}>
      <summary class="ds-summary">
        <div class="ds-summary-left">
          <span class="ds-arrow">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
              <polyline points="9 18 15 12 9 6"/>
            </svg>
          </span>
          <span class="ds-name">{{ ds.pretty_name }}</span>
        </div>
        <div class="ds-summary-right">
          <span class="score-pill" data-score="{{ ds.overall_score }}">{{ "%.4f" | format(ds.overall_score) }}</span>
        </div>
      </summary>

      <div class="ds-body">

        {% if ds.description_en or ds.description_zh %}
        <details class="inner-toggle">
          <summary>
            <span class="inner-arrow">
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
                <polyline points="9 18 15 12 9 6"/>
              </svg>
            </span>
            <span data-i18n="toggle.description">Description</span>
          </summary>
          <div class="ds-description">
            {% if ds.description_en %}
            <div class="desc-lang-content" data-desc-lang="en">{{ ds.description_en | safe }}</div>
            {% endif %}
            {% if ds.description_zh %}
            <div class="desc-lang-content" data-desc-lang="zh" style="display:none">{{ ds.description_zh | safe }}</div>
            {% endif %}
          </div>
        </details>
        {% endif %}

        {% for msec in ds.model_sections %}

          {% if ds.multi_model %}
          <div class="model-tag">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
            </svg>
            {{ msec.model_name }}
          </div>
          {% endif %}

          {% if msec.subset_rows %}
          <div class="card" style="margin-bottom:1rem;">
            <div class="table-wrap">
              <table>
                <thead>
                  <tr>
                    {% if msec.show_category %}
                    <th data-i18n="col.category">Category</th>
                    {% endif %}
                    <th data-i18n="col.subset">Subset</th>
                    <th data-i18n="col.metric">Metric</th>
                    <th data-i18n="col.score">Score</th>
                    <th data-i18n="col.num">Num</th>
                  </tr>
                </thead>
                <tbody>
                  {% for row in msec.subset_rows %}
                  <tr>
                    {% if msec.show_category %}
                    <td><span class="tag">{{ row.category }}</span></td>
                    {% endif %}
                    <td>{{ row.subset }}</td>
                    <td><span class="metric-tag">{{ row.metric }}</span></td>
                    <td class="score-cell">{{ "%.4f" | format(row.score) }}</td>
                    <td class="num-cell">{{ row.num }}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
          {% endif %}

          {% if msec.chart_div %}
          <div class="sub-card">
            <div class="sub-card-header">
              {{ ds.pretty_name }}{% if ds.multi_model %} &mdash; {{ msec.model_name }}{% endif %} &middot; <span data-i18n="card.subset_scores">Subset Scores</span>
            </div>
            <div class="chart-wrap">{{ msec.chart_div | safe }}</div>
          </div>
          {% endif %}

          {% if msec.analysis_html %}
          <details class="inner-toggle" open>
            <summary>
              <span class="inner-arrow">
                <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
                  <polyline points="9 18 15 12 9 6"/>
                </svg>
              </span>
              <span data-i18n="toggle.analysis">Analysis</span>
            </summary>
            <div class="analysis-section">{{ msec.analysis_html | safe }}</div>
          </details>
          {% endif %}

        {% endfor %}

      </div>
    </details>
    {% endfor %}

  </section>

  <!-- ── Footer ──────────────────────────────────────────────── -->
  {% include 'partials/footer.html' %}

</div><!-- /container -->

<script>
(function () {
  'use strict';

var DEFAULT_LANG = '{{ default_lang }}';

{% include 'js/i18n_eval.js' %}
{% include 'js/shared.js' %}
{% include 'js/eval_extra.js' %}

}());
</script>

</body>
</html>
