{% extends "base.html" %}
{% block title %}Zoeken{% if q %}: {{ q }}{% endif %}{% endblock %}

{% block content %}
<section class="hero hero-small">
    <form action="/hseq-dashboard/search" method="get" class="search-box">
        <div class="search-input-wrap">
            <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" name="q" value="{{ q }}" placeholder="Typ zoekterm..." class="search-input" autofocus>
        </div>
        <button type="submit" class="btn btn-primary">Zoeken</button>
    </form>
</section>

{% if q %}
<section class="search-header">
    <h2 class="search-title">{{ results.total }} resultaat{{ results.total != 1 and 'ten' or '' }} voor "<span class="highlight">{{ q }}</span>"</h2>
</section>
{% endif %}

{% if results and results.results %}
<section class="results-list">
    {% for doc in results.results %}
    <a href="/hseq-dashboard/document/{{ doc.id }}" class="result-item">
        <div class="result-top">
            <h3 class="result-title">{{ doc.title or doc.filename }}</h3>
            <span class="badge badge-{{ doc.category | lower | replace(' ', '-') | replace('/', '-') | cat_class }}">{{ doc.category or '—' }}</span>
        </div>
        {% if doc.snippet %}
        <p class="result-snippet">{{ doc.snippet|safe }}</p>
        {% endif %}
        <div class="result-meta">
            <span>{{ doc.author or '—' }}</span>
            {% if doc.pages %}<span>{{ doc.pages }} pg</span>{% endif %}
            {% if doc.file_size %}<span>{{ doc.file_size }}</span>{% endif %}
        </div>
    </a>
    {% endfor %}
</section>

{% if results.pages > 1 %}
<nav class="pagination">
    {% if results.page > 1 %}
    <a href="/hseq-dashboard/search?q={{ q | urlencode }}&page={{ results.page - 1 }}" class="page-btn">← Vorige</a>
    {% endif %}
    <span class="page-info">Pagina {{ results.page }} van {{ results.pages }}</span>
    {% if results.page < results.pages %}
    <a href="/hseq-dashboard/search?q={{ q | urlencode }}&page={{ results.page + 1 }}" class="page-btn">Volgende →</a>
    {% endif %}
</nav>
{% endif %}

{% else %}
<section class="empty-state">
    <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
    <p class="empty-text">Geen resultaten gevonden.</p>
    <div class="empty-tips">
        <p>• Controleer de spelling van je zoekterm</p>
        <p>• Gebruik minder specifieke termen</p>
        <p>• Zoek op categorie in plaats van vrije tekst</p>
    </div>
    <a href="/hseq-dashboard/" class="btn btn-outline">← Terug naar overzicht</a>
</section>
{% endif %}
{% endblock %}