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

{% block title %}Sources — 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/sources/save"
      style="display:grid;gap:2rem;max-width:36rem">

  <section id="sources">
    <h2 style="margin:0 0 0.75rem;font-size:1.15rem;border-bottom:1px solid var(--border);
               padding-bottom:0.4rem">Sources</h2>
    <p style="margin:0 0 0.75rem;font-size:0.85rem;color:var(--muted)">
      Enable/disable job sources and configure their settings.
      API secrets (keys, passwords) live in <code>secrets.toml</code> — never entered here.
    </p>

    {# Greenhouse #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="greenhouse_enabled" value="true"
                 {% if src_greenhouse.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          Greenhouse
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <div class="filter-group">
          <label for="greenhouse_companies">Company slugs (one per line)
            <span class="field-help">Greenhouse board token — usually the company slug.</span>
          </label>
          <textarea id="greenhouse_companies" name="greenhouse_companies" rows="3"
                    style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                    data-list-drawer="greenhouse_companies"
>{{ "\n".join(src_greenhouse.get("companies", [])) }}</textarea>
        </div>
      </div>
    </details>

    {# Lever #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="lever_enabled" value="true"
                 {% if src_lever.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          Lever
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <div class="filter-group">
          <label for="lever_companies">Company slugs (one per line)</label>
          <textarea id="lever_companies" name="lever_companies" rows="3"
                    style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                    data-list-drawer="lever_companies"
>{{ "\n".join(src_lever.get("companies", [])) }}</textarea>
        </div>
      </div>
    </details>

    {# Ashby #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="ashby_enabled" value="true"
                 {% if src_ashby.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          Ashby
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <div class="filter-group">
          <label for="ashby_companies">Company slugs (one per line)</label>
          <textarea id="ashby_companies" name="ashby_companies" rows="3"
                    style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                    data-list-drawer="ashby_companies"
>{{ "\n".join(src_ashby.get("companies", [])) }}</textarea>
        </div>
      </div>
    </details>

    {# Teamtailor #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="teamtailor_enabled" value="true"
                 {% if src_teamtailor.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          Teamtailor
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <div class="filter-group">
          <label for="teamtailor_companies">Company tokens (one per line)
            <span class="field-help">
              Bare slug (e.g. <code>polestar</code>) or full custom host
              (e.g. <code>careers.voi.com</code>).
            </span>
          </label>
          <textarea id="teamtailor_companies" name="teamtailor_companies" rows="3"
                    style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                    data-list-drawer="teamtailor_companies"
>{{ "\n".join(src_teamtailor.get("companies", [])) }}</textarea>
        </div>
      </div>
    </details>

    {# Adzuna #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="adzuna_enabled" value="true"
                 {% if src_adzuna.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          Adzuna
        </label>
        {% if adzuna_secret_configured %}
        <span class="secret-status configured">API key configured ✓</span>
        {% else %}
        <span class="secret-status missing">API key not configured</span>
        {% endif %}
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <p style="margin:0 0 0.5rem;font-size:0.82rem;color:var(--muted)">
          API secrets (<code>app_id</code>, <code>app_key</code>) must be set in
          <code>secrets.toml</code> — not editable here.
        </p>
        <div class="filter-group" style="margin-bottom:0.5rem">
          <label for="adzuna_country">Country code
            <span class="field-help">Two-letter country code, e.g. <code>gb</code>, <code>us</code>.</span>
          </label>
          <input type="text" id="adzuna_country" name="adzuna_country"
                 value="{{ src_adzuna.get('country', '') }}"
                 style="width:6rem;font-family:inherit">
        </div>
        <div class="filter-group" style="margin-bottom:0.5rem">
          <label for="adzuna_what">Search term (<code>what</code>)</label>
          <input type="text" id="adzuna_what" name="adzuna_what"
                 value="{{ src_adzuna.get('what', '') }}"
                 style="width:100%;font-family:inherit">
        </div>
        <div class="filter-group">
          <label for="adzuna_where">Location (<code>where</code>)</label>
          <input type="text" id="adzuna_where" name="adzuna_where"
                 value="{{ src_adzuna.get('where', '') }}"
                 style="width:100%;font-family:inherit">
        </div>
      </div>
    </details>

    {# Themuse #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="themuse_enabled" value="true"
                 {% if src_themuse.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          The Muse
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <div class="filter-group">
          <label for="themuse_category">Category</label>
          <input type="text" id="themuse_category" name="themuse_category"
                 value="{{ src_themuse.get('category', '') }}"
                 style="width:100%;font-family:inherit">
        </div>
      </div>
    </details>

    {# Remotive #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="remotive_enabled" value="true"
                 {% if src_remotive.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          Remotive
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <div class="filter-group">
          <label for="remotive_category">Category</label>
          <input type="text" id="remotive_category" name="remotive_category"
                 value="{{ src_remotive.get('category', '') }}"
                 style="width:100%;font-family:inherit">
        </div>
      </div>
    </details>

    {# Simple toggle sources #}
    <div style="display:grid;gap:0.5rem;margin-bottom:1rem">
      <label class="checkbox-item">
        <input type="checkbox" name="remoteok_enabled" value="true"
               {% if src_remoteok.get("enabled") %}checked{% endif %}>
        RemoteOK
      </label>
      <label class="checkbox-item">
        <input type="checkbox" name="arbeitnow_enabled" value="true"
               {% if src_arbeitnow.get("enabled") %}checked{% endif %}>
        Arbeitnow
      </label>
      <label class="checkbox-item">
        <input type="checkbox" name="wwr_enabled" value="true"
               {% if src_wwr.get("enabled") %}checked{% endif %}>
        We Work Remotely
      </label>
    </div>

    {# JobTech #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="jobtech_enabled" value="true"
                 {% if src_jobtech.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          JobTech (Arbetsförmedlingen)
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <p style="margin:0 0 0.5rem;font-size:0.82rem;color:var(--muted)">
          Keyless Swedish Platsbanken API. No API key required.
        </p>
        <div class="filter-group">
          <label for="jobtech_query">Search query (optional)</label>
          <input type="text" id="jobtech_query" name="jobtech_query"
                 value="{{ src_jobtech.get('query', '') }}"
                 style="width:100%;font-family:inherit">
        </div>
      </div>
    </details>

    <div style="padding-top:1rem;border-top:1px solid var(--border);margin-top:1rem">
      <button type="submit" class="btn btn-primary">Save sources</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 %}