{% extends "base.html" %}

{% block title %}{{ h.Titel }}{% endblock %}
{% block page_title %}Handleidingen{% endblock %}

{% block extra_css %}
{% include "_handleiding_stijl.html" %}
<style>
    .hl-layout { display: grid; grid-template-columns: 1fr 230px; gap: 28px; align-items: start; }
    .hl-toc { position: sticky; top: 14px; border-left: 2px solid var(--border); padding-left: 14px; font-size: .9rem; }
    .hl-toc strong { display: block; margin-bottom: 8px; font-size: .78rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: .05em; }
    .hl-toc a { display: block; padding: 4px 0; color: var(--text-muted); text-decoration: none; }
    .hl-toc a:hover { color: var(--primary-color); }
    .hl-toc a.n3 { padding-left: 12px; font-size: .85rem; }
    .hl-meta { color: var(--text-muted); font-size: .85rem; margin: -6px 0 18px; }
    .terug { margin-bottom: 14px; display: inline-block; }
    @media (max-width: 900px) { .hl-layout { grid-template-columns: 1fr; } .hl-toc { display: none; } }
    @media print {
        .app-header, .app-footer, .terug, .hl-toc, .page-head .actions, .flash-container, .alert { display: none !important; }
        .card { box-shadow: none; border: 0; }
        .hl-layout { display: block; }
    }
</style>
{% endblock %}

{% block content %}
<a class="terug" href="{{ url_for('handleidingen.overzicht') }}">← Alle handleidingen</a>

<div class="card">
    {% if versie %}
    <div class="alert alert-warning" style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
        <span>Je bekijkt een <strong>oudere versie</strong> van {{ versie.Opgeslagen_op.strftime('%d-%m-%Y %H:%M') }}{% if versie.Door %} ({{ versie.Door }}){% endif %}.</span>
        <span style="display:flex;gap:8px">
            <form method="POST" action="{{ url_for('handleidingen.terugzetten', slug=h.Slug, vid=versie.Versie_ID) }}" style="margin:0"
                  onsubmit="return confirm('Deze versie terugzetten? De huidige tekst blijft bewaard bij de versies.')">
                <button type="submit" class="btn-sm btn-warning">↩️ Deze versie terugzetten</button>
            </form>
            <a class="btn btn-sm btn-light" href="{{ url_for('handleidingen.bekijk', slug=h.Slug) }}">Huidige versie</a>
        </span>
    </div>
    {% endif %}

    <div class="page-head">
        <h2>{{ versie.Titel if versie else h.Titel }}</h2>
        <div class="actions">
            <button type="button" class="btn-sm btn-light" onclick="window.print()">🖨️ Afdrukken / PDF</button>
            {% if is_admin and not versie %}
            <a class="btn btn-sm btn-warning" href="{{ url_for('handleidingen.bewerken', slug=h.Slug) }}">✏️ Bewerken</a>
            {% endif %}
        </div>
    </div>
    <div class="hl-meta">
        {% if h.Categorie %}{{ h.Categorie }} · {% endif %}
        Bijgewerkt {{ h.Gewijzigd_op.strftime('%d-%m-%Y %H:%M') }}{% if h.Gewijzigd_door %} door {{ h.Gewijzigd_door }}{% endif %}
        {% if h.Zichtbaar == 'admins' %} · <span class="badge badge-warning">🔒 enkel admins</span>{% endif %}
    </div>

    <div class="hl-layout">
        <article class="hl-inhoud">
            {{ inhoud|safe }}
            {% if not inhoud %}<p class="muted">Deze handleiding is nog leeg.</p>{% endif %}
        </article>
        {% if toc|length > 1 %}
        <nav class="hl-toc" aria-label="Inhoud">
            <strong>Inhoud</strong>
            {% for hid, tekst, niveau in toc %}<a class="n{{ niveau }}" href="#{{ hid }}">{{ tekst }}</a>{% endfor %}
        </nav>
        {% endif %}
    </div>
</div>
{% endblock %}