{# CUI // SP-CTI — Reusable twin verdict banner + shared twin CSS #}
{# Usage: {% from "includes/twin_verdict_banner.html" import twin_css, verdict_banner %} #}
{#   In {% block extra_css %}: {{ twin_css() }} #}
{#   In JS renderResults: {{ verdict_banner('verdictBanner', 'd.verdict') }} — call renderVerdict(el, verdict) #}

{% macro twin_css() %}
<style>
  /* ── Shared twin layout ───────────────────────────────────────────────── */
  .twin-header { padding: 20px 30px 12px; border-bottom: 1px solid #1e3a6e; }
  .twin-header h1 { font-size: 20px; margin: 0 0 4px; }
  .twin-header p  { color: #7a8cb0; font-size: 13px; margin: 0; }
  .twin-back { color: #3498db; text-decoration: none; font-size: 12px; display: inline-block; margin-bottom: 8px; }
  .twin-back:hover { color: #5dade2; }

  .twin-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 30px; }
  @media (max-width: 900px) { .twin-layout { grid-template-columns: 1fr; } }

  .twin-panel { background: #16213e; border: 1px solid #1e3a6e; border-radius: 8px; padding: 18px; }
  .twin-panel h2 { font-size: 14px; font-weight: 600; color: #eaeaea; margin: 0 0 12px; border-bottom: 1px solid #1e3a6e; padding-bottom: 8px; }

  .snap-list { list-style: none; padding: 0; margin: 0 0 12px; max-height: 160px; overflow-y: auto; }
  .snap-item { display: flex; align-items: center; justify-content: space-between;
               padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;
               border: 1px solid transparent; margin-bottom: 4px; transition: all .15s; }
  .snap-item:hover  { border-color: #3498db; background: #0f3460; }
  .snap-item.active { border-color: #3498db; background: #0f3460; }
  .snap-item .snap-meta { color: #5a6e8c; font-size: 11px; }

  .btn { padding: 7px 16px; border: none; border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 600; transition: .15s; }
  .btn-primary { background: #3498db; color: #fff; }
  .btn-primary:hover { background: #2980b9; }
  .btn-success { background: #27ae60; color: #fff; }
  .btn-success:hover { background: #229954; }
  .btn-danger  { background: #e74c3c; color: #fff; }
  .btn-danger:hover  { background: #c0392b; }
  .btn-sm { padding: 4px 10px; font-size: 11px; }

  .twin-textarea { width: 100%; background: #0f3460; border: 1px solid #1e3a6e; color: #eaeaea;
                   border-radius: 5px; padding: 10px; font-family: monospace; font-size: 12px;
                   resize: vertical; box-sizing: border-box; }
  .twin-textarea:focus { outline: none; border-color: #3498db; }

  /* ── Verdict banner ───────────────────────────────────────────────────── */
  .verdict-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px;
                    border-radius: 8px; margin-bottom: 16px; font-size: 14px; font-weight: 600; }
  .verdict-pass { background: #0d3d1e; border: 1px solid #27ae60; color: #2ecc71; }
  .verdict-warn { background: #3d2e0d; border: 1px solid #f39c12; color: #f39c12; }
  .verdict-fail { background: #3d0d0d; border: 1px solid #e74c3c; color: #e74c3c; }
  .verdict-icon { font-size: 22px; }

  /* ── Findings ─────────────────────────────────────────────────────────── */
  .finding-list { list-style: none; padding: 0; margin: 0; }
  .finding-item { padding: 8px 12px; border-radius: 5px; margin-bottom: 6px;
                  border-left: 3px solid #7a8cb0; background: #0f3460; font-size: 12px; }
  .finding-item.critical { border-left-color: #e74c3c; }
  .finding-item.high     { border-left-color: #e67e22; }
  .finding-item.medium   { border-left-color: #f1c40f; }
  .finding-item.low      { border-left-color: #3498db; }
  .finding-title { font-weight: 600; margin-bottom: 3px; }
  .finding-rec   { color: #7a8cb0; font-size: 11px; }

  .badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; margin-left: 6px; }
  .badge-critical { background: #c0392b; color: #fff; }
  .badge-high     { background: #d35400; color: #fff; }
  .badge-medium   { background: #b7950b; color: #fff; }
  .badge-low      { background: #1a5276; color: #fff; }
  .badge-pass     { background: #1e8449; color: #fff; }

  /* ── Metrics row ──────────────────────────────────────────────────────── */
  .metric-row { display: flex; gap: 20px; margin-bottom: 10px; }
  .metric-stat { text-align: center; }
  .metric-stat .val { font-size: 24px; font-weight: 700; }
  .metric-stat .lbl { font-size: 10px; color: #7a8cb0; }
  .val-pass { color: #2ecc71; }
  .val-fail { color: #e74c3c; }
  .val-warn { color: #f39c12; }
  .val-info { color: #3498db; }

  /* ── Score bar ────────────────────────────────────────────────────────── */
  .score-bar { height: 6px; border-radius: 3px; background: #1e3a6e; overflow: hidden; margin-top: 4px; }
  .score-fill { height: 100%; border-radius: 3px; transition: width .4s; }

  /* ── Spinner ──────────────────────────────────────────────────────────── */
  .spinner { display: none; width: 18px; height: 18px; border: 3px solid #1e3a6e;
             border-top-color: #3498db; border-radius: 50%; animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .hint { font-size: 11px; color: #5a6e8c; margin-top: 6px; }
</style>
{% endmacro %}

{% macro verdict_js() %}
<script>
function renderVerdict(el, verdict) {
  const icons   = { pass: '✅', warn: '⚠️', fail: '❌', green: '✅', amber: '⚠️', red: '❌' };
  const labels  = { pass: 'PASS — delta is safe to apply',
                    warn: 'WARN — review findings before proceeding',
                    fail: 'FAIL — critical issues block this change',
                    green: 'GREEN — within compliance threshold',
                    amber: 'AMBER — approaching compliance boundary',
                    red:   'RED — compliance boundary exceeded' };
  const cls = (verdict === 'green') ? 'pass' : (verdict === 'amber') ? 'warn' : (verdict === 'red') ? 'fail' : verdict;
  el.className = 'verdict-banner verdict-' + cls;
  el.innerHTML = `<span class="verdict-icon">${icons[verdict] || '❓'}</span><span>${labels[verdict] || verdict.toUpperCase()}</span>`;
}

function renderFindingList(ul, findings, emptySibling) {
  ul.innerHTML = '';
  if (!findings || findings.length === 0) {
    if (emptySibling) emptySibling.style.display = 'block';
    return;
  }
  if (emptySibling) emptySibling.style.display = 'none';
  findings.forEach(f => {
    const sev = (f.severity || '').toLowerCase();
    const li = document.createElement('li');
    li.className = 'finding-item ' + sev;
    li.innerHTML = `<div class="finding-title">${f.id || f.rule_id || f.check || ''} — ${f.title || f.message || f.detail || ''}<span class="badge badge-${sev}">${f.severity || ''}</span></div>
      <div class="finding-rec">${f.recommendation || f.detail || f.category || ''}</div>`;
    ul.appendChild(li);
  });
}

function scoreColor(score) {
  if (score >= 0.8) return '#2ecc71';
  if (score >= 0.5) return '#f39c12';
  return '#e74c3c';
}
</script>
{% endmacro %}