{% extends "base.html" %}

{% block title %}Gate suggestions — karyab{% endblock %}

{% block content %}
<h1>Suggested gate improvements</h1>

<p style="font-size:0.85rem;color:var(--muted);margin:0 0 1rem;max-width:40rem">
  The ranker reviewed recent off-target, borderline, and high-scoring jobs and
  proposed the keyword changes below. Nothing is written yet — tick the changes
  you want and click <strong>Apply selected</strong>. Unticked changes are discarded.
</p>

{% if not has_changes %}
<div class="flash-banner"
     style="background:var(--badge-hi,#d1fae5);border:1px solid #6ee7b7;color:#065f46;
            border-radius:6px;padding:0.6rem 1rem;margin-bottom:1rem;font-size:0.9rem">
  No changes suggested — your gate keywords look good.
</div>
<p><a href="/config" class="btn btn-action">Back to config</a></p>
{% else %}
<form method="post" action="/config/apply-gate" style="max-width:40rem">

  {# Adds are pre-checked (additive-by-default); removes are opt-in (unchecked). #}
  {% macro change_block(title, field, items, sign, checked) %}
  {% if items %}
  <section style="margin-bottom:1.5rem">
    <h2 style="margin:0 0 0.5rem;font-size:1.05rem;border-bottom:1px solid var(--border);
               padding-bottom:0.3rem">{{ title }}</h2>
    {% for it in items %}
    <label class="checkbox-item" style="display:block;margin-bottom:0.5rem">
      <input type="checkbox" name="{{ field }}" value="{{ it.keyword }}"{% if checked %} checked{% endif %}>
      <code>{{ sign }} {{ it.keyword }}</code>
      {% if it.reason %}<span class="field-help"> — {{ it.reason }}</span>{% endif %}
    </label>
    {% endfor %}
  </section>
  {% endif %}
  {% endmacro %}

  {{ change_block("Add to exclude keywords", "add_exclude", proposal.add_exclude, "+", true) }}
  {{ change_block("Remove from exclude keywords", "remove_exclude", proposal.remove_exclude, "−", false) }}
  {{ change_block("Add to target keywords", "add_target", proposal.add_target, "+", true) }}
  {{ change_block("Remove from target keywords", "remove_target", proposal.remove_target, "−", false) }}

  <div style="display:flex;gap:0.5rem;margin-top:1rem">
    <button type="submit" class="btn btn-action">Apply selected</button>
    <a href="/config" class="btn">Cancel</a>
  </div>
</form>
{% endif %}
{% endblock %}