{% extends "base.html" %}
{% block title %}WordForge · OPSEC awareness{% endblock %}

{% block content %}
<section class="grid grid-cols-1 gap-5 lg:grid-cols-[1fr_1.2fr]">
  {# ============================================================ INPUT FORM #}
  <article class="panel-accent p-6">
    <header class="mb-5">
      <p class="eyebrow">personal opsec · authorized awareness only</p>
      <h1 class="mt-1 text-lg font-semibold tracking-tight" style="color: var(--text);">
        How exposed is one person?
      </h1>
      <p class="mt-1 text-xs" style="color: var(--text-dim);">
        Feed the public selectors you discovered. WordForge derives the passwords
        an attacker would guess and checks them against real breaches.
      </p>
    </header>

    <form hx-post="/awareness/run" hx-target="#awareness-result" hx-swap="innerHTML"
          hx-indicator="#aw-spin" class="space-y-3">
      <div class="grid grid-cols-2 gap-3">
        <label class="block"><span class="eyebrow">full name</span>
          <input name="name" class="input mt-1.5" placeholder="Jane Doe" /></label>
        <label class="block"><span class="eyebrow">username / handle</span>
          <input name="username" class="input mt-1.5" placeholder="jdoe" /></label>
        <label class="block"><span class="eyebrow">github</span>
          <input name="github" class="input mt-1.5" placeholder="jdoe" /></label>
        <label class="block"><span class="eyebrow">employer</span>
          <input name="company" class="input mt-1.5" placeholder="acme.com" /></label>
      </div>
      <label class="block"><span class="eyebrow">public url</span>
        <input name="url" class="input mt-1.5" placeholder="https://janedoe.dev" /></label>
      <label class="block"><span class="eyebrow">pasted public content (bio, profile)</span>
        <textarea name="text" rows="4" class="input mt-1.5"
                  placeholder="Paste public text you legitimately gathered…"></textarea></label>

      <div class="flex flex-wrap items-center gap-4 text-xs" style="color: var(--text-dim);">
        <label class="flex items-center gap-2">
          <input type="checkbox" name="use_llm" checked /> LLM enrichment</label>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="breaches" checked /> breach check (HIBP)</label>
      </div>

      <div class="flex items-center gap-3 pt-1">
        <button type="submit" class="btn btn-primary">
          <i data-lucide="scan-face" class="h-4 w-4"></i> Assess exposure</button>
        <span id="aw-spin" class="htmx-indicator eyebrow">assessing…</span>
      </div>
    </form>
  </article>

  {# ============================================================ RESULT CARD #}
  <article id="awareness-result" class="panel p-6">
    <p class="eyebrow">report</p>
    <p class="mt-2 text-sm" style="color: var(--text-faint);">
      Run an assessment to see the exposure report here.
    </p>
  </article>
</section>
{% endblock %}