{% extends "base.html" %}
{% block title %}Vandaag · VacatureRadar{% endblock %}
{% block content %}
<header class="cockpit-heading dashboard-heading">
  <div><p class="eyebrow">Intelligence cockpit · vandaag</p><h1>Goedemorgen, {{ user.first_name|default:user.username }}.</h1><p>{{ day_conclusion }}</p></div>
  <div class="radar-status" aria-label="Profiel- en scanstatus"><span class="status-beacon {% if active_profile %}is-live{% endif %}" aria-hidden="true"></span><span>{% if active_profile %}Profiel actief · {{ active_profile.name }}{% else %}Geen actief profiel{% endif %}</span>{% if latest_scan %}<span aria-hidden="true">·</span><span>laatste URL-scan {{ latest_scan.started_at|timesince }} geleden</span>{% endif %}</div>
</header>

<section class="stats-grid" aria-label="Radar kerncijfers">
  <article class="stat-card signal"><span class="kpi-label">Nieuwe IT-signalen</span><strong>{{ new_today }}</strong><small>vandaag ontdekt</small></article>
  <article class="stat-card"><span class="kpi-label">Sterke matches</span><strong>{{ strong_today }}</strong><small>vandaag · laatste profielscore</small></article>
  <article class="stat-card"><span class="kpi-label">Open trajecten</span><strong>{{ applications_open }}</strong><small>persoonlijke sollicitatiedossiers</small></article>
  <article class="stat-card"><span class="kpi-label">Radardekking</span><strong>{{ source_counts.active|default:0 }}/{{ source_counts.total|default:0 }}</strong><small>bronnen actief · {{ source_counts.attention|default:0 }} aandacht</small></article>
</section>

<div class="dashboard-grid">
  <section class="dashboard-matches" aria-labelledby="best-matches-heading">
    <div class="section-heading"><div><span class="section-kicker">Persoonlijk gerangschikt</span><h2 id="best-matches-heading">Beste nieuwe matches</h2><p>De nieuwste score per vacature; datakwaliteit staat los van de inhoudelijke match.</p></div><a class="section-link" href="{% url 'jobs:list' %}">Open verkenner <svg class="icon"><use href="#icon-arrow"></use></svg></a></div>
    <div class="job-feed">
    {% for score in score_cards %}
      {% widthratio score.confidence 1 100 as confidence_percent %}
      <article class="job-card feed-card {% if score.recommendation == 'strong' %}strong-match{% endif %}">
        <div class="job-card-main">
          <div class="job-card-head"><div><div class="title-row"><span class="pill pill-{{ score.recommendation }}">{{ score.get_recommendation_display }}</span>{% if score.job.direct_employer %}<span class="pill">Directe werkgever</span>{% elif score.job.recruiter %}<span class="pill">Recruiter</span>{% endif %}</div><h3><a href="{% url 'jobs:detail' score.job.pk %}">{{ score.job.original_title }}</a></h3><p>{{ score.job.employer_name }}</p></div><div class="score-block"><strong>{{ score.score|floatformat:0 }}%</strong><small>match · data {{ confidence_percent }}%</small></div></div>
          <div class="job-meta"><span><svg class="icon"><use href="#icon-location"></use></svg>{{ score.job.raw_location|default:"Locatie onbekend" }}</span><span><svg class="icon"><use href="#icon-briefcase"></use></svg>{{ score.job.get_workplace_type_display }}</span>{% if score.job.valid_through %}<span><svg class="icon"><use href="#icon-calendar"></use></svg>sluit {{ score.job.valid_through|date:"d/m" }}</span>{% endif %}</div>
          {% if score.positives %}<p class="evidence-line positive-evidence"><svg class="icon"><use href="#icon-check"></use></svg>{{ score.positives.0 }}</p>{% endif %}
          {% if score.concerns %}<p class="evidence-line concern-evidence"><svg class="icon"><use href="#icon-alert"></use></svg>{{ score.concerns.0 }}</p>{% endif %}
        </div>
        <div class="feed-card-actions"><a class="button button-primary" href="{% url 'jobs:detail' score.job.pk %}">Analyse <svg class="icon"><use href="#icon-arrow"></use></svg></a><form method="post" action="{% url 'jobs:feedback' score.job.pk %}">{% csrf_token %}<input type="hidden" name="action" value="save"><input type="hidden" name="next" value="{{ request.path }}"><button class="button button-ghost" type="submit"><svg class="icon"><use href="#icon-bookmark"></use></svg>Bewaar</button></form></div>
      </article>
    {% empty %}
      <div class="empty-state compact-empty"><div class="empty-icon"><svg class="icon"><use href="#icon-radar"></use></svg></div><h2>Nog geen persoonlijke matches</h2><p>Na een geldige bronrun en profielscore verschijnen relevante IT-vacatures hier automatisch.</p><div class="page-actions"><a class="button button-primary" href="{% url 'sources:list' %}">Bronnen controleren</a><a class="button button-ghost" href="{% url 'profiles:list' %}">Profiel openen</a></div></div>
    {% endfor %}
    </div>
  </section>

  <aside class="dashboard-rail" aria-label="Radarintelligence">
    <section class="panel rail-panel radar-summary"><span class="section-kicker">Dagconclusie</span><h2>{{ day_conclusion }}</h2><div class="rail-list"><div class="rail-item"><span>Actieve IT-vacatures</span><strong>{{ active_jobs }}</strong></div><div class="rail-item"><span>Niet-IT gefilterd</span><strong>{{ filtered_non_it_jobs }}</strong></div><div class="rail-item"><span>Duplicaten herkend</span><strong>{{ duplicate_jobs }}</strong></div></div><a class="button button-secondary button-block" href="{% url 'jobs:list' %}">Bekijk alle matches</a></section>

    <section class="panel rail-panel"><span class="section-kicker">Opvolging</span><h2>Actie vereist</h2><div class="rail-application-list">{% for application in priority_applications %}<a class="rail-application" href="{% url 'jobs:application-edit' application.pk %}"><span><strong>{{ application.job.original_title }}</strong><small>{{ application.job.employer_name }} · {{ application.get_status_display }}</small></span>{% if application.follow_up_date %}<time datetime="{{ application.follow_up_date|date:'Y-m-d' }}">{{ application.follow_up_date|date:"d/m" }}</time>{% else %}<svg class="icon"><use href="#icon-arrow"></use></svg>{% endif %}</a>{% empty %}<p class="muted small">Geen open dossier vraagt nu opvolging.</p>{% endfor %}</div><a class="button button-ghost button-block" href="{% url 'jobs:applications' %}">Open pipeline</a></section>

    <section class="panel rail-panel"><span class="section-kicker">Recente activiteit</span><h2>Radarlog</h2><div class="mini-timeline">{% for event in recent_activity %}<div class="mini-event"><span class="status-beacon {% if event.tone == 'positive' %}is-live{% endif %}" aria-hidden="true"></span><span><strong>{{ event.title }}</strong><small>{{ event.detail }} · {{ event.occurred_at|timesince }} geleden</small></span></div>{% empty %}<p class="muted small">Nog geen betrouwbare activiteit geregistreerd.</p>{% endfor %}</div><a class="button button-ghost button-block" href="{% url 'dashboard:system' %}">Automation bekijken</a></section>
  </aside>
</div>
{% endblock %}