{% extends "base.html" %}
{% block title %}Vacatures · VacatureRadar{% endblock %}
{% block content %}
<header class="page-header jobs-page-header">
  <div>
    <p class="eyebrow">Nieuwe matches & archief</p>
    <h1>Vacature-intelligentie</h1>
    <p>Een rustige IT-radar: eerst de aantoonbaar relevante functies, gerangschikt op persoonlijke match.</p>
  </div>
  <div class="radar-status" aria-label="Actieve relevantiefilter">
    <span class="signal-dot" aria-hidden="true"></span>
    <span>{% if current_focus == 'all' %}Volledig bronarchief{% else %}IT-focus actief{% endif %}</span>
    <span aria-hidden="true">·</span>
    <strong>{{ it_job_count }} IT-signalen</strong>
  </div>
</header>

<form method="get" class="filter-console premium-filter-console">
  <label class="grow"><span class="field-label">Zoeken</span><span class="input-with-icon"><svg class="icon"><use href="#icon-search"></use></svg><input type="search" name="q" value="{{ request.GET.q }}" placeholder="Titel, werkgever, locatie of skill"></span></label>
  <label><span class="field-label">Relevantie</span><select name="focus"><option value="it" {% if current_focus != 'all' %}selected{% endif %}>Alleen IT</option><option value="all" {% if current_focus == 'all' %}selected{% endif %}>Volledig archief</option></select></label>
  <label><span class="field-label">Match</span><select name="match"><option value="radar" {% if current_match == 'radar' %}selected{% endif %}>Radarselectie</option><option value="strong" {% if current_match == 'strong' %}selected{% endif %}>Sterke match</option><option value="possible" {% if current_match == 'possible' %}selected{% endif %}>Mogelijke match</option><option value="weak" {% if current_match == 'weak' %}selected{% endif %}>Lage match</option><option value="hidden" {% if current_match == 'hidden' %}selected{% endif %}>Verborgen</option><option value="all" {% if current_match == 'all' %}selected{% endif %}>Alle IT-scores</option></select></label>
  <label><span class="field-label">Status</span><select name="status"><option value="">Alle statussen</option>{% for value,label in view.model.Status.choices %}<option value="{{ value }}" {% if request.GET.status|default:'active' == value %}selected{% endif %}>{{ label }}</option>{% endfor %}</select></label>
  <label><span class="field-label">Werkmodel</span><select name="workplace"><option value="">Elk werkmodel</option>{% for value,label in view.model.Workplace.choices %}<option value="{{ value }}" {% if request.GET.workplace == value %}selected{% endif %}>{{ label }}</option>{% endfor %}</select></label>
  <label><span class="field-label">Sortering</span><select name="sort"><option value="match" {% if current_sort == 'match' %}selected{% endif %}>Beste match</option><option value="newest" {% if current_sort == 'newest' %}selected{% endif %}>Nieuwste eerst</option><option value="closing" {% if current_sort == 'closing' %}selected{% endif %}>Sluitingsdatum</option></select></label>
  <button class="button button-primary" type="submit"><svg class="icon"><use href="#icon-search"></use></svg>Filters toepassen</button>
</form>

<div class="results-layout">
  <section class="results-column" aria-labelledby="results-heading">
    <div class="results-toolbar">
      <div><span class="section-kicker">Gerangschikte resultaten</span><h2 id="results-heading">{{ page_obj.paginator.count }} vacatures gevonden</h2></div>
      <span class="view-indicator"><svg class="icon"><use href="#icon-radar"></use></svg>{% if current_sort == 'newest' %}Nieuwste eerst{% elif current_sort == 'closing' %}Deadline eerst{% else %}Matchvolgorde{% endif %}</span>
    </div>
    <div class="results-feed">
    {% for job in jobs %}
      {% widthratio job.match_confidence 1 100 as confidence_percent %}
      <article class="result-card {% if job.match_recommendation == 'strong' %}strong-match{% endif %}">
        <div class="result-accent" aria-hidden="true"></div>
        <div class="result-body">
          <div class="result-heading">
            <div>
              <div class="title-row"><span class="pill pill-{{ job.status }}">{{ job.get_status_display }}</span>{% if job.match_recommendation %}<span class="pill pill-{{ job.match_recommendation }}">{% if job.match_recommendation == 'strong' %}Sterke match{% elif job.match_recommendation == 'possible' %}Mogelijke match{% elif job.match_recommendation == 'weak' %}Lage match{% else %}Verborgen{% endif %}</span>{% endif %}{% if current_focus != 'all' %}<span class="pill pill-it">IT-focus</span>{% endif %}</div>
              <h2><a href="{% url 'jobs:detail' job.pk %}">{{ job.original_title }}</a></h2>
              <p>{{ job.employer_name }}</p>
            </div>
            {% if job.match_score is not None %}<div class="score-block"><strong>{{ job.match_score|floatformat:0 }}%</strong><small>Datakwaliteit {{ confidence_percent }}%</small></div>{% else %}<div class="score-block score-pending"><strong>—</strong><small>Nog niet gescoord</small></div>{% endif %}
          </div>
          <div class="job-meta"><span><svg class="icon"><use href="#icon-location"></use></svg>{{ job.raw_location|default:"Locatie onbekend" }}</span><span><svg class="icon"><use href="#icon-briefcase"></use></svg>{{ job.get_workplace_type_display }}</span><span><svg class="icon"><use href="#icon-clock"></use></svg>{{ job.first_seen|date:"d/m/Y" }}</span>{% if job.direct_employer %}<span>Directe werkgever</span>{% endif %}</div>
          {% if job.match_positives.0 %}<p class="evidence-line positive-evidence"><svg class="icon"><use href="#icon-radar"></use></svg><span>{{ job.match_positives.0 }}</span></p>{% elif job.skills_required %}<p class="result-summary"><strong>Herkenbare skills:</strong> {{ job.skills_required|slice:":4"|join:", " }}</p>{% elif job.description_text %}<p class="result-summary">{{ job.description_text|truncatewords:24 }}</p>{% endif %}
          {% if job.match_concerns.0 %}<p class="evidence-line concern-evidence"><span aria-hidden="true">!</span><span>{{ job.match_concerns.0 }}</span></p>{% endif %}
        </div>
        <div class="result-actions">
          <a class="button button-primary" href="{% url 'jobs:detail' job.pk %}">Bekijk analyse <svg class="icon"><use href="#icon-arrow"></use></svg></a>
          <form method="post" action="{% url 'jobs:feedback' job.pk %}">{% csrf_token %}<input type="hidden" name="action" value="save"><input type="hidden" name="next" value="{{ request.get_full_path }}"><button class="button button-ghost" type="submit"><svg class="icon"><use href="#icon-bookmark"></use></svg>Bewaren</button></form>
        </div>
      </article>
    {% empty %}<div class="empty-state compact-empty"><div class="empty-icon"><svg class="icon"><use href="#icon-search"></use></svg></div><h2>Geen passende vacatures gevonden</h2><p>Pas de filters aan of open het volledige bronarchief. Niet-IT-vacatures en harde uitsluitingen blijven standaard bewust uit je radar.</p><a class="button button-secondary" href="?focus=all&match=all&status=active&sort=match">Volledig archief bekijken</a></div>{% endfor %}
    </div>
    {% if is_paginated %}<nav class="pagination" aria-label="Paginering">{% if page_obj.has_previous %}<a class="button button-ghost" href="?page={{ page_obj.previous_page_number }}&q={{ request.GET.q }}&status={{ request.GET.status }}&workplace={{ request.GET.workplace }}&focus={{ current_focus }}&match={{ current_match }}&sort={{ current_sort }}">Vorige</a>{% endif %}<span>Pagina {{ page_obj.number }} van {{ page_obj.paginator.num_pages }}</span>{% if page_obj.has_next %}<a class="button button-ghost" href="?page={{ page_obj.next_page_number }}&q={{ request.GET.q }}&status={{ request.GET.status }}&workplace={{ request.GET.workplace }}&focus={{ current_focus }}&match={{ current_match }}&sort={{ current_sort }}">Volgende</a>{% endif %}</nav>{% endif %}
  </section>

  <aside class="jobs-insight-rail" aria-label="Radarcontext">
    <section class="panel rail-panel radar-summary"><span class="section-kicker">Radarbereik</span><h2>IT-focus</h2><p class="muted">Titels krijgen eerst een deterministische sectorcontrole. AI kan deze grens niet wijzigen.</p><div class="rail-list"><div class="rail-item"><span>Actieve IT-vacatures</span><strong>{{ it_job_count }}</strong></div><div class="rail-item"><span>Niet-IT uit beeld</span><strong>{{ filtered_non_it_count }}</strong></div><div class="rail-item"><span>Volledig actief archief</span><strong>{{ active_job_count }}</strong></div></div><a class="button button-ghost button-block" href="?focus={% if current_focus == 'all' %}it{% else %}all{% endif %}&match={% if current_focus == 'all' %}radar{% else %}all{% endif %}&status=active&sort=match">{% if current_focus == 'all' %}Terug naar IT-focus{% else %}Volledig archief openen{% endif %}</a></section>
    <section class="panel rail-panel"><span class="section-kicker">Actief zoekprofiel</span><h2>{{ active_profile.name|default:"Geen profiel actief" }}</h2>{% if active_profile %}<div class="profile-signal-grid"><div><span>Rollen</span><strong>{{ active_profile.desired_titles|length }}</strong></div><div><span>Skills</span><strong>{{ active_profile.desired_skills|length }}</strong></div><div><span>Radius</span><strong>{{ active_profile.max_distance_km }} km</strong></div><div><span>Vanaf</span><strong>{{ active_profile.recommendation_threshold }}%</strong></div></div><div class="stack-actions"><a class="button button-secondary button-block" href="{% url 'jobs:skill-insights' %}">Bekijk vraag & leerkansen</a><a class="button button-ghost button-block" href="{% url 'profiles:edit' active_profile.pk %}">Profiel verfijnen</a></div>{% else %}<p class="muted">Activeer een zoekprofiel om persoonlijke scores te berekenen.</p>{% endif %}</section>
    <section class="panel rail-panel"><span class="section-kicker">Hoe rangschikking werkt</span><h2>Deterministisch eerst</h2><ol class="radar-steps"><li><strong>IT-titel</strong><span>Sectorfilter op functietitel.</span></li><li><strong>Harde regels</strong><span>Afstand en uitsluitingen winnen altijd.</span></li><li><strong>Matchscore</strong><span>Rollen, skills en voorkeuren bepalen de volgorde.</span></li></ol></section>
  </aside>
</div>
{% endblock %}