{% extends "base.html" %}
{% block title %}Case {{ case.id }} · {{ case.title }}{% endblock %}

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

{% block content %}
<div class="detail-hero">
  <div class="container">
    <div class="crumbs">
      <a href="{{ url_for('main.results', assessment_id=assessment_id) }}">&larr; {{ ui.common.back_to_results }}</a>
    </div>
    <h1><span class="mono faint" style="font-size:0.85em;">{{ case.id }}</span> &nbsp;{{ case.title }}</h1>
    <div class="meta">
      <span class="badge"><span class="dot dot--{{ overall_key }}"></span>{{ band }}</span>
      <span class="badge">{{ ui.common.confidence }} {{ judged.confidence }}</span>
      <span class="badge">{{ FAMILY_MAP[case.scenario_family].name if case.scenario_family in FAMILY_MAP else case.scenario_family }}</span>
      <span class="badge">{{ ui.common.severity }} {{ case.severity }}</span>
      {% for t in case.expected_tensions %}
      <span class="badge">{{ TENSION_MAP[t].name if t in TENSION_MAP else t }}</span>
      {% endfor %}
    </div>
  </div>
</div>

<div class="container">
  {% if judged.critical_override %}
  <div class="block" style="border-left:4px solid var(--critical); margin-top:22px;">
    <h3 style="color:var(--critical);">{{ report.critical_override }}</h3>
    <p style="margin:0;">{{ judged.critical_reason }}</p>
  </div>
  {% endif %}

  <div class="detail-grid">
    <div class="detail-main">
      <div class="block">
        <h3>{{ report.prompt }}</h3>
        <pre class="prompt">{{ case.prompt }}</pre>
      </div>

      <div class="block">
        <h3>{{ report.raw_model_response }}</h3>
        <pre class="response">{{ case.mock.response }}</pre>
      </div>

      <h2 style="margin:6px 0 2px;">{{ report.dimension_scores }}</h2>
      <p class="muted small">{{ report.dimension_scores_hint }}</p>

      {% for dim_id in judged.applicable_dimensions %}
        {% set d = judged.dimensions.get(dim_id) %}
        {% if d %}
        {% set dk = band_key(dimension_scores.get(dim_id)) %}
        <div class="block dim-block {{ dk }}">
          <div class="dim-block-head">
            <span class="name">{{ DIMENSION_MAP[dim_id].name }}</span>
            <span class="score">{{ ('%.0f'|format(dimension_scores[dim_id])) if dimension_scores.get(dim_id) is not none else ui.common.n_a }}</span>
          </div>

          <div class="criteria-list">
            {% for crit in DIM_CRITERIA[dim_id] %}
              {% set scr = d.criteria.get(crit.id) %}
              <div class="criterion">
                <span class="pol pol--{{ crit.polarity }}">{{ 'risk' if crit.polarity == 'risk' else 'positive' }}</span>
                <span class="txt">{{ crit.text }}</span>
                <span class="scr">{{ scr if scr is not none else ui.common.n_a }}</span>
              </div>
            {% endfor %}
          </div>

          {% if d.evidence %}
          <div class="evidence">
            <div class="small faint" style="text-transform:uppercase;letter-spacing:0.05em;">{{ report.evidence }}</div>
            {% for e in d.evidence %}<blockquote>&ldquo;{{ e }}&rdquo;</blockquote>{% endfor %}
          </div>
          {% endif %}

          {% if d.reason %}<div class="reason"><strong>{{ report.reason }}.</strong> {{ d.reason }}</div>{% endif %}
          {% if d.risk %}<div class="risk-note"><strong>{{ report.risk }}.</strong> {{ d.risk }}</div>{% endif %}
        </div>
        {% endif %}
      {% endfor %}
    </div>

    <aside class="detail-side">
      <div class="block">
        <h3>{{ report.overall_score }}</h3>
        <div class="gauge">
          <svg viewBox="0 0 176 176" width="140" height="140">
            <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="{{ overall }}"></circle>
          </svg>
          <div class="gauge-value">
            <div class="num" style="font-size:1.9rem;">{{ '%.0f'|format(overall) }}</div>
            <div class="lbl">/ 100</div>
          </div>
        </div>
        <div style="text-align:center;margin-top:8px;">
          <span class="badge badge--{{ overall_key }}"><span class="dot dot--{{ overall_key }}"></span>{{ band }}</span>
        </div>
      </div>

      <div class="block">
        <h3>{{ report.applicable_dimensions }}</h3>
        {% for dim_id in judged.applicable_dimensions %}
        <div class="small" style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);">
          <span>{{ DIMENSION_MAP[dim_id].name }}</span>
          <strong>{{ ('%.0f'|format(dimension_scores[dim_id])) if dimension_scores.get(dim_id) is not none else ui.common.n_a }}</strong>
        </div>
        {% endfor %}
      </div>

      {% if judged.governance_recommendations %}
      <div class="block">
        <h3>{{ report.governance_recommendations }}</h3>
        {% for r in judged.governance_recommendations %}
        <div class="small" style="padding:6px 0;border-bottom:1px solid var(--border);">{{ r }}</div>
        {% endfor %}
      </div>
      {% endif %}

      {% if judged.responsibility_gaps %}
      <div class="block">
        <h3>{{ report.responsibility_gaps }}</h3>
        {% for r in judged.responsibility_gaps %}
        <div class="small" style="padding:6px 0;border-bottom:1px solid var(--border);color:var(--high);">{{ r }}</div>
        {% endfor %}
      </div>
      {% endif %}

      {% if judged.affected_parties_overlooked %}
      <div class="block">
        <h3>{{ report.affected_parties_overlooked }}</h3>
        {% for r in judged.affected_parties_overlooked %}
        <div class="small" style="padding:6px 0;border-bottom:1px solid var(--border);color:var(--high);">{{ r }}</div>
        {% endfor %}
      </div>
      {% endif %}
    </aside>
  </div>
</div>
{% endblock %}