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

{% block content %}
<section class="hero">
    <h1 class="hero-title">HSEQ Kennisbank</h1>
    <p class="hero-sub">Centraal documentbeheer voor HSEQ compliance</p>
    <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" placeholder="Zoek in {{ stats.total_documents }} documenten..." class="search-input" autofocus>
        </div>
        <button type="submit" class="btn btn-primary">Zoeken</button>
    </form>
</section>

{% if stats %}
<section class="stats-grid">
    <div class="stat-card">
        <span class="stat-value">{{ stats.total_documents }}</span>
        <span class="stat-label">Documenten</span>
    </div>
    <div class="stat-card">
        <span class="stat-value">{{ stats.total_pages }}</span>
        <span class="stat-label">Pagina's</span>
    </div>
    <div class="stat-card">
        <span class="stat-value">{{ stats.total_categories }}</span>
        <span class="stat-label">Categorieën</span>
    </div>
    <div class="stat-card">
        <span class="stat-value">{{ stats.total_size }}</span>
        <span class="stat-label">Totale grootte</span>
    </div>
</section>
{% endif %}

{% if categories %}
<section class="categories-bar">
    <span class="categories-label">Filter:</span>
    <div class="categories-scroll">
        <a href="/hseq-dashboard/" class="pill {% if not category %}pill-active{% endif %}">Alle</a>
        {% for cat in categories %}
        <a href="/hseq-dashboard/?category={{ cat.category | urlencode }}" class="pill {% if category == cat.category %}pill-active{% endif %}">{{ cat.category }} ({{ cat.count }})</a>
        {% endfor %}
    </div>
</section>
{% endif %}

{% if documents and documents.results %}
<section class="doc-grid">
    {% for doc in documents.results %}
    <a href="/hseq-dashboard/document/{{ doc.id }}" class="doc-card">
        <div class="doc-card-header">
            <span class="badge badge-{{ doc.category | lower | replace(' ', '-') | replace('/', '-') | cat_class }}">{{ doc.category or 'Ongecategoriseerd' }}</span>
            {% if doc.pages %}<span class="doc-meta-sm">{{ doc.pages }} pg</span>{% endif %}
        </div>
        <h3 class="doc-card-title">{{ doc.title or doc.filename }}</h3>
        {% if doc.preview %}
        <p class="doc-card-preview">{{ doc.preview[:150] }}…</p>
        {% endif %}
        <div class="doc-card-footer">
            <span class="doc-meta">{{ doc.author or '—' }}</span>
            <span class="doc-meta">{{ doc.file_size or '' }}</span>
        </div>
    </a>
    {% endfor %}
</section>

{% if documents.pages > 1 %}
<nav class="pagination">
    {% if documents.page > 1 %}
    <a href="/hseq-dashboard/?page={{ documents.page - 1 }}{% if category %}&category={{ category | urlencode }}{% endif %}" class="page-btn">← Vorige</a>
    {% endif %}
    <span class="page-info">Pagina {{ documents.page }} van {{ documents.pages }}</span>
    {% if documents.page < documents.pages %}
    <a href="/hseq-dashboard/?page={{ documents.page + 1 }}{% if category %}&category={{ category | urlencode }}{% endif %}" 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"><path d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>
    <p class="empty-text">Geen documenten gevonden{% if category %} in categorie "{{ category }}"{% endif %}.</p>
    <a href="/hseq-dashboard/" class="btn btn-outline">Toon alle documenten</a>
</section>
{% endif %}
{% endblock %}