{% set risk_colors = {"low": "var(--ok)", "moderate": "var(--warn)", "high": "var(--err)"} %}
{% set rc = risk_colors.get(report.risk, "var(--text-dim)") %}
<div class="flex items-center justify-between">
  <p class="eyebrow">opsec exposure report</p>
  <span class="chip" style="color:#fff;background:{{ rc }};border-color:{{ rc }};">
    {{ report.risk | upper }}</span>
</div>
<p class="mt-2 text-sm" style="color: var(--text);">
  <span class="mono" style="color: var(--ember-bright);">{{ "{:,}".format(report.total) }}</span>
  password candidates from {{ report.shared_fields }} shared detail(s).
</p>

{% if report.breach_checked %}
  {% if report.breach_pwned %}
  <div class="mt-3 rounded-lg p-3" style="background: rgba(240,85,110,0.08); border:1px solid var(--err);">
    <p class="text-sm" style="color: var(--err);">
      <strong>{{ report.breach_pwned }}/{{ report.breach_checked }}</strong>
      candidates are ALREADY in public breaches.</p>
    <ul class="mt-1.5 space-y-0.5 mono text-xs" style="color: var(--text-dim);">
      {% for pw, count in report.breach_worst %}
      <li><span style="color: var(--err);">{{ pw }}</span> — seen {{ "{:,}".format(count) }} times</li>
      {% endfor %}
    </ul>
  </div>
  {% else %}
  <p class="mt-3 text-sm" style="color: var(--ok);">0/{{ report.breach_checked }} candidates found in breaches.</p>
  {% endif %}
{% endif %}

{% if report.email_breaches %}
<div class="mt-3 rounded-lg p-3" style="background: rgba(240,85,110,0.08); border:1px solid var(--err);">
  <p class="text-sm" style="color: var(--err);">
    Email found in <strong>{{ report.email_breaches | length }}</strong> known breach(es):</p>
  <div class="mt-1.5 flex flex-wrap gap-1.5 mono text-xs">
    {% for title, date in report.email_breaches %}<span class="chip" style="color: var(--err);">{{ title }} · {{ date }}</span>{% endfor %}
  </div>
</div>
{% endif %}

{% if footprint %}
<div class="mt-4">
  <p class="eyebrow">public footprint · {{ footprint | length }} platforms</p>
  <div class="mt-1.5 flex flex-wrap gap-1.5">
    {% for hit in footprint %}<span class="chip">{{ hit.platform }}</span>{% endfor %}
  </div>
</div>
{% endif %}

{% if report.top_sources %}
<div class="mt-4">
  <p class="eyebrow">biggest liabilities</p>
  <table class="mt-1.5 w-full text-sm"><tbody>
    {% for label, count in report.top_sources %}
    <tr><td style="color: var(--text-dim); padding:.2rem 0;">{{ label }}</td>
        <td class="mono tnum text-right" style="color: var(--text);">{{ "{:,}".format(count) }}</td></tr>
    {% endfor %}
  </tbody></table>
</div>
{% endif %}

{% if report.examples %}
<div class="mt-4">
  <p class="eyebrow">an attacker would try first</p>
  <div class="mt-1.5 flex flex-wrap gap-1.5 mono text-xs">
    {% for ex in report.examples %}<span class="chip" style="color: var(--err);">{{ ex }}</span>{% endfor %}
  </div>
</div>
{% endif %}

<div class="mt-4">
  <p class="eyebrow">what to do</p>
  <ul class="mt-1.5 space-y-1 text-xs" style="color: var(--text-dim);">
    {% for tip in report.advice %}<li>• {{ tip }}</li>{% endfor %}
  </ul>
</div>
{% if notes %}<p class="mt-3 eyebrow" style="color: var(--warn);">{{ notes | join(" · ") }}</p>{% endif %}