{% extends "base.html" %}
{% block content %}
{% if not runs %}
<p class="text-muted">No evaluation results yet. Complete a training pipeline run first.</p>
{% else %}
<div class="row mb-3">
  <div class="col-12">
    <h6>Runs</h6>
    <div class="d-flex gap-2 flex-wrap">
      {% for r in runs %}
      <a href="/results?run={{ r.name }}" class="btn btn-sm {% if r.name == selected_run %}btn-primary{% else %}btn-outline-secondary{% endif %}">
        {{ r.name }}
      </a>
      {% endfor %}
    </div>
  </div>
</div>
{% if eval_report %}
<div class="row">
  <div class="col-lg-5">
    <div class="card mb-3">
      <div class="card-header">Leaderboard &mdash; {{ selected_run }}</div>
      <div class="card-body p-0">
        <table class="table table-sm table-dark table-hover mb-0">
          <thead><tr><th>Metric</th><th>Value</th></tr></thead>
          <tbody>
          {% for k, v in eval_report.metrics.items() %}
          <tr><td>{{ k }}</td><td><strong>{{ "%.4f" | format(v) }}</strong></td></tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% if eval_report.feature_importance %}
    <div class="card">
      <div class="card-header">Feature Importance</div>
      <div class="card-body p-0">
        <table class="table table-sm table-dark mb-0">
          {% for feat, score in eval_report.feature_importance.items() %}
          <tr>
            <td>{{ feat }}</td>
            <td>
              <div class="progress" style="height:14px;background:#21262d;">
                <div class="progress-bar bg-info" style="width:{{ (score * 100)|int }}%"></div>
              </div>
            </td>
            <td class="text-end"><small>{{ "%.3f" | format(score) }}</small></td>
          </tr>
          {% endfor %}
        </table>
      </div>
    </div>
    {% endif %}
  </div>
  <div class="col-lg-7">
    {% if compare_report %}
    <div class="card">
      <div class="card-header">Compare: {{ selected_run }} vs {{ compare_run }}</div>
      <div class="card-body p-0">
        <table class="table table-sm table-dark mb-0">
          <thead><tr><th>Metric</th><th>{{ selected_run }}</th><th>{{ compare_run }}</th><th>Delta</th></tr></thead>
          <tbody>
          {% for k in all_metrics %}
          {% set va = eval_report.metrics.get(k) %}
          {% set vb = compare_report.metrics.get(k) %}
          <tr>
            <td>{{ k }}</td>
            <td>{% if va is not none %}{{ "%.4f" | format(va) }}{% else %}&mdash;{% endif %}</td>
            <td>{% if vb is not none %}{{ "%.4f" | format(vb) }}{% else %}&mdash;{% endif %}</td>
            <td>
              {% if va is not none and vb is not none %}
              {% set delta = vb - va %}
              <span class="{% if delta > 0 %}metric-delta-pos{% elif delta < 0 %}metric-delta-neg{% endif %}">
                {{ "%+.4f" | format(delta) }}
              </span>
              {% else %}&mdash;{% endif %}
            </td>
          </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}
    <div id="metrics-chart" class="mt-3"></div>
    {% if eval_report.metrics %}
    <script>
    Plotly.newPlot('metrics-chart', [{
      type: 'bar',
      x: {{ eval_report.metrics.keys()|list|tojson }},
      y: {{ eval_report.metrics.values()|list|tojson }},
      marker: { color: '#58a6ff' }
    }], {
      paper_bgcolor: '#161b22',
      plot_bgcolor: '#0d1117',
      font: { color: '#e6edf3' },
      margin: { t: 20, b: 40, l: 40, r: 20 },
      height: 220
    });
    </script>
    {% endif %}
  </div>
</div>
{% else %}
<p class="text-muted">No eval report for {{ selected_run }}.</p>
{% endif %}
{% endif %}
{% endblock %}