{% extends "base.html" %}

{% block title %}Jobs — karyab{% endblock %}

{% block content %}
<h1>Job listings</h1>

<div class="actions-toolbar">
  <form method="post" action="/actions/fetch" style="display:inline">
    <button type="submit" class="btn btn-action">Fetch</button>
  </form>
  <form method="post" action="/actions/rank" style="display:inline">
    <button type="submit" class="btn btn-action">Rank</button>
  </form>
  <span id="action-status"
        hx-get="/actions/status?format=html"
        hx-trigger="load, every 2s"
        hx-swap="outerHTML"
        hx-target="#action-status"></span>
</div>

<div class="summary">
  <div class="summary-item">
    <span class="num">{{ total }}</span>
    <span class="label">Total</span>
  </div>
  <div class="summary-item">
    <span class="num">{{ matching }}</span>
    <span class="label">Matching</span>
  </div>
  <div class="summary-item">
    <span class="num">{{ applied_count }}</span>
    <span class="label">Applied</span>
  </div>
  <div class="summary-item">
    <span class="num">{{ followups_due }}</span>
    <span class="label">Follow-ups due</span>
  </div>
</div>

<form class="filter-form"
      hx-get="/"
      hx-target="#job-table"
      hx-trigger="change, input delay:300ms">
  <div class="filter-group">
    <label for="min_score">Min score</label>
    <input type="number" id="min_score" name="min_score"
           value="{{ min_score }}" min="0" max="100" style="width:6rem;">
  </div>
  <div class="filter-group">
    <label for="source">Source</label>
    <select id="source" name="source">
      <option value="">All sources</option>
      {% for src in all_sources %}
      <option value="{{ src }}" {% if src == source_filter %}selected{% endif %}>{{ src }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="filter-group filter-group--status-dropdown">
    <label>Status</label>
    <details class="status-dropdown">
      <summary class="status-dropdown__summary">
        Status ▾
      </summary>
      <div class="status-dropdown__panel">
        {% for st in all_statuses %}
        {% if status_filter is not none %}
        {% set checked = st in status_filter %}
        {% else %}
        {% set checked = st not in hidden_statuses_default %}
        {% endif %}
        <label class="checkbox-item">
          <input type="checkbox" name="status" value="{{ st }}"
                 {% if checked %}checked{% endif %}>
          {{ st|status_label if st != "untracked" else "New / untracked" }}
        </label>
        {% endfor %}
      </div>
    </details>
  </div>
  <div class="filter-group">
    <label for="q">Search</label>
    <input type="text" id="q" name="q" value="{{ q }}" placeholder="title, company, location">
  </div>
  <div class="filter-group">
    <label for="sweden">Sweden only</label>
    <input type="checkbox" id="sweden" name="sweden" value="true"
           {% if sweden %}checked{% endif %}>
  </div>
  <div class="filter-group">
    <label for="mode">Mode</label>
    <select id="mode" name="mode">
      <option value="">All modes</option>
      <option value="remote" {% if mode_filter == "remote" %}selected{% endif %}>Remote</option>
      <option value="hybrid" {% if mode_filter == "hybrid" %}selected{% endif %}>Hybrid</option>
      <option value="onsite" {% if mode_filter == "onsite" %}selected{% endif %}>On-site</option>
    </select>
  </div>
  <div class="filter-group">
    <label for="lang">Language</label>
    <select id="lang" name="lang">
      <option value="">All languages</option>
      <option value="english" {% if lang_filter == "english" %}selected{% endif %}>English</option>
      <option value="swedish" {% if lang_filter == "swedish" %}selected{% endif %}>Swedish</option>
    </select>
  </div>
  <div class="filter-group">
    <label for="show_unranked">Show unranked</label>
    <input type="checkbox" id="show_unranked" name="show_unranked" value="true"
           {% if show_unranked %}checked{% endif %}>
  </div>
</form>

{% include "_job_table.html" %}

<details style="margin-top:2rem;border:1px solid var(--border);border-radius:6px;padding:0.75rem 1rem">
  <summary style="cursor:pointer;font-weight:600">Add job manually</summary>
  <form method="post" action="/jobs/add" style="margin-top:0.75rem;display:grid;gap:0.5rem;max-width:36rem">
    <div class="filter-group">
      <label for="add_company">Company *</label>
      <input type="text" id="add_company" name="company" required placeholder="Acme Corp">
    </div>
    <div class="filter-group">
      <label for="add_title">Title *</label>
      <input type="text" id="add_title" name="title" required placeholder="Senior Engineer">
    </div>
    <div class="filter-group">
      <label for="add_url">URL *</label>
      <input type="url" id="add_url" name="url" required placeholder="https://...">
    </div>
    <div class="filter-group">
      <label for="add_location">Location</label>
      <input type="text" id="add_location" name="location" placeholder="Stockholm">
    </div>
    <div class="filter-group">
      <label for="add_remote">Remote</label>
      <input type="checkbox" id="add_remote" name="remote" value="true">
    </div>
    <div>
      <label for="add_description" style="display:block;margin-bottom:0.25rem;font-size:0.9rem">Description</label>
      <textarea id="add_description" name="description" rows="4" placeholder="Paste description (optional)..."
        style="width:100%;padding:0.35rem 0.5rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg);resize:vertical;font-size:0.9rem"></textarea>
    </div>
    <div>
      <button type="submit" class="btn btn-primary">Add job</button>
    </div>
  </form>
</details>
{% endblock %}