# Thema beheer

## Thema's beheren

1. Ga naar **Thema** in admin menu
2. **Bewerken** — Klik op het potlood-icoon om themabestanden te bewerken (zie [Thema editor](#thema-editor))
3. **Activeren** — Klik op het vinkje om een thema te activeren (wordt opgeslagen in `config.json`)
4. **SCSS compileren** — Klik op het palet-icoon om SCSS geforceerd te compileren naar `assets/css_compiled/theme.css`
5. **Verwijderen** — Prullenbak-icoon (alleen niet-actieve, niet-default thema's)
6. **Nieuw thema** — Eigen thema aanmaken, optioneel gebaseerd op een bestaand thema

## Thema status badges

In het thema-overzicht zie je per thema:
- **Actief** (groen) — dit thema is geselecteerd in `config.json`
- **SCSS ok** (groen) — `assets/css_compiled/theme.css` is nieuwer dan `assets/scss/theme.scss`
- **SCSS verouderd** (geel) — SCSS source is gewijzigd na laatste compile; klik op het palet-icoon om te compileren

## Thema editor

Via **Bewerken** (potlood-icoon) in het thema-overzicht open je de thema-editor (`/admin/theme-edit?theme=<naam>`). Deze werkt hetzelfde als de plugin-editor:

### Bestandsbrowser zijbalk
- Toont de geneste bestandsboom van het thema
- `assets/css_compiled/` wordt verborgen (runtime artefact, read-only)
- Klik op een bestand om het te openen in de CodeMirror editor
- Mappen die het actieve bestand bevatten zijn automatisch uitgeklapt

### Bewerkbare bestandstypen
`.twig`, `.json`, `.scss`, `.css`, `.js`, `.html`, `.md`, `.php`

### Nieuw bestand aanmaken
- Klik op **Nieuw bestand**
- Geef een pad op binnen het thema (bijv. `partials/header.twig` of `assets/scss/_variables.scss`)
- Submappen worden automatisch aangemaakt
- Toegestaan: twig, json, scss, css, js, html, md, php
- Een stub wordt automatisch gegenereerd (bijv. `{% extends 'base.twig' %}` voor `.twig`)

### Bestand uploaden
- Klik op **Upload** om bestanden naar `assets/` van het thema te uploaden
- Toegestaan: afbeeldingen, video, audio, PDF, ZIP, CSS, SCSS, JS, JSON, HTML, MD, TWIG, fonts
- Path-traversal bescherming: doelmap moet binnen `assets/` blijven

### Bestand verplaatsen / verwijderen
- In de bestandsboom heeft elk bestand een verplaats-knop (pijlen-icoon) en een verwijder-knop (prullenbak)
- **Verplaatsen**: kies een doelmap uit de dropdown met alle mappen in het thema
- **Verwijderen**: met bevestiging; `theme.json` kan niet verwijderd worden

### SCSS compileren vanuit de editor
- Bovenaan de editor staat een **SCSS compileren** knop (alleen als `assets/scss/theme.scss` bestaat)
- Toont de compile-status: **up-to-date** (groen) of **verouderd** (geel)
- Forceert compilatie via `ThemeManager::compileCss(true)`

### Media invoegen in editor
- De media-knop in de editor-toolbar opent de media-modal
- In thema-context scant deze `themes/<naam>/assets/` (via `/admin/media-list?theme=<naam>`)
- Snippet-formaat depends op bestandstype: markdown → `![alt](url)`, html/php → `<img src=...>`, andere → ruwe URL

### Beveiliging
- Alle acties vereisen CSRF token
- Path-traversal bescherming via `realpath()` + prefix-check op de thema-map
- `theme.json` kan bewerkt maar niet verwijderd/verplaatst worden
- Default thema kan bewerkt maar niet verwijderd worden
- Actief thema kan niet verwijderd worden (activeer eerst een ander thema)

## Thema structuur

```
themes/default/
├── theme.json              # { title, config.default_template, template: layout→.twig }
├── README.md               # Thema documentatie (per thema)
├── base.twig               # Hoofd layout (head, header, nav, breadcrumb, footer)
├── full_content.twig       # Layout: volledige breedte
├── left_sidebar.twig       # Layout: sidebar links
├── right_sidebar.twig      # Layout: sidebar rechts
├── custom1.twig            # Layout: custom
├── guide.twig              # Layout: handleiding met sidebar (Navigation plugin)
├── partials/               # header.twig, navigation.twig, footer.twig
└── assets/
    ├── scss/theme.scss     # SCSS bron (enige CSS bron — handmatige css/theme.css mag niet bestaan)
    ├── css_compiled/       # Gegenereerd door scssphp (read-only, niet handmatig aanpassen, verborgen in editor)
    ├── css/                # Externe CSS (bootstrap.min.css, bootstrap-icons.css, mobile.css)
    ├── js/                 # app.js, bootstrap.bundle.min.js
    ├── fonts/              # bootstrap-icons.woff, woff2
    └── img/                # favicon, icon, world-map
```

Nieuwe thema's die via de admin worden aangemaakt krijgen automatisch deze uniforme structuur (met `README.md`, `base.twig`, `full_content.twig`, `partials/header.twig`, `partials/footer.twig`, `assets/scss/theme.scss`, en alle assets-submappen).

## theme.json

```json
{
    "title": "default",
    "config": {
        "default_template": "full_content"
    },
    "template": {
        "full_content": "full_content.twig",
        "left_sidebar": "left_sidebar.twig",
        "right_sidebar": "right_sidebar.twig",
        "custom1": "custom1.twig",
        "guide": "guide.twig"
    }
}
```

- `title` — Weergavenaam in admin
- `config.default_template` — Standaard layout voor pagina's zonder `layout:` frontmatter
- `template` — Mapping van layout naam naar `.twig` bestand

## SCSS compilatie

- `ThemeManager` compileert `assets/scss/theme.scss` runtime naar `assets/css_compiled/theme.css` via scssphp
- `css_compiled/` is **read-only** — niet handmatig aanpassen (wordt verborgen in de thema-editor)
- `assets/css/theme.css` mag **niet** bestaan; anders negeert `ThemeManager::getCssUrl()` de SCSS
- Forceer compilatie via de **SCSS compileren** knop in admin (of verwijder `assets/css_compiled/theme.css` en `.mtime`)

## Layouts

Layouts worden gekozen via frontmatter `layout:` key in content bestanden. Onbekende layouts vallen terug op `config.default_template` uit `theme.json`.

## guide.twig

Speciale layout voor handleidingen. Injecteert de Navigation plugin in de sidebar voor zijbalk navigatie. Wordt automatisch gebruikt voor pagina's in de `guide/` map.