{% extends "base.html" %}

{% block title %}Handleidingen{% endblock %}
{% block page_title %}Handleidingen{% endblock %}

{% block extra_css %}
<style>
    .hl-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 22px; }
    .hl-kaart { display: block; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
                text-decoration: none; color: inherit; background: var(--surface); transition: border-color .12s, box-shadow .12s; }
    .hl-kaart:hover { border-color: var(--primary-color); box-shadow: var(--shadow); }
    .hl-kaart h3 { margin: 0 0 6px; font-size: 1rem; color: var(--primary-color); }
    .hl-kaart p { margin: 0 0 8px; color: var(--text-muted); font-size: .9rem; }
    .hl-kaart .meta { font-size: .78rem; color: var(--text-muted); }
    .hl-cat { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 6px 0 10px; font-weight: 700; }
</style>
{% endblock %}

{% block content %}
<div class="card">
    <div class="page-head">
        <h2>📘 Handleidingen</h2>
        {% if is_admin %}
        <a class="btn btn-sm btn-success" href="{{ url_for('handleidingen.nieuw') }}">➕ Nieuwe handleiding</a>
        {% endif %}
    </div>

    <form method="GET" class="search-bar">
        <input type="search" name="q" value="{{ q }}" placeholder="Zoek in de handleidingen…">
        <button type="submit">🔍 Zoeken</button>
        {% if q %}<a class="btn btn-light" href="{{ url_for('handleidingen.overzicht') }}">✕ Wissen</a>{% endif %}
    </form>

    {% for cat, items in per_cat.items() %}
        <div class="hl-cat">{{ cat }}</div>
        <div class="hl-lijst">
            {% for h in items %}
            <a class="hl-kaart" href="{{ url_for('handleidingen.bekijk', slug=h.Slug) }}">
                <h3>{{ h.Titel }}</h3>
                {% if h.Samenvatting %}<p>{{ h.Samenvatting }}</p>{% endif %}
                <div class="meta">
                    {% if h.Zichtbaar == 'admins' %}<span class="badge badge-warning">🔒 enkel admins</span> {% endif %}
                    Bijgewerkt {{ h.Gewijzigd_op.strftime('%d-%m-%Y') }}{% if h.Gewijzigd_door %} door {{ h.Gewijzigd_door }}{% endif %}
                </div>
            </a>
            {% endfor %}
        </div>
    {% else %}
        <p class="muted">{% if q %}Geen handleidingen gevonden voor "{{ q }}".{% else %}Er zijn nog geen handleidingen.{% endif %}</p>
    {% endfor %}
</div>
{% endblock %}