{% extends "base.html" %}
{% from "_hub.html" import hub %}

{% block title %}Matching — Config — karyab{% endblock %}

{% block content %}
<h1>Config</h1>

{% if flash %}
{% if flash_error %}
<div class="flash-banner flash-error"
     style="background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;border-radius:6px;
            padding:0.6rem 1rem;margin-bottom:1rem;font-size:0.9rem">
  {{ flash }}
</div>
{% else %}
<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">
  {{ flash }}
</div>
{% endif %}
{% endif %}

{% call hub(hub_sections) %}
<form method="post" action="/config/matching/save"
      style="display:grid;gap:2rem;max-width:36rem">

  <section id="matching">
    <h2 style="margin:0 0 0.75rem;font-size:1.15rem;border-bottom:1px solid var(--border);
               padding-bottom:0.4rem">Matching</h2>
    <p style="margin:0 0 0.75rem;font-size:0.85rem;color:var(--muted)">
      Job-matching profile: drives ranking and filtering. Nested subtables
      (e.g. <code>[profile.requirements]</code>) are preserved on save.
    </p>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="summary">Summary
        <span class="field-help">Free-text description the ranker uses to judge fit.</span>
      </label>
      <textarea id="summary" name="summary" rows="3"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
>{{ profile_summary }}</textarea>
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="target_roles">Target job titles (one per line)
        <span class="field-help">
          Full role titles you're targeting (e.g. "Senior DevOps Engineer"). Used by the
          keyword pre-filter and to derive relevance targets.
        </span>
      </label>
      <textarea id="target_roles" name="target_roles" rows="4"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                data-list-drawer="target_roles"
>{{ profile_target_roles }}</textarea>
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="keywords_must">Must-have keywords (one per line)
        <span class="field-help">All of these must appear in a job to score above 0.</span>
      </label>
      <textarea id="keywords_must" name="keywords_must" rows="3"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                data-list-drawer="keywords_must"
>{{ profile_keywords_must }}</textarea>
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="keywords_nice">Nice-to-have keywords (one per line)
        <span class="field-help">Extra positive signal; not required to score.</span>
      </label>
      <textarea id="keywords_nice" name="keywords_nice" rows="3"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                data-list-drawer="keywords_nice"
>{{ profile_keywords_nice }}</textarea>
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="locations">Locations (one per line)
        <span class="field-help">Preferred work locations — used in location gate filtering.</span>
      </label>
      <textarea id="locations" name="locations" rows="2"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                data-list-drawer="locations"
>{{ profile_locations }}</textarea>
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="dealbreakers">Dealbreakers (one per line)
        <span class="field-help">Jobs containing any of these are automatically down-ranked.</span>
      </label>
      <textarea id="dealbreakers" name="dealbreakers" rows="2"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                data-list-drawer="dealbreakers"
>{{ profile_dealbreakers }}</textarea>
    </div>

    <div style="padding-top:1rem;border-top:1px solid var(--border);margin-top:1rem">
      <button type="submit" class="btn btn-primary">Save matching</button>
    </div>
  </section>

</form>

<span id="action-status"
      hx-get="/actions/status?format=html"
      hx-trigger="load, every 2s"
      hx-swap="outerHTML"
      hx-target="#action-status"
      style="display:block;margin-top:0.75rem"></span>

{% endcall %}
<script src="/static/list-drawer.js" defer></script>
{% endblock %}