{% extends 'generic/_base.html' %}

{% block title %}ROA Change Plan Summary{% endblock %}

{% block content %}
  <div class="row mt-4">
    <div class="col col-md-12">
      <div class="card border-primary mb-4">
        <h2 class="card-header">ROA Change Plan Summary</h2>
        <div class="card-body">
          <p class="mb-0">Aggregate totals across all visible ROA change plans.</p>
        </div>
      </div>

      <div class="row g-3 mb-4">
        <div class="col col-md-3">
          <div class="border rounded p-3 h-100">
            <div class="text-muted small text-uppercase">Total Plans</div>
            <div class="fs-2 fw-semibold">{{ total_plans }}</div>
          </div>
        </div>
        <div class="col col-md-3">
          <div class="border rounded p-3 h-100">
            <div class="text-muted small text-uppercase">Provider-Backed</div>
            <div class="fs-2 fw-semibold">{{ provider_backed_count }}</div>
          </div>
        </div>
        <div class="col col-md-3">
          <div class="border rounded p-3 h-100">
            <div class="text-muted small text-uppercase">Replacements Total</div>
            <div class="fs-2 fw-semibold">{{ replacement_count_total }}</div>
          </div>
        </div>
      </div>

      {% if by_status %}
        <div class="card border-secondary mb-4">
          <h3 class="card-header">By Status</h3>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-hover mb-0">
                <thead>
                  <tr><th>Status</th><th>Count</th></tr>
                </thead>
                <tbody>
                  {% for status, count in by_status.items %}
                    <tr><td>{{ status }}</td><td>{{ count }}</td></tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      {% endif %}

      <div class="card border-secondary mb-4">
        <h3 class="card-header">Simulation Posture</h3>
        <div class="card-body">
          <div class="row g-3">
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Simulated</div>
                <div class="fs-4 fw-semibold">{{ simulated_plan_count }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Current</div>
                <div class="fs-4 fw-semibold">{{ simulation_current_plan_count }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Missing</div>
                <div class="fs-4 fw-semibold">{{ simulation_missing_count }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Pending</div>
                <div class="fs-4 fw-semibold">{{ simulation_pending_count }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Stale</div>
                <div class="fs-4 fw-semibold">{{ simulation_stale_count }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Blocking</div>
                <div class="fs-4 fw-semibold">{{ simulation_blocking_plan_count }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Ack Required</div>
                <div class="fs-4 fw-semibold">{{ simulation_acknowledgement_required_plan_count }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Informational</div>
                <div class="fs-4 fw-semibold">{{ simulation_informational_plan_count }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Partially Constrained</div>
                <div class="fs-4 fw-semibold">{{ simulation_partially_constrained_plan_count }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card border-secondary mb-4">
        <h3 class="card-header">Lint Posture</h3>
        <div class="card-body">
          <div class="row g-3">
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Warnings</div>
                <div class="fs-4 fw-semibold">{{ lint_warning_total }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Errors</div>
                <div class="fs-4 fw-semibold">{{ lint_error_total }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Blocking</div>
                <div class="fs-4 fw-semibold">{{ lint_blocking_total }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Ack Required</div>
                <div class="fs-4 fw-semibold">{{ lint_acknowledgement_required_total }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Acknowledged</div>
                <div class="fs-4 fw-semibold">{{ lint_acknowledged_total }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Suppressed</div>
                <div class="fs-4 fw-semibold">{{ lint_suppressed_total }}</div>
              </div>
            </div>
            <div class="col col-md-3">
              <div class="border rounded p-2 text-center">
                <div class="text-muted small">Prev. Acknowledged</div>
                <div class="fs-4 fw-semibold">{{ lint_previously_acknowledged_total }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="text-end">
        <a href="{{ return_url }}" class="btn btn-outline-secondary">Back</a>
      </div>
    </div>
  </div>
{% endblock %}