{% extends "base.html" %}
{% block content %}
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
    <li class="breadcrumb-item active">{{ target.name }}</li>
  </ol>
</nav>

<div class="card mb-4">
  <div class="card-body">
    <h4 class="card-title">Score — {{ target.name }}</h4>
    <div class="row text-center">
      <div class="col">
        <div class="fs-1 grade-{{ (scores.grade if scores else 'unknown') | lower }}">
          {{ scores.grade if scores else "—" }}
        </div>
        <small class="text-muted">Grade</small>
      </div>
      <div class="col">
        <div class="fs-3">
          {{ "%.1f" | format(scores.combined_score)
             if scores and scores.combined_score is not none else "—" }}
        </div>
        <small class="text-muted">Combined</small>
      </div>
      <div class="col">
        <div class="fs-3">
          {{ "%.1f" | format(scores.remote_score)
             if scores and scores.remote_score is not none else "—" }}
        </div>
        <small class="text-muted">Remote</small>
      </div>
      <div class="col">
        <div class="fs-3">
          {{ "%.1f" | format(scores.server_score)
             if scores and scores.server_score is not none else "—" }}
        </div>
        <small class="text-muted">Server</small>
      </div>
      <div class="col">
        <div class="fs-3">
          {{ "%.0f%%" | format((scores.verdict_coverage or 0) * 100)
             if scores else "—" }}
        </div>
        <small class="text-muted">Coverage</small>
      </div>
      <div class="col">
        <div class="fs-3">
          {{ "%.0f%%" | format((scores.error_rate or 0) * 100)
             if scores else "—" }}
        </div>
        <small class="text-muted">Errors</small>
      </div>
    </div>
  </div>
</div>

<div class="mb-3 d-flex flex-wrap gap-2 align-items-center">
  <strong>Filter by severity:</strong>
  {% for sev in ["critical", "high", "medium", "low", "info"] %}
  <div class="form-check form-check-inline mb-0">
    <input class="form-check-input sev-filter" type="checkbox"
           value="{{ sev }}" id="sev-{{ sev }}" checked>
    <label class="form-check-label" for="sev-{{ sev }}">
      <span class="badge badge-{{ sev }}">{{ sev }}</span>
    </label>
  </div>
  {% endfor %}
  <input type="text" id="check-filter" class="form-control form-control-sm ms-2"
         style="max-width:200px" placeholder="Filter by check…">
</div>

<table class="table table-sm table-hover table-bordered" id="findings-table">
  <thead class="table-secondary">
    <tr>
      <th>Check</th><th>Severity</th><th>Title</th>
      <th>Description</th><th>Remediation</th>
    </tr>
  </thead>
  <tbody>
  {% for f in findings %}
  <tr data-severity="{{ f.severity }}" data-check="{{ f.check }}">
    <td><code>{{ f.check }}</code></td>
    <td><span class="badge badge-{{ f.severity }}">{{ f.severity }}</span></td>
    <td>{{ f.title }}</td>
    <td>{{ f.description }}</td>
    <td>{{ f.remediation }}</td>
  </tr>
  {% else %}
  <tr><td colspan="5" class="text-center text-muted">No findings</td></tr>
  {% endfor %}
  </tbody>
</table>
<p class="text-muted small" id="findings-count">{{ findings | length }} finding(s)</p>

{% if report_links %}
<h5 class="mt-4">Reports</h5>
<ul>
  {% for r in report_links %}
  <li><a href="/target/{{ target.name }}/report/{{ r }}">{{ r }}</a></li>
  {% endfor %}
</ul>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
(function () {
  function applyFilters() {
    var checked = new Set(
      Array.from(document.querySelectorAll('.sev-filter:checked')).map(function (el) {
        return el.value;
      })
    );
    var checkText = document.getElementById('check-filter').value.toLowerCase();
    var visible = 0;
    document.querySelectorAll('#findings-table tbody tr[data-severity]').forEach(function (row) {
      var show = checked.has(row.dataset.severity) &&
                 row.dataset.check.toLowerCase().indexOf(checkText) !== -1;
      row.style.display = show ? '' : 'none';
      if (show) { visible++; }
    });
    document.getElementById('findings-count').textContent = visible + ' finding(s)';
  }
  document.querySelectorAll('.sev-filter').forEach(function (el) {
    el.addEventListener('change', applyFilters);
  });
  document.getElementById('check-filter').addEventListener('input', applyFilters);
}());
</script>
{% endblock %}