{% extends "base.html" %}
{% block title %}{{ ui.home.live_title }} · {{ agg.assessment_name or agg.assessment_id }}{% endblock %}

{% set band_color = {'strong': '#16a34a', 'acceptable': '#2563eb', 'material': '#d97706', 'high': '#ea580c', 'critical': '#dc2626', 'unknown': '#8a93a5'} %}
{% set overall_key = band_key(agg.overall_score) %}

{% block content %}
<div class="results-head">
  <div class="container">
    <div class="title-row">
      <div>
        <h1>{{ agg.assessment_name or ui.home.live_title }}</h1>
        <div class="sub">
          <span class="badge badge--pro">{{ ui.home.live_title }}</span>
          {{ agg.framework_name }} &middot; {{ agg.created_at }}
        </div>
      </div>
      <a href="{{ url_for('main.pro') }}" class="btn btn-secondary">{{ ui.common.new_assessment }}</a>
    </div>
  </div>
</div>

<div class="container">
  <div class="overview">
    <div class="score-panel">
      <div class="gauge">
        <svg viewBox="0 0 176 176" width="176" height="176">
          <circle cx="88" cy="88" r="74" fill="none" stroke="#e8ebf1" stroke-width="12"></circle>
          <circle cx="88" cy="88" r="74" fill="none" stroke-width="12"
                  stroke="{{ band_color.get(overall_key, '#8a93a5') }}" stroke-linecap="round"
                  transform="rotate(-90 88 88)" data-score="{{ agg.overall_score }}"></circle>
        </svg>
        <div class="gauge-value">
          <div class="num">{{ '%.0f'|format(agg.overall_score) }}</div>
          <div class="lbl">/ 100</div>
        </div>
      </div>
      <div>
        {% if agg.risk_level %}
        <span class="badge badge--{{ overall_key }}"><span class="dot dot--{{ overall_key }}"></span>{{ agg.risk_level }}</span>
        {% endif %}
      </div>
      <div class="stat-row">
        <div class="stat"><div class="v">{{ agg.flagged_case_count }}</div><div class="k">{{ report.flagged_cases }}</div></div>
        <div class="stat"><div class="v">{{ agg.critical_case_count }}</div><div class="k">{{ report.critical }}</div></div>
        <div class="stat"><div class="v">{{ agg.case_count }}</div><div class="k">{{ report.cases_count }}</div></div>
      </div>
    </div>

    <div class="dims-panel">
      {% for dim in framework.dimensions %}
        {% set s = agg.dimension_scores.get(dim.id) %}
        {% set k = band_key(s) %}
        <div class="dim-row">
          <div class="dim-row-head">
            <span class="name">{{ dim.name }}</span>
            <span class="score">{{ ('%.0f'|format(s)) if s is not none else ui.common.n_a }}</span>
          </div>
          <div class="bar"><span class="{{ k }}" data-score="{{ s if s is not none else 0 }}"></span></div>
        </div>
      {% endfor %}
      {% if agg.highest_risk_dimension.id %}
      <div class="small muted" style="margin-top:4px;">
        {{ report.highest_risk_dimension }}:
        <strong>{{ DIMENSION_MAP[agg.highest_risk_dimension.id].name }}</strong>
        ({{ '%.0f'|format(agg.highest_risk_dimension.score) }})
      </div>
      {% endif %}
    </div>
  </div>

  <div class="list-panel">
    <div class="block" style="margin-top:0;">
      <h3>{{ report.target_model }}</h3>
      <div class="meta" style="display:flex;flex-wrap:wrap;gap:8px;">
        <span class="badge">{{ agg.target_model.name }}</span>
        {% if agg.target_model.base_url %}
        <span class="badge">{{ agg.target_model.base_url }}</span>
        <span class="badge">{{ agg.target_model.model_name }}</span>
        {% endif %}
        <span class="badge">{{ models.evaluation_engine_label }} &middot; {{ agg.assessment_engine }}</span>
        <span class="badge">{{ report.evaluation_confidence }} {{ agg.evaluation_confidence }}</span>
      </div>
      <div class="small faint" style="margin-top:10px;">
        {{ report.evaluation_framework }} {{ agg.framework_name }} &middot;
        {{ report.framework_version }} {{ agg.framework_version }} &middot;
        {{ report.rubric_version }} {{ agg.rubric_version }}
      </div>
    </div>
  </div>

  {% if agg.errors %}
  <div class="list-panel">
    <div class="block" style="border-left:4px solid var(--material);">
      <h3>Some cases could not be completed</h3>
      {% for e in agg.errors %}
      <div class="small" style="padding:4px 0;color:var(--material);">{{ e.case_id }}: {{ e.error }}</div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <div class="list-panel">
    <h2>{{ report.cases_tested }}</h2>
    <p class="muted small">{{ report.cases_tested_hint }}</p>
    <div class="panel-card">
      <table class="case-table">
        <thead>
          <tr><th>Case</th><th>Title</th><th>Family</th><th>Severity</th><th>Score</th><th>Risk</th><th></th></tr>
        </thead>
        <tbody>
          {% for c in agg.cases %}
            {% set ck = band_key(c.overall_score) %}
          <tr>
            <td class="mono">{{ c.case_id }}</td>
            <td>{{ c.title }}</td>
            <td class="faint small">{{ c.scenario_family|replace('_', ' ') }}</td>
            <td class="faint small">{{ c.severity }}</td>
            <td><span class="score-chip {{ ck }}">{{ '%.0f'|format(c.overall_score) }}</span></td>
            <td>
              <span class="badge badge--{{ ck }}"><span class="dot dot--{{ ck }}"></span>{{ c.risk_band }}</span>
              {% if c.critical_override %}<span class="badge badge--critical" style="margin-left:6px;">override</span>{% endif %}
            </td>
            <td><a class="case-link" href="{{ url_for('main.case_detail', assessment_id=agg.assessment_id, case_id=c.case_id) }}">{{ ui.common.inspect }} &rarr;</a></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="list-panel">
    <h2>{{ report.responsibility_gaps }}</h2>
    <div class="panel-card">
      {% if agg.responsibility_gaps %}
        {% for g in agg.responsibility_gaps %}
        <div class="finding"><span class="case-ref">{{ g.case_id }}</span><p>{{ g.text }}</p></div>
        {% endfor %}
      {% else %}<div class="empty">{{ report.no_gaps }}</div>{% endif %}
    </div>
  </div>

  <div class="list-panel">
    <h2>{{ report.affected_parties_overlooked }}</h2>
    <div class="panel-card">
      {% if agg.affected_parties_overlooked %}
        {% for g in agg.affected_parties_overlooked %}
        <div class="finding"><span class="case-ref">{{ g.case_id }}</span><p>{{ g.text }}</p></div>
        {% endfor %}
      {% else %}<div class="empty">{{ report.no_overlooked }}</div>{% endif %}
    </div>
  </div>

  <div class="list-panel">
    <h2>{{ report.governance_recommendations }}</h2>
    <div class="panel-card">
      {% if agg.governance_recommendations %}
        {% for g in agg.governance_recommendations %}
        <div class="finding"><span class="case-ref">{{ g.case_id }}</span><p>{{ g.text }}</p></div>
        {% endfor %}
      {% else %}<div class="empty">{{ report.no_recommendations }}</div>{% endif %}
    </div>
  </div>
</div>
{% endblock %}