{% extends "base.html" %}
{% block title %}Vandaag · VacatureRadar{% endblock %}
{% block content %}
<header class="page-header">
  <div><p class="eyebrow">Intelligence cockpit</p><h1>Goedemorgen, {{ user.first_name|default:user.username }}</h1><p>Je persoonlijke radar brengt alleen actuele signalen en concrete volgende stappen samen.</p></div>
  <div class="page-actions"><a class="button button-primary" href="{% url 'jobs:list' %}"><svg class="icon"><use href="#icon-search"></use></svg>Vacatures verkennen</a></div>
</header>
<section class="stats-grid" aria-label="Kerncijfers">
  <article class="stat-card signal"><span class="kpi-label">Nieuwe signalen</span><strong>{{ new_today }}</strong><small>vandaag gevonden</small></article>
  <article class="stat-card"><span class="kpi-label">Actieve vacatures</span><strong>{{ active_jobs }}</strong><small>actueel in de radar</small></article>
  <article class="stat-card"><span class="kpi-label">Open dossiers</span><strong>{{ applications_open }}</strong><small>sollicitaties in opvolging</small></article>
  <article class="stat-card"><span class="kpi-label">Bronstatus</span><strong>{{ source_counts.total|default:0 }}</strong><small>{{ source_counts.unhealthy|default:0 }} vragen aandacht</small></article>
</section>

<div class="dashboard-grid">
  <section>
    <div class="section-heading"><div><span class="section-kicker">Gerangschikt voor jou</span><h2>Beste matches</h2><p>Matchscore en dataconfidence blijven bewust afzonderlijk zichtbaar.</p></div><a href="{% url 'jobs:list' %}">Alles bekijken →</a></div>
    <div class="job-grid">
    {% for score in score_cards %}
      <article class="job-card {% if score.recommendation == 'strong' %}strong-match{% endif %}">
        <div class="job-card-head">
          <div><span class="pill pill-{{ score.recommendation }}">{{ score.get_recommendation_display }}</span><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>confidence {{ score.confidence|floatformat:2 }}</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></div>
        {% if score.positives %}<ul class="compact-list positive">{% for item in score.positives|slice:":2" %}<li>{{ item }}</li>{% endfor %}</ul>{% endif %}
        {% if score.concerns %}<p class="attention"><strong>Aandachtspunt:</strong> {{ score.concerns.0 }}</p>{% endif %}
        <div class="job-actions">
          <form method="post" action="{% url 'jobs:feedback' score.job.pk %}">{% csrf_token %}<input type="hidden" name="action" value="interesting"><input type="hidden" name="next" value="{{ request.path }}"><button class="button button-primary" type="submit">Interessant</button></form>
          <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-secondary" type="submit"><svg class="icon"><use href="#icon-bookmark"></use></svg>Bewaren</button></form>
          <a class="button button-ghost" href="{% url 'jobs:detail' score.job.pk %}">Analyse <svg class="icon"><use href="#icon-arrow"></use></svg></a>
        </div>
      </article>
    {% empty %}
      <div class="empty-state"><div class="empty-icon"><svg class="icon"><use href="#icon-radar"></use></svg></div><h2>Nog geen beoordeelde vacatures</h2><p>Importeer vacaturedata of activeer een toegestane bron. De eerste betrouwbare resultaten verschijnen hier automatisch.</p><a class="button button-secondary" href="{% url 'sources:list' %}">Bronnen beheren</a></div>
    {% endfor %}
    </div>
  </section>
  <aside class="dashboard-rail" aria-label="Radarstatus">
    <section class="panel radar-summary"><span class="section-kicker">Vandaag</span><h2>Radarstatus</h2><p class="muted">Alle cijfers komen rechtstreeks uit de huidige database. Geen gesimuleerde trends of workerdata.</p><div class="rail-list"><div class="rail-item"><span>Bronnen actief</span><strong>{{ source_counts.total|default:0 }}</strong></div><div class="rail-item"><span>Aandacht nodig</span><strong>{{ source_counts.unhealthy|default:0 }}</strong></div></div></section>
    <section class="panel"><span class="section-kicker">Volgende stap</span><h2>Snelle acties</h2><div class="stack-actions"><a class="button button-secondary button-block" href="{% url 'sources:list' %}"><svg class="icon"><use href="#icon-upload"></use></svg>Handmatig importeren</a><a class="button button-ghost button-block" href="{% url 'profiles:list' %}"><svg class="icon"><use href="#icon-profile"></use></svg>Zoekprofiel controleren</a><a class="button button-ghost button-block" href="{% url 'jobs:applications' %}"><svg class="icon"><use href="#icon-pipeline"></use></svg>Pipeline openen</a></div></section>
  </aside>
</div>
{% endblock %}