{% extends "base.html" %}

{% block title %}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 %}

<form method="post" action="/config/save" style="max-width:32rem;display:grid;gap:1rem;margin-top:1rem">
  <h2 style="margin:0;font-size:1.1rem">Filters</h2>

  <div class="filter-group">
    <label for="min_fit_score">Min fit score</label>
    <input type="number" id="min_fit_score" name="min_fit_score"
           value="{{ min_fit_score }}" min="0" max="100" style="width:6rem;">
  </div>

  <div class="filter-group">
    <label for="digest_size">Digest size</label>
    <input type="number" id="digest_size" name="digest_size"
           value="{{ digest_size }}" min="0" style="width:6rem;">
  </div>

  <div class="filter-group">
    <label for="followup_after_days">Follow-up after days</label>
    <input type="number" id="followup_after_days" name="followup_after_days"
           value="{{ followup_after_days }}" min="0" style="width:6rem;">
  </div>

  <h2 style="margin:0;font-size:1.1rem">UI defaults</h2>

  <div class="filter-group">
    <label for="min_score_default">Default min score (hides pre-filter rejects)</label>
    <input type="number" id="min_score_default" name="min_score_default"
           value="{{ min_score_default_cfg }}" min="0" max="100" style="width:6rem;">
  </div>

  <div>
    <label style="font-size:0.75rem;color:var(--muted);font-weight:500;text-transform:uppercase;
                  letter-spacing:0.04em;display:block;margin-bottom:0.35rem">
      Hidden statuses by default
    </label>
    <div style="display:flex;flex-wrap:wrap;gap:0.3rem 0.75rem;padding:0.3rem 0">
      {% for st in all_statuses %}
      <label class="checkbox-item">
        <input type="checkbox" name="hidden_statuses" value="{{ st }}"
               {% if st in hidden_statuses_cfg %}checked{% endif %}>
        {{ st|status_label if st != "untracked" else "New / untracked" }}
      </label>
      {% endfor %}
    </div>
  </div>

  <h2 style="margin:0;font-size:1.1rem">Ranker</h2>

  <div class="filter-group">
    <label for="backend">Backend</label>
    <select id="backend" name="backend">
      {% for b in valid_backends %}
      <option value="{{ b }}" {% if b == backend %}selected{% endif %}>{{ b }}</option>
      {% endfor %}
    </select>
  </div>
  <p style="margin:0;font-size:0.85rem;color:var(--fg-muted,#666)">
    <code>claude_cli</code> makes Fetch/Rank run <code>claude -p</code> locally (no API key needed).
  </p>

  <h2 style="margin:0;font-size:1.1rem">Matching</h2>
  <p style="margin:0;font-size:0.85rem;color:var(--fg-muted,#666)">
    Job-matching profile: drives ranking and filtering. Nested subtables (e.g. <code>[profile.requirements]</code>)
    are preserved on save.
  </p>

  <div class="filter-group">
    <label for="summary">Summary</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">
    <label for="target_roles">Target roles (one per line)</label>
    <textarea id="target_roles" name="target_roles" rows="3"
              style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
>{{ profile_target_roles }}</textarea>
  </div>

  <div class="filter-group">
    <label for="keywords_must">Must-have keywords (one per line)</label>
    <textarea id="keywords_must" name="keywords_must" rows="3"
              style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
>{{ profile_keywords_must }}</textarea>
  </div>

  <div class="filter-group">
    <label for="keywords_nice">Nice-to-have keywords (one per line)</label>
    <textarea id="keywords_nice" name="keywords_nice" rows="3"
              style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
>{{ profile_keywords_nice }}</textarea>
  </div>

  <div class="filter-group">
    <label for="locations">Locations (one per line)</label>
    <textarea id="locations" name="locations" rows="2"
              style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
>{{ profile_locations }}</textarea>
  </div>

  <div class="filter-group">
    <label for="dealbreakers">Dealbreakers (one per line)</label>
    <textarea id="dealbreakers" name="dealbreakers" rows="2"
              style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
>{{ profile_dealbreakers }}</textarea>
  </div>

  <h2 style="margin:0;font-size:1.1rem">Relevance filter</h2>
  <p style="margin:0;font-size:0.85rem;color:var(--fg-muted,#666)">
    Controls the title-based relevance gate. Blank = use built-in defaults.
  </p>

  <div class="filter-group">
    <label for="exclude_title_keywords">Exclude title keywords (one per line)</label>
    <textarea id="exclude_title_keywords" name="exclude_title_keywords" rows="4"
              style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
>{{ exclude_title_keywords }}</textarea>
  </div>

  <div class="filter-group">
    <label for="target_title_keywords">Target title keywords (one per line)</label>
    <textarea id="target_title_keywords" name="target_title_keywords" rows="4"
              style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
>{{ target_title_keywords }}</textarea>
  </div>

  <div class="filter-group">
    <label class="checkbox-item">
      <input type="checkbox" id="require_title_target" name="require_title_target"
             value="true" {% if require_title_target %}checked{% endif %}>
      Require target keyword in title (uncheck to allow any non-excluded title)
    </label>
  </div>

  <h2 style="margin:0;font-size:1.1rem">CV</h2>

  <div class="filter-group">
    <label for="default_template">Default CV template</label>
    <select id="default_template" name="default_template">
      {% for tmpl in cv_templates_list %}
      <option value="{{ tmpl.id }}" {% if tmpl.id == default_template_id %}selected{% endif %}>
        {{ tmpl.name }} ({{ tmpl.kind }})
      </option>
      {% endfor %}
    </select>
  </div>

  <div>
    <button type="submit" class="btn btn-primary">Save</button>
  </div>
</form>

  <h2 style="margin:1.5rem 0 0;font-size:1.1rem">Email</h2>
  <p style="margin:0;font-size:0.85rem;color:var(--fg-muted,#666)">
    Sets up Microsoft/Outlook email via a device-code login — no terminal needed.
    Click below, then watch the status area: it shows a Microsoft URL and a code to
    enter in your browser. See the <a href="/help">Help page</a> for full email setup.
  </p>
  <form method="post" action="/config/email-auth" style="margin-top:0.75rem">
    <button type="submit" class="btn btn-action">Set up email</button>
  </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>
{% endblock %}