{% extends "base.html" %}
{% block title %}Design Scorecard — {{ sc.design_name }}{% endblock %}
{% block content %}
<div class="container-fluid py-3">

  <!-- Header -->
  <div class="d-flex align-items-center gap-3 mb-3">
    <a href="/agentic-ai/canvas/{{ sc.design_id }}" class="btn btn-sm btn-outline-secondary">← Canvas</a>
    <div>
      <h4 class="mb-0">🎯 Design Scorecard</h4>
      <small class="text-muted">{{ sc.design_name }} &middot; {{ sc.domain }}</small>
    </div>
    <div class="ms-auto d-flex align-items-center gap-3">
      {% if sc.safety_impacting %}<span class="badge bg-warning text-dark">Safety Impacting</span>{% endif %}
      {% if sc.rights_impacting %}<span class="badge bg-warning text-dark">Rights Impacting</span>{% endif %}
      <div class="text-center">
        <div class="fs-2 fw-bold
          {% if sc.health == 'HEALTHY' %}text-success
          {% elif sc.health == 'AT_RISK' %}text-warning
          {% elif sc.health == 'DEGRADED' %}text-danger
          {% else %}text-danger{% endif %}">
          {{ sc.overall_score }}%
        </div>
        <span class="badge fs-6
          {% if sc.health == 'HEALTHY' %}bg-success
          {% elif sc.health == 'AT_RISK' %}bg-warning text-dark
          {% elif sc.health == 'DEGRADED' %}bg-danger
          {% else %}bg-danger{% endif %}">
          {{ sc.health }}
        </span>
      </div>
    </div>
  </div>

  <!-- Overall score bar -->
  <div class="card mb-3">
    <div class="card-body py-2">
      <div class="d-flex align-items-center gap-3">
        <span class="fw-semibold" style="min-width:140px">Overall Health</span>
        <div class="progress flex-grow-1" style="height:18px">
          <div class="progress-bar
            {% if sc.overall_score >= 80 %}bg-success
            {% elif sc.overall_score >= 60 %}bg-warning
            {% else %}bg-danger{% endif %}"
            style="width:{{ sc.overall_score }}%; font-size:12px; line-height:18px;">
            {{ sc.overall_score }}%
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Dimension scorecards -->
  <div class="row g-3 mb-3">
    {% for d in sc.dimensions %}
    <div class="col-md-6">
      <div class="card h-100 {{ 'border-danger' if d.status == 'red' or d.status == 'missing' else 'border-warning' if d.status == 'amber' else '' }}">
        <div class="card-body py-2 px-3">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <span class="fw-semibold small">{{ d.label }}</span>
            <span class="text-muted small">weight {{ d.weight_pct }}%</span>
          </div>
          <div class="d-flex align-items-center gap-2 mb-1">
            <div class="progress flex-grow-1" style="height:10px">
              <div class="progress-bar
                {% if d.status == 'green' %}bg-success
                {% elif d.status == 'amber' %}bg-warning
                {% elif d.status == 'missing' %}bg-secondary
                {% else %}bg-danger{% endif %}"
                style="width:{{ d.score }}%"></div>
            </div>
            <span class="fw-bold small
              {% if d.status == 'green' %}text-success
              {% elif d.status == 'amber' %}text-warning
              {% elif d.status == 'missing' %}text-secondary
              {% else %}text-danger{% endif %}">
              {{ d.score }}%
            </span>
          </div>
          <div class="text-muted" style="font-size:11px">{{ d.detail }}</div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- Quick links -->
  <div class="card">
    <div class="card-header fw-semibold py-2">Quick Actions</div>
    <div class="card-body d-flex flex-wrap gap-2 py-2">
      <a href="/agentic-ai/assessments/{{ sc.design_id }}" class="btn btn-sm btn-outline-primary">📋 Assessment</a>
      <a href="/agentic-ai/ato/{{ sc.design_id }}" class="btn btn-sm btn-outline-primary">🏛 ATO</a>
      <a href="/agentic-ai/red-team/{{ sc.design_id }}" class="btn btn-sm btn-outline-danger">⚔ Red Team</a>
      <a href="/agentic-ai/impact/{{ sc.design_id }}" class="btn btn-sm btn-outline-warning">💥 Impact</a>
      <a href="/agentic-ai/deploy-gate/{{ sc.design_id }}" class="btn btn-sm btn-outline-success">🚦 Deploy Gate</a>
      <a href="/agentic-ai/risks/{{ sc.design_id }}" class="btn btn-sm btn-outline-secondary">⚠ Risks</a>
      <a href="/agentic-ai/api/designs/{{ sc.design_id }}/accred-package" class="btn btn-sm btn-outline-secondary">📦 Accred Package</a>
    </div>
  </div>

</div>
{% endblock %}