{% extends "base.html" %}
{% block title %}Zoekprofiel · VacatureRadar{% endblock %}
{% block content %}
<header class="cockpit-heading"><div><p class="eyebrow">Persoonlijke radar</p><h1>Zoekprofiel</h1><p>Je harde grenzen blijven deterministisch; ervaringsduur is alleen context en nooit een scorefactor.</p></div></header>
<div class="profile-index-grid">
  {% for profile in profiles %}
  <article class="profile-index-card {% if profile.is_active %}strong-match{% endif %}">
    <div class="profile-index-content">
      <div class="profile-index-head"><span class="source-icon"><svg class="icon"><use href="#icon-profile"></use></svg></span><span class="pill {% if profile.is_active %}pill-success{% endif %}">{% if profile.is_active %}Live{% else %}Pauze{% endif %}</span></div>
      <h2>{{ profile.name }}</h2>
      <p class="muted">{{ profile.desired_titles|slice:":3"|join:", "|default:"Nog geen rollen geselecteerd" }}</p>
      <dl class="intel-facts"><div><dt>Postcode</dt><dd>{{ profile.home_postal_code|default:"—" }}</dd></div><div><dt>Radius</dt><dd>{{ profile.max_distance_km }} km</dd></div><div><dt>Skills</dt><dd>{{ profile.desired_skills|length }}</dd></div><div><dt>Versie</dt><dd>{{ profile.version }}</dd></div></dl>
      <div class="page-actions"><a class="button button-primary" href="{% url 'profiles:edit' profile.pk %}">Radar configureren</a>{% if not profile.is_active %}<form method="post" action="{% url 'profiles:activate' profile.pk %}">{% csrf_token %}<button class="button button-ghost" type="submit">Activeren</button></form>{% endif %}</div>
    </div>
    <div class="profile-index-art" title="Interactieve visualisatie van je persoonlijke radar">{% include "components/radar_illustration.html" %}</div>
  </article>
  {% empty %}
  <div class="empty-state illustrated-empty">{% include "components/radar_illustration.html" %}<h2>Geen profiel beschikbaar</h2><p>Initialiseer het persoonlijke profiel via de bootstrapopdracht.</p></div>
  {% endfor %}
</div>
{% endblock %}