{% extends "base.html" %}
{% block title %}Zoeken{% endblock %}

{% block content %}
<h1>Zoeken</h1>

<form class="search-box" action="/zoeken" method="get">
    <input type="text" name="q" value="{{ query }}" placeholder="Zoek in alle wetgeving..." autofocus>
    <select name="mode">
        <option value="keyword" {% if mode == 'keyword' %}selected{% endif %}>Keyword</option>
        <option value="semantic" {% if mode == 'semantic' %}selected{% endif %}>Semantisch</option>
    </select>
    <button type="submit">Zoek</button>
</form>

{% if query %}
<p class="subtitle">{{ results|length }} resultaten voor "{{ query }}"
{% if mode == 'semantic' %} (semantisch zoeken){% endif %}</p>

{% for r in results %}
<div class="result">
    <div class="result-title">
        <a href="/grondwet#artikel-{{ r.artikel.split(' ')[-1] }}">{{ r.artikel }}</a>
        — {{ r.titel }}
        {% if r.score %}<span class="result-score">({{ "%.1f"|format(r.score * 100) }}% match)</span>{% endif %}
    </div>
    <div class="result-context">{{ r.context[:200] }}</div>
</div>
{% endfor %}

{% if not results %}
<p>Geen resultaten gevonden.</p>
{% endif %}
{% endif %}
{% endblock %}