Initial commit

templates/handleidingen.html

@@ -0,0 +1,52 @@
+{% 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 %}