declutter-app.py

#!/usr/bin/env python3
import os
import sys
import shutil
import random
import json
from pathlib import Path
from datetime import datetime, timedelta

# ── Defaults (overridable via .env) ───────────────────────────────────────────

BASE_DIR      = Path("./test-nas")
ARCHIVE_DIR   = "verwerkt"
INBOX_DIR     = "in_behandeling"
RAW_DIR       = "ruwe_data"
TRASH_DIR     = "prullenbak"
DATELESS_DIR  = "datumloos"
PORT          = 8765
IMMICH_URL    = "http://localhost:2283"
IMMICH_API_KEY = ""
DEBUG         = False
PRESORT_DEBUG = False

DATA_DIR          = Path(__file__).parent
TRANSLATIONS_DIR  = Path(__file__).parent / "translations"
RECENTS_FILE      = DATA_DIR / "recents.json"
THUMBCACHE_DIR    = DATA_DIR / ".thumbcache"
DATUMCACHE_FILE   = DATA_DIR / ".datumcache.json"
LOG_FILE          = DATA_DIR / "declutter.log"

# ── Logging ───────────────────────────────────────────────────────────────────

def _log(msg: str):
    """Schrijft naar stdout én logbestand met tijdstempel."""
    ts = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    line = f"{ts}  {msg}"
    print(line)
    try:
        with LOG_FILE.open("a", encoding="utf-8") as f:
            f.write(line + "\n")
    except Exception:
        pass

# ── .env loader ───────────────────────────────────────────────────────────────

def _laad_env_bestand(pad: Path) -> dict:
    """Leest een .env bestand, geeft {key: value}. Negeert # en lege regels."""
    result = {}
    try:
        for regel in pad.read_text(encoding="utf-8").splitlines():
            regel = regel.strip()
            if not regel or regel.startswith("#"):
                continue
            if "=" in regel:
                key, _, val = regel.partition("=")
                key, val = key.strip(), val.strip()
                if key and val:
                    result[key] = val
    except FileNotFoundError:
        pass
    return result

def _toepas_env(cfg: dict):
    global BASE_DIR, ARCHIVE_DIR, INBOX_DIR, RAW_DIR, TRASH_DIR, DATELESS_DIR, PORT
    global IMMICH_URL, IMMICH_API_KEY, DEBUG, PRESORT_DEBUG, DATA_DIR
    global RECENTS_FILE, THUMBCACHE_DIR, DATUMCACHE_FILE, LOG_FILE

    # Deprecated Dutch variable names → English replacements.
    # These will be removed in a future version.
    _deprecated = {
        "ARCHIEF_DIR":    "ARCHIVE_DIR",
        "UITZOEKEN_DIR":  "INBOX_DIR",
        "DUMP_DIR":       "RAW_DIR",
        "PRULLENBAK_DIR": "TRASH_DIR",
        "DATUMLOOS_DIR":  "DATELESS_DIR",
    }
    for old, new in _deprecated.items():
        if old in cfg and new not in cfg:
            print(f"[DEPRECATION] '{old}' is deprecated — please rename it to '{new}' in your .env file.")
            cfg[new] = cfg[old]

    if "DATA_DIR"       in cfg:
        DATA_DIR        = Path(cfg["DATA_DIR"])
        RECENTS_FILE    = DATA_DIR / "recents.json"
        THUMBCACHE_DIR  = DATA_DIR / ".thumbcache"
        DATUMCACHE_FILE = DATA_DIR / ".datumcache.json"
        LOG_FILE        = DATA_DIR / "declutter.log"
    if "BASE_DIR"       in cfg: BASE_DIR       = Path(cfg["BASE_DIR"])
    if "ARCHIVE_DIR"    in cfg: ARCHIVE_DIR    = cfg["ARCHIVE_DIR"]
    if "INBOX_DIR"      in cfg: INBOX_DIR      = cfg["INBOX_DIR"]
    if "RAW_DIR"        in cfg: RAW_DIR        = cfg["RAW_DIR"]
    if "TRASH_DIR"      in cfg: TRASH_DIR      = cfg["TRASH_DIR"]
    if "DATELESS_DIR"   in cfg: DATELESS_DIR   = cfg["DATELESS_DIR"]
    if "PORT"           in cfg:
        try: PORT = int(cfg["PORT"])
        except ValueError: pass
    if "IMMICH_URL"     in cfg: IMMICH_URL     = cfg["IMMICH_URL"]
    if "IMMICH_API_KEY" in cfg: IMMICH_API_KEY = cfg["IMMICH_API_KEY"]
    if "DEBUG"          in cfg: DEBUG          = cfg["DEBUG"].lower() in ("1", "true", "yes")
    if "PRESORT_DEBUG"  in cfg: PRESORT_DEBUG  = cfg["PRESORT_DEBUG"].lower() in ("1", "true", "yes")

# Laad .env bij import (voor normale modus)
_toepas_env(_laad_env_bestand(Path(__file__).parent / ".env"))

# ── Dependency check ──────────────────────────────────────────────────────────

def check_dependencies():
    ok = True
    if sys.version_info < (3, 8):
        print(f"[FOUT] Python 3.8+ vereist (gevonden: {sys.version})")
        ok = False
    try:
        import PIL  # noqa: F401
    except ImportError:
        print("[FOUT] Pillow niet gevonden. Installeer via: pip install Pillow")
        ok = False
    try:
        import pillow_heif  # noqa: F401
    except ImportError:
        print("[WAARSCHUWING] pillow-heif niet gevonden. HEIC-bestanden worden niet ondersteund. Installeer via: pip install pillow-heif")
    try:
        import rawpy  # noqa: F401
    except ImportError:
        print("[WAARSCHUWING] rawpy niet gevonden. ARW/RAW-thumbnails niet beschikbaar. Installeer via: pip install rawpy")
    if not ok:
        sys.exit(1)

# ── Stap 1: Testdata ──────────────────────────────────────────────────────────

def maak_testdata(aantal=40, progress_cb=None):
    import urllib.request
    if BASE_DIR.exists():
        shutil.rmtree(BASE_DIR)

    for m in [BASE_DIR / RAW_DIR, BASE_DIR / INBOX_DIR, BASE_DIR / ARCHIVE_DIR, BASE_DIR / DATELESS_DIR]:
        m.mkdir(parents=True, exist_ok=True)

    dump = BASE_DIR / RAW_DIR
    foto_paden = []
    for n in range(1, aantal + 1):
        pad = dump / f"foto_{n:03d}.jpg"
        url = f"https://picsum.photos/800/600?random={n}"
        _log(f"  Download {n}/{aantal}: {url}")
        if progress_cb:
            progress_cb(n, aantal, f"Foto {n} van {aantal} downloaden…")
        urllib.request.urlretrieve(url, str(pad))
        foto_paden.append(pad)

        ts_start = datetime(2019, 1, 1).timestamp()
        ts_eind  = datetime(2025, 12, 31).timestamp()
        t = random.uniform(ts_start, ts_eind)
        os.utime(pad, (t, t))

    # Duplicaten (±10% van aantal, minimaal 2)
    n_dup = max(2, aantal // 10)
    for i in range(min(n_dup, len(foto_paden))):
        shutil.copy2(foto_paden[i], dump / f"dup_{i+1:03d}.jpg")

    # 3 naamconflicten (als er genoeg fotos zijn)
    if len(foto_paden) > 12:
        for j in range(3):
            shutil.copy2(foto_paden[10], dump / f"IMG_000{j+1}.jpg")

    _log(f"Testdata aangemaakt: {aantal} foto's in {BASE_DIR}/")

# ── Stap 2: Pre-sorteren ──────────────────────────────────────────────────────

def presort(debug=False, progress_cb=None):
    import time
    bronmappen = [BASE_DIR / RAW_DIR]
    uitzoeken = BASE_DIR / INBOX_DIR

    alle_fotos = []
    for bron in bronmappen:
        if bron.exists():
            alle_fotos.extend(zoek_fotos_recursief(bron))
    totaal = len(alle_fotos)

    if totaal == 0:
        _log("Presort: geen foto's gevonden.")
        if progress_cb:
            progress_cb(0, 0, "Geen foto's gevonden.")
        return

    balk_breedte = 20
    verplaatst = 0
    overgeslagen = 0
    start = time.time()

    for i, foto in enumerate(alle_fotos, 1):
        datum = lees_datum(foto, debug=debug)
        doel_map = uitzoeken / datum.strftime("%Y-%m")
        doel_map.mkdir(parents=True, exist_ok=True)
        doel = doel_map / foto.name
        was_conflict = doel.exists()
        teller = 2
        while doel.exists():
            doel = doel_map / f"{foto.stem}_{teller}{foto.suffix}"
            teller += 1
        if was_conflict:
            overgeslagen += 1
        shutil.move(str(foto), doel)
        verplaatst += 1

        label = f"{doel.parent.name}/{doel.name}"
        if progress_cb:
            progress_cb(i, totaal, label)
        else:
            pct = i / totaal
            gevuld = int(pct * balk_breedte)
            balk = "█" * gevuld + "░" * (balk_breedte - gevuld)
            print(f"\r[{balk}] {i}/{totaal} ({pct:.0%}) — {label:<40}", end="", flush=True)

    duur = time.time() - start
    if not progress_cb:
        print(f"\n\n✓ {verplaatst} foto('s) verplaatst naar {uitzoeken}/")
        print(f"  Naamconflicten hernoemd : {overgeslagen}")
        print(f"  Tijd                    : {duur:.1f}s")
    _log(f"[Presort] {verplaatst} verplaatst, {overgeslagen} hernoemd ({duur:.1f}s)")

# ── Systeemchecks ─────────────────────────────────────────────────────────────

def run_health_checks():
    """Voert systeemchecks uit. Geeft lijst van dicts terug met label_key, detail_key, status, value."""
    import urllib.request as _ur
    checks = []

    def _dir_check(id_, label_key, path, need_write=False, optional=False):
        p = Path(path) if not isinstance(path, Path) else path
        if not p.exists():
            return {"id": id_, "label_key": label_key, "value": str(p),
                    "status": "warn" if optional else "error",
                    "detail_key": "health_det_not_found"}
        if not os.access(p, os.R_OK):
            return {"id": id_, "label_key": label_key, "value": str(p),
                    "status": "warn" if optional else "error",
                    "detail_key": "health_det_no_read"}
        if need_write and not os.access(p, os.W_OK):
            return {"id": id_, "label_key": label_key, "value": str(p),
                    "status": "warn" if optional else "error",
                    "detail_key": "health_det_no_write"}
        return {"id": id_, "label_key": label_key, "value": str(p),
                "status": "ok", "detail_key": "health_det_ok"}

    checks.append(_dir_check("base_dir",    "health_check_base_dir",  BASE_DIR))
    checks.append(_dir_check("dump",        "health_check_dump",      BASE_DIR / RAW_DIR,      optional=True))
    checks.append(_dir_check("uitzoeken",   "health_check_uitzoeken", BASE_DIR / INBOX_DIR, need_write=True))
    checks.append(_dir_check("archief",     "health_check_archief",   BASE_DIR / ARCHIVE_DIR,   need_write=True))
    checks.append(_dir_check("datumloos",  "health_check_datumloos", BASE_DIR / DATELESS_DIR,  need_write=True))
    checks.append(_dir_check("prullenbak",  "health_check_prullenbak",BASE_DIR / TRASH_DIR,need_write=True))
    checks.append(_dir_check("data_dir",    "health_check_data_dir",  DATA_DIR,                 need_write=True))

    try:
        import PIL
        checks.append({"id": "pillow", "label_key": "health_check_pillow",
                        "value": f"v{PIL.__version__}", "status": "ok", "detail_key": "health_det_ok"})
    except ImportError:
        checks.append({"id": "pillow", "label_key": "health_check_pillow",
                        "value": "", "status": "error", "detail_key": "health_det_not_installed"})

    try:
        import pillow_heif  # noqa: F401
        checks.append({"id": "heic", "label_key": "health_check_heic",
                        "value": "", "status": "ok", "detail_key": "health_det_ok"})
    except ImportError:
        checks.append({"id": "heic", "label_key": "health_check_heic",
                        "value": "", "status": "warn", "detail_key": "health_det_optional"})

    try:
        import rawpy  # noqa: F401
        checks.append({"id": "raw", "label_key": "health_check_raw",
                        "value": "", "status": "ok", "detail_key": "health_det_ok"})
    except ImportError:
        checks.append({"id": "raw", "label_key": "health_check_raw",
                        "value": "", "status": "warn", "detail_key": "health_det_optional"})

    if IMMICH_URL:
        try:
            headers = {}
            if IMMICH_API_KEY:
                headers["x-api-key"] = IMMICH_API_KEY
            req = _ur.Request(f"{IMMICH_URL}/api/server-info", headers=headers)
            _ur.urlopen(req, timeout=3)
            checks.append({"id": "immich", "label_key": "health_check_immich",
                            "value": IMMICH_URL, "status": "ok", "detail_key": "health_det_reachable"})
        except Exception:
            checks.append({"id": "immich", "label_key": "health_check_immich",
                            "value": IMMICH_URL, "status": "warn", "detail_key": "health_det_unreachable"})
    else:
        checks.append({"id": "immich", "label_key": "health_check_immich",
                        "value": "", "status": "info", "detail_key": "health_det_not_configured"})

    return checks

# ── Bestandstypen ─────────────────────────────────────────────────────────────

FOTO_EXTS = {'.jpg', '.jpeg', '.png', '.gif', '.webp', '.heic', '.heif', '.arw'}

def zoek_fotos(map_pad: Path):
    """Alle ondersteunde fotobestanden in map_pad (case-insensitive), gesorteerd op mtime."""
    bestanden = [
        f for f in map_pad.iterdir()
        if f.is_file() and f.suffix.lower() in FOTO_EXTS
    ]
    return sorted(bestanden, key=lambda f: f.stat().st_mtime)

def zoek_fotos_recursief(map_pad: Path):
    """Alle ondersteunde fotobestanden recursief onder map_pad."""
    return [
        f for f in map_pad.rglob("*")
        if f.is_file() and f.suffix.lower() in FOTO_EXTS
    ]

# ── Datum lezen + cache ────────────────────────────────────────────────────────

_datumcache: dict = {}

def _laad_datumcache():
    global _datumcache
    try:
        _datumcache = json.loads(DATUMCACHE_FILE.read_text())
    except Exception:
        _datumcache = {}

def _sla_datumcache_op():
    try:
        DATUMCACHE_FILE.write_text(json.dumps(_datumcache))
    except Exception:
        pass

_laad_datumcache()

def lees_datum(pad: Path, debug=False) -> datetime:
    """Leest datum uit cache, dan EXIF, dan bestandsnaam, dan mtime."""
    stat = pad.stat()
    cache_key = f"{pad}|{int(stat.st_mtime)}|{stat.st_size}"
    if cache_key in _datumcache:
        try:
            datum = datetime.strptime(_datumcache[cache_key][0], "%Y-%m-%d %H:%M:%S")
            if debug:
                print(f"  [cache]     {pad.name} → {datum:%Y-%m-%d} ({_datumcache[cache_key][1]})")
            return datum
        except Exception:
            pass
    datum, bron = _lees_datum_intern(pad)
    _datumcache[cache_key] = [datum.strftime("%Y-%m-%d %H:%M:%S"), bron]
    _sla_datumcache_op()
    if debug:
        print(f"  [{bron:<12}] {pad.name} → {datum:%Y-%m-%d}")
    return datum

def _lees_datum_intern(pad: Path):
    """Geeft (datetime, bron_label). Volgorde: EXIF → bestandsnaam → mtime."""
    import re
    # 1-3: EXIF
    try:
        from PIL import Image
        img = Image.open(pad)
        exif = img.getexif()
        labels = {36867: "EXIF-origineel", 36868: "EXIF-digitized", 306: "EXIF-datetime"}
        for tag, label in labels.items():
            raw = exif.get(tag)
            if raw:
                try:
                    return datetime.strptime(raw.strip(), "%Y:%m:%d %H:%M:%S"), label
                except ValueError:
                    continue
    except Exception:
        pass

    # 4: Datum uit bestandsnaam
    naam = pad.stem
    patronen = [
        (r"IMG_(\d{4})(\d{2})(\d{2})_(\d{2})(\d{2})(\d{2})", "naam-android"),
        (r"IMG-(\d{4})(\d{2})(\d{2})-WA",                     "naam-whatsapp"),
        (r"(\d{4})(\d{2})(\d{2})_(\d{2})(\d{2})(\d{2})",      "naam-datetime"),
        (r"(\d{4})-(\d{2})-(\d{2}) (\d{2})\.(\d{2})\.(\d{2})","naam-dots"),
        (r"(\d{4})-(\d{2})-(\d{2})",                           "naam-datum"),
        (r"(\d{4})_(\d{2})_(\d{2})",                           "naam-underscore"),
    ]
    for patroon, label in patronen:
        m = re.search(patroon, naam)
        if m:
            g = m.groups()
            try:
                if len(g) >= 6:
                    return datetime(int(g[0]), int(g[1]), int(g[2]),
                                    int(g[3]), int(g[4]), int(g[5])), label
                else:
                    return datetime(int(g[0]), int(g[1]), int(g[2])), label
            except ValueError:
                continue

    # 5: mtime
    return datetime.fromtimestamp(pad.stat().st_mtime), "mtime"

# ── Recents ───────────────────────────────────────────────────────────────────

def laad_recents():
    try:
        return json.loads(RECENTS_FILE.read_text())
    except Exception:
        return []

def sla_recent_op(album):
    recents = laad_recents()
    if album in recents:
        recents.remove(album)
    recents.insert(0, album)
    recents = recents[:10]
    RECENTS_FILE.write_text(json.dumps(recents))
    return recents

# ── Stap 3–5: Webapp ──────────────────────────────────────────────────────────

def start_server():
    import base64
    import json as _json
    import socket
    import threading
    from http.server import BaseHTTPRequestHandler, HTTPServer, ThreadingHTTPServer
    from urllib.parse import parse_qs, urlparse

    uitzoeken = BASE_DIR / INBOX_DIR
    archief   = BASE_DIR / ARCHIVE_DIR

    try:
        from PIL import Image
        import io as _io
        HAS_PILLOW = True
    except ImportError:
        HAS_PILLOW = False

    import warnings as _warnings
    try:
        with _warnings.catch_warnings():
            _warnings.simplefilter("ignore")
            import rawpy as _rawpy
        HAS_RAWPY = True
    except ImportError:
        HAS_RAWPY = False

    thumbcache = THUMBCACHE_DIR
    thumbcache.mkdir(parents=True, exist_ok=True)

    _geo_cache: dict = {}

    def _lees_gps(pad: Path):
        if not HAS_PILLOW:
            return None
        try:
            from PIL.ExifTags import TAGS, GPSTAGS
            img = Image.open(pad)
            try:
                exif_raw = img._getexif() or {}
            except Exception:
                exif_raw = {}
            gps_raw = None
            for tag_id, val in exif_raw.items():
                if TAGS.get(tag_id) == 'GPSInfo':
                    gps_raw = val
                    break
            if not gps_raw:
                return None
            gps = {GPSTAGS.get(k, k): v for k, v in gps_raw.items()}
            def _to_dec(coords, ref):
                d, m, s = [float(x) for x in coords]
                dd = d + m / 60 + s / 3600
                if ref in ('S', 'W'):
                    dd = -dd
                return round(dd, 6)
            lat = _to_dec(gps['GPSLatitude'], gps.get('GPSLatitudeRef', 'N'))
            lng = _to_dec(gps['GPSLongitude'], gps.get('GPSLongitudeRef', 'E'))
            return {'lat': lat, 'lng': lng}
        except Exception:
            return None

    def _reverse_geocode(lat: float, lng: float):
        key = f"{lat:.3f},{lng:.3f}"
        if key in _geo_cache:
            return _geo_cache[key]
        try:
            import urllib.request as _ur, json as _j
            url = f"https://nominatim.openstreetmap.org/reverse?lat={lat}&lon={lng}&format=json&accept-language=nl"
            req = _ur.Request(url, headers={'User-Agent': 'Declutter/1.0'})
            data = _j.loads(_ur.urlopen(req, timeout=4).read())
            addr = data.get('address', {})
            city = (addr.get('city') or addr.get('town') or
                    addr.get('village') or addr.get('municipality') or '')
            country = addr.get('country', '')
            result = ', '.join(x for x in [city, country] if x) or None
            _geo_cache[key] = result
            return result
        except Exception:
            return None

    import queue as _queue
    _sse_queues = []
    _sse_lock = threading.Lock()

    def _push_sse(msg):
        with _sse_lock:
            dood = []
            for q in _sse_queues:
                try: q.put_nowait(msg)
                except Exception: dood.append(q)
            for q in dood:
                try: _sse_queues.remove(q)
                except ValueError: pass

    def _auto_presort(pad):
        datum = lees_datum(pad)
        doel_map = (BASE_DIR / INBOX_DIR) / datum.strftime("%Y-%m")
        doel_map.mkdir(parents=True, exist_ok=True)
        doel = doel_map / pad.name
        teller = 2
        while doel.exists():
            doel = doel_map / f"{pad.stem}_{teller}{pad.suffix}"
            teller += 1
        shutil.move(str(pad), doel)
        _log(f"[Watcher] {pad.name} \u2192 {doel.parent.name}/")
        return doel

    _watcher_pauze = [False]  # mutable flag: True = watcher slaat scan over

    def _watcher():
        import time, re as _re
        bronmappen = [BASE_DIR / RAW_DIR]
        uits = BASE_DIR / INBOX_DIR
        datumloos_pad = BASE_DIR / DATELESS_DIR

        def scan():
            gevonden = set()
            for bron in bronmappen:
                if bron.exists():
                    for f in bron.rglob("*"):
                        if f.is_file() and f.suffix.lower() in FOTO_EXTS:
                            gevonden.add(str(f))
            if uits.exists():
                for sub in uits.iterdir():
                    if not sub.is_dir(): continue
                    if _re.match(r'^\d{4}-\d{2}$', sub.name):
                        for f in sub.iterdir():
                            if f.is_file() and f.suffix.lower() in FOTO_EXTS:
                                gevonden.add(str(f))
                    else:
                        for f in sub.rglob("*"):
                            if f.is_file() and f.suffix.lower() in FOTO_EXTS:
                                gevonden.add(str(f))
            return gevonden

        bekende = scan()
        while True:
            time.sleep(5)
            if _watcher_pauze[0]:
                bekende = set()  # reset bekende zodat na pauze alles als nieuw geldt
                continue
            try:
                huidige = scan()
                nieuw = huidige - bekende
                if nieuw:
                    verplaatste = []
                    for pad_str in sorted(nieuw):
                        pad = Path(pad_str)
                        # Datumloos-map nooit pre-sorten
                        in_datumloos = datumloos_pad.exists() and pad.is_relative_to(datumloos_pad)
                        moet_presorten = not in_datumloos and any(
                            pad.is_relative_to(b) for b in bronmappen if b.exists()
                        )
                        if not moet_presorten and not in_datumloos and uits.exists():
                            try:
                                if pad.is_relative_to(uits):
                                    rel = pad.relative_to(uits)
                                    top = rel.parts[0] if rel.parts else ''
                                    if not _re.match(r'^\d{4}-\d{2}$', top):
                                        moet_presorten = True
                            except Exception:
                                pass
                        if moet_presorten:
                            try:
                                doel = _auto_presort(pad)
                                try:
                                    verplaatste.append({
                                        "naam": pad.name,
                                        "van": str(pad.relative_to(BASE_DIR)),
                                        "naar": str(doel.relative_to(BASE_DIR)),
                                    })
                                except Exception:
                                    pass
                            except Exception as e:
                                _log(f"[Watcher] Presort fout {pad.name}: {e}")
                        else:
                            try:
                                verplaatste.append({
                                    "naam": pad.name,
                                    "van": None,
                                    "naar": str(pad.relative_to(BASE_DIR)),
                                })
                            except Exception:
                                pass
                    bekende = scan()
                    _push_sse(_json.dumps({"type": "update", "bestanden": verplaatste, "jm": jaren_maanden()}))
                else:
                    bekende = huidige
            except Exception as e:
                _log(f"[Watcher] Scanfout: {e}")

    threading.Thread(target=_watcher, daemon=True).start()

    def get_thumbnail(pad: Path) -> bytes:
        stat = pad.stat()
        cache_key = f"{pad.name}_{int(stat.st_mtime)}_{stat.st_size}.jpg"
        cache_pad = thumbcache / cache_key
        if cache_pad.exists():
            return cache_pad.read_bytes()

        ext = pad.suffix.lower()

        # ARW (Sony RAW): probeer ingebedde JPEG-preview te extraheren
        if ext == '.arw':
            img = None
            if HAS_RAWPY:
                try:
                    import io as _io
                    with _rawpy.imread(str(pad)) as raw:
                        thumb = raw.extract_thumb()
                    if thumb.format.name == 'JPEG':
                        img = Image.open(_io.BytesIO(thumb.data))
                    elif thumb.format.name == 'BITMAP':
                        img = Image.fromarray(thumb.data)
                except Exception:
                    pass
            if img is None:
                data = _maak_placeholder(pad.name)
                cache_pad.write_bytes(data)
                return data
            # Gevallen door naar Pillow resize hieronder

        # HEIC/HEIF: probeer via pillow-heif of pyheif
        elif ext in ('.heic', '.heif'):
            img = None
            try:
                import pillow_heif
                pillow_heif.register_heif_opener()
                img = Image.open(pad)
            except ImportError:
                pass
            if img is None:
                try:
                    import pyheif
                    import io as _io
                    heif = pyheif.read(pad)
                    img = Image.frombytes(heif.mode, heif.size, heif.data)
                except ImportError:
                    pass
            if img is None:
                data = _maak_placeholder(pad.name)
                cache_pad.write_bytes(data)
                return data
            # Gevallen door naar Pillow resize hieronder
        else:
            img = None  # gewone formaten: Pillow opent ze zelf hieronder

        if HAS_PILLOW:
            try:
                import io as _io
                if img is None:
                    img = Image.open(pad)
                from PIL import ImageOps
                img = ImageOps.exif_transpose(img)
                img = img.convert("RGB")
                img.thumbnail((400, 400))
                buf = _io.BytesIO()
                img.save(buf, format="JPEG", quality=70)
                data = buf.getvalue()
                cache_pad.write_bytes(data)
                return data
            except Exception:
                pass

        # Fallback: ruwe bytes (alleen zinvol voor echte JPEG)
        data = pad.read_bytes()
        cache_pad.write_bytes(data)
        return data

    def _maak_placeholder(naam: str) -> bytes:
        """Grijs placeholder JPEG met bestandsextensie als label."""
        import io as _io
        ext = Path(naam).suffix.upper().lstrip('.')
        if HAS_PILLOW:
            try:
                from PIL import ImageDraw, ImageFont
                img = Image.new("RGB", (200, 200), color=(60, 60, 60))
                draw = ImageDraw.Draw(img)
                draw.text((100, 90), ext, fill=(180, 180, 180), anchor="mm")
                draw.text((100, 115), naam[:20], fill=(120, 120, 120), anchor="mm")
                buf = _io.BytesIO()
                img.save(buf, format="JPEG", quality=70)
                return buf.getvalue()
            except Exception:
                pass
        # Ultra-minimaal grijs JPEG (1x1 pixel, grijs)
        return bytes([
            0xFF,0xD8,0xFF,0xE0,0x00,0x10,0x4A,0x46,0x49,0x46,0x00,0x01,
            0x01,0x00,0x00,0x01,0x00,0x01,0x00,0x00,0xFF,0xDB,0x00,0x43,
            0x00,0x08,0x06,0x06,0x07,0x06,0x05,0x08,0x07,0x07,0x07,0x09,
            0x09,0x08,0x0A,0x0C,0x14,0x0D,0x0C,0x0B,0x0B,0x0C,0x19,0x12,
            0x13,0x0F,0x14,0x1D,0x1A,0x1F,0x1E,0x1D,0x1A,0x1C,0x1C,0x20,
            0x24,0x2E,0x27,0x20,0x22,0x2C,0x23,0x1C,0x1C,0x28,0x37,0x29,
            0x2C,0x30,0x31,0x34,0x34,0x34,0x1F,0x27,0x39,0x3D,0x38,0x32,
            0x3C,0x2E,0x33,0x34,0x32,0xFF,0xC0,0x00,0x0B,0x08,0x00,0x01,
            0x00,0x01,0x01,0x01,0x11,0x00,0xFF,0xC4,0x00,0x1F,0x00,0x00,
            0x01,0x05,0x01,0x01,0x01,0x01,0x01,0x01,0x00,0x00,0x00,0x00,
            0x00,0x00,0x00,0x00,0x01,0x02,0x03,0x04,0x05,0x06,0x07,0x08,
            0x09,0x0A,0x0B,0xFF,0xC4,0x00,0xB5,0x10,0x00,0x02,0x01,0x03,
            0x03,0x02,0x04,0x03,0x05,0x05,0x04,0x04,0x00,0x00,0x01,0x7D,
            0x01,0x02,0x03,0x00,0x04,0x11,0x05,0x12,0x21,0x31,0x41,0x06,
            0x13,0x51,0x61,0x07,0x22,0x71,0x14,0x32,0x81,0x91,0xA1,0x08,
            0x23,0x42,0xB1,0xC1,0x15,0x52,0xD1,0xF0,0x24,0x33,0x62,0x72,
            0x82,0x09,0x0A,0x16,0x17,0x18,0x19,0x1A,0x25,0x26,0x27,0x28,
            0x29,0x2A,0x34,0x35,0x36,0x37,0x38,0x39,0x3A,0x43,0x44,0x45,
            0x46,0x47,0x48,0x49,0x4A,0x53,0x54,0x55,0x56,0x57,0x58,0x59,
            0x5A,0x63,0x64,0x65,0x66,0x67,0x68,0x69,0x6A,0x73,0x74,0x75,
            0x76,0x77,0x78,0x79,0x7A,0x83,0x84,0x85,0x86,0x87,0x88,0x89,
            0x8A,0x92,0x93,0x94,0x95,0x96,0x97,0x98,0x99,0x9A,0xA2,0xA3,
            0xA4,0xA5,0xA6,0xA7,0xA8,0xA9,0xAA,0xB2,0xB3,0xB4,0xB5,0xB6,
            0xB7,0xB8,0xB9,0xBA,0xC2,0xC3,0xC4,0xC5,0xC6,0xC7,0xC8,0xC9,
            0xCA,0xD2,0xD3,0xD4,0xD5,0xD6,0xD7,0xD8,0xD9,0xDA,0xE1,0xE2,
            0xE3,0xE4,0xE5,0xE6,0xE7,0xE8,0xE9,0xEA,0xF1,0xF2,0xF3,0xF4,
            0xF5,0xF6,0xF7,0xF8,0xF9,0xFA,0xFF,0xDA,0x00,0x08,0x01,0x01,
            0x00,0x00,0x3F,0x00,0xFB,0xD3,0xFF,0xD9
        ])

    def jaren_maanden():
        """Geeft dict {jaar: [{naam, aantal}, ...]} van aanwezige submappen."""
        result = {}
        if not uitzoeken.exists():
            return result
        for submap in sorted(uitzoeken.iterdir()):
            if not submap.is_dir():
                continue
            try:
                jaar, _ = submap.name.split("-")
                n = sum(1 for f in submap.iterdir()
                        if f.is_file() and f.suffix.lower() in FOTO_EXTS)
                result.setdefault(jaar, []).append({"naam": submap.name, "aantal": n})
            except ValueError:
                pass
        return result

    # Systeem-/NAS-bestanden die een "lege" map toch niet-leeg maken
    _SYS_NAMEN = {'desktop.ini', 'thumbs.db', '.ds_store', '@eadir', '#recycle'}

    def _heeft_echte_inhoud(pad):
        """True als pad echte bestanden/mappen bevat (geen NAS/OS-systeembestanden)."""
        for f in pad.iterdir():
            if f.name.startswith('.') or f.name.startswith('@'):
                continue
            if f.name.lower() in _SYS_NAMEN:
                continue
            return True
        return False

    def verwijder_lege_mappen():
        """Verwijdert lege YYYY-MM submappen uit in_behandeling."""
        import re
        if uitzoeken.exists():
            for sub in list(uitzoeken.iterdir()):
                if sub.is_dir() and re.match(r'^\d{4}-\d{2}$', sub.name):
                    if not _heeft_echte_inhoud(sub):
                        try:
                            shutil.rmtree(sub)
                            _log(f"[Opruimen] Lege map verwijderd: {sub.name}")
                        except OSError:
                            pass

    def fotos_in_map(maand_key):
        """Geeft lijst van foto-paden gesorteerd op mtime."""
        pad = uitzoeken / maand_key
        if not pad.exists():
            return []
        return zoek_fotos(pad)

    def burst_groepen(fotos):
        """Groepeert foto's. Geeft lijst van dicts met 'fotos' en 'type'.
        type: 'tight' (≤30s), 'moment' (31-300s), 'los' (>300s of enkelvoudig)."""
        if not fotos:
            return []
        # Groepeer op 300s venster
        ruw = []
        huidige = [fotos[0]]
        for foto in fotos[1:]:
            dt = abs(foto.stat().st_mtime - huidige[-1].stat().st_mtime)
            if dt <= 300:
                huidige.append(foto)
            else:
                ruw.append(huidige)
                huidige = [foto]
        ruw.append(huidige)
        # Bepaal type per groep
        result = []
        for groep in ruw:
            if len(groep) < 2:
                type_ = "los"
                span_sec = 0
            else:
                mtimes = [f.stat().st_mtime for f in groep]
                max_gap = max(abs(mtimes[i+1] - mtimes[i]) for i in range(len(mtimes)-1))
                type_ = "tight" if max_gap <= 30 else "moment"
                span_sec = int(max(mtimes) - min(mtimes))
            result.append({"fotos": groep, "type": type_, "span_sec": span_sec})
        return result

    def uniek_doel(doel_map: Path, naam: str) -> Path:
        doel = doel_map / naam
        teller = 2
        stem = Path(naam).stem
        suffix = Path(naam).suffix
        while doel.exists():
            doel = doel_map / f"{stem}_{teller}{suffix}"
            teller += 1
        return doel

    _immich_timer    = None
    _immich_lib_id   = None   # gecached library ID

    def _immich_haal_lib_id():
        """Haalt het eerste library ID op via GET /api/libraries. Cachet in geheugen."""
        nonlocal _immich_lib_id
        if _immich_lib_id:
            return _immich_lib_id
        try:
            import urllib.request, json as _j
            req = urllib.request.Request(
                f"{IMMICH_URL.rstrip('/')}/api/libraries",
                headers={"x-api-key": IMMICH_API_KEY} if IMMICH_API_KEY else {},
            )
            with urllib.request.urlopen(req, timeout=5) as resp:
                libs = _j.loads(resp.read())
            if libs:
                _immich_lib_id = libs[0]["id"]
                return _immich_lib_id
        except Exception as e:
            _log(f"[Immich] Library ID ophalen mislukt: {e}")
        return None

    def _doe_rescan():
        lib_id = _immich_haal_lib_id()
        if not lib_id:
            _log("[Immich] Geen library ID — rescan overgeslagen.")
            return
        try:
            import urllib.request
            req = urllib.request.Request(
                f"{IMMICH_URL.rstrip('/')}/api/libraries/{lib_id}/scan",
                data=b"{}",
                method="POST",
                headers={
                    "Content-Type": "application/json",
                    **({"x-api-key": IMMICH_API_KEY} if IMMICH_API_KEY else {}),
                },
            )
            urllib.request.urlopen(req, timeout=10)
            _log("[Immich] Rescan getriggerd.")
        except Exception as e:
            _log(f"[Immich] Rescan mislukt: {e}")

    def immich_rescan():
        nonlocal _immich_timer
        if not IMMICH_URL:
            return
        if _immich_timer is not None:
            _immich_timer.cancel()
        _log("[Immich] Rescan gepland over 3600s...")
        _immich_timer = threading.Timer(3600, _doe_rescan)
        _immich_timer.daemon = True
        _immich_timer.start()

    def render_hoofdpagina():

        return f"""<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Declutter</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%231a1a1a'/%3E%3Crect x='3' y='10' width='26' height='17' rx='3' fill='%232a6a9a'/%3E%3Cpath d='M11 10 L13 6 H19 L21 10Z' fill='%232a6a9a'/%3E%3Ccircle cx='16' cy='18.5' r='5' fill='%230d0d0d'/%3E%3Ccircle cx='16' cy='18.5' r='3.5' fill='%234a9abf'/%3E%3Ccircle cx='16' cy='18.5' r='1.5' fill='%23c8eef8'/%3E%3Ccircle cx='24.5' cy='13.5' r='1.5' fill='%23ffc107'/%3E%3C/svg%3E">
<style>
  :root{{--foto-breedte:220px;--left-w:240px;--right-w:210px}}
  *{{box-sizing:border-box}}
  body{{font-family:sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';margin:0;background:#1a1a1a;color:#eee;overflow-x:hidden}}
  /* ── Toolbar ── */
  .toolbar{{position:sticky;top:0;background:#111;padding:.5rem .8rem;display:flex;align-items:center;z-index:20;border-bottom:1px solid #333}}
  .toolbar h1{{margin:0;font-size:1rem;white-space:nowrap;color:#f90;letter-spacing:.04em}}
  input[type=text]{{width:100%;padding:.35rem .6rem;background:#222;border:1px solid #444;color:#eee;border-radius:4px;font-size:.85rem}}
  .album-staat{{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;display:none}}
  .album-staat.groen{{background:#4c4;display:block}}
  .album-staat.oranje{{background:#f80;display:block}}
  .album-staat.rood{{background:#c44;display:block}}
  button{{padding:.35rem .7rem;border:none;border-radius:4px;cursor:pointer;font-size:.82rem}}
  .btn-reset{{background:#c33;color:#fff}}
  .btn-alles{{background:#383838;color:#ccc}}
  .btn-presort{{background:#1e4a1e;color:#8f8;border:1px solid #2d6a2d}}
  .btn-opruim{{background:#1a2a3a;color:#7af;border:1px solid #2a4a6a}}
  .btn-cache{{background:#3a2a00;color:#f80;border:1px solid #5a4000}}
  .btn-later{{background:#1e1e3a;color:#aaf;border:1px solid #336}}
  .btn-verwijder{{background:#5a1010;color:#faa;border:1px solid #8a2020}}
  .btn-verwijder:disabled{{background:#2a1a1a;color:#664;border-color:#3a1a1a;cursor:default}}
  /* Prullenbak: geen acties beschikbaar */
  .prullenbak-modus .foto-del{{display:none!important}}
  .prullenbak-modus .foto-zoom{{display:none!important}}
  .prullenbak-modus .foto{{cursor:default}}
  /* Prullenbak tree: geen hover-acties */
  .boom-rij.pb-readonly{{cursor:default}}
  .boom-rij.pb-readonly .boom-rij-acties{{display:none!important}}
  #status{{font-size:.72rem;color:#8f8;padding:.25rem .7rem;background:#111;border-top:1px solid #1e1e1e;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
  /* ── 3-koloms layout ── */
  html,body{{height:100%;overflow:hidden}}
  body{{display:flex;flex-direction:column}}
  #progress-wrap{{height:4px;flex-shrink:0;overflow:hidden}}
  #progress{{height:4px;background:#4a8abf;transition:width .1s;width:0%}}
  @keyframes laden-sweep{{0%{{transform:translateX(-100%)}}100%{{transform:translateX(400%)}}}}
  #progress-wrap.laden #progress{{width:25%;animation:laden-sweep 1.1s ease-in-out infinite;transition:none}}
  .fotos-laden{{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;gap:.8rem;color:#555}}
  .fotos-laden-spinner{{width:28px;height:28px;border:3px solid #333;border-top-color:#4a8abf;border-radius:50%;animation:laden-sweep-spin .8s linear infinite}}
  @keyframes laden-sweep-spin{{to{{transform:rotate(360deg)}}}}
  #main-wrap{{flex:1;display:flex;min-height:0;overflow:hidden;flex-direction:column}}
  #cols-wrap{{flex:1;display:flex;min-height:0;overflow:hidden}}
  /* ── Linkerpaneel (treeview) ── */
  #left-panel{{width:var(--left-w);flex-shrink:0;background:#141414;overflow-y:auto;display:flex;flex-direction:column}}
  #left-resizer{{width:5px;flex-shrink:0;cursor:col-resize;background:#2a2a2a;transition:background .1s;z-index:10}}
  #left-resizer:hover,#left-resizer.dragging{{background:#4a8abf}}
  .ts-hdr{{display:flex;align-items:center;gap:.3rem;padding:.35rem .6rem;font-size:.75rem;font-weight:bold;color:#888;cursor:pointer;user-select:none;border-bottom:1px solid #222;background:#111}}
  .ts-hdr:hover{{color:#bbb}}
  .ts-pijl{{font-size:.55rem;transition:transform .15s;display:inline-block;width:10px;text-align:center}}
  .ts-hdr.open .ts-pijl{{transform:rotate(90deg)}}
  .ts-body{{display:none;padding:.2rem 0}}
  .ts-body.open{{display:block}}
  /* Tree nodes */
  .boom-rij{{display:flex;align-items:center;gap:.25rem;padding:2px 0 2px 8px;cursor:pointer;border-radius:3px;margin:0 3px}}
  .boom-rij:hover{{background:#1e1e1e}}
  .boom-pijl{{width:12px;font-size:.5rem;color:#555;flex-shrink:0;text-align:center;user-select:none}}
  .boom-naam{{font-size:.75rem;color:#9bc;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
  .boom-count{{color:#555;font-size:.68rem;font-weight:normal}}
  .boom-naam:hover{{color:#ddf}}
  .boom-naam.actief{{color:#f90;font-weight:bold}}
  .boom-sub{{display:none}}
  .maand-rij{{display:flex;align-items:center;gap:.25rem;padding:2px 0 2px 20px;cursor:pointer;border-radius:3px;margin:0 3px}}
  .maand-rij:hover{{background:#1e1e1e}}
  .maand-rij span{{font-size:.73rem;color:#9bc}}
  .maand-rij.actief span{{color:#f90;font-weight:bold}}
  .jaar-rij{{display:flex;align-items:center;gap:.25rem;padding:.25rem .6rem;cursor:pointer;user-select:none}}
  .jaar-rij:hover .jaar-label{{color:#eee}}
  .jaar-label{{font-size:.72rem;font-weight:bold;color:#666}}
  .jaar-pijl{{font-size:.5rem;color:#444;width:10px;text-align:center}}
  .jaar-sub{{display:none;padding:.1rem 0}}
  /* Activiteitlog in linkerpaneel */
  #ts-activiteit .act-rij{{font-size:.68rem;padding:.2rem .6rem;border-bottom:1px solid #1e1e1e;line-height:1.4}}
  #ts-activiteit .act-rij .act-ts{{color:#444}}
  #ts-activiteit .act-rij .act-naam{{color:#ccc;font-weight:bold}}
  #ts-activiteit .act-rij .act-naar{{color:#4a8a4a}}
  /* ── Middenpaneel (foto's) ── */
  #fotos-wrap{{flex:1;min-width:0;overflow:hidden;display:flex;flex-direction:column}}
  #thumb-toolbar{{display:flex;align-items:center;gap:.5rem;padding:.35rem .7rem;background:#111;border-bottom:1px solid #222;font-size:.72rem;color:#666;flex-shrink:0;position:sticky;top:0;z-index:5}}
  #thumb-toolbar input[type=range]{{width:90px;accent-color:#4a8abf;cursor:pointer}}
  #fotos{{flex:1;padding:.75rem;min-width:0;overflow-y:auto}}
  /* ── Rechterpaneel (selectie) ── */
  #sidebar{{width:var(--right-w);flex-shrink:0;background:#111;border-left:1px solid #2a2a2a;overflow-y:auto;padding:.6rem}}
  #sidebar h3{{margin:0 0 .4rem;font-size:.78rem;color:#888;text-transform:uppercase;letter-spacing:.05em}}
  .sb-item{{display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem;background:#1a1a1a;border-radius:4px;padding:3px 4px}}
  .sb-thumb{{width:34px;height:34px;object-fit:cover;border-radius:3px;flex-shrink:0}}
  .sb-naam{{font-size:.62rem;color:#bbb;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
  .sb-x{{background:none;border:none;color:#c66;cursor:pointer;font-size:.85rem;padding:0 2px;flex-shrink:0}}
  .sb-leeg{{font-size:.72rem;color:#444}}
  /* ── Foto-grid ── */
  .grid{{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--foto-breedte),1fr));gap:8px}}
  .dag-header{{font-size:.88rem;font-weight:bold;color:#bbb;padding:.5rem 0 .25rem;border-bottom:1px solid #2a2a2a;margin-bottom:.1rem;grid-column:1/-1}}
  .bladwijzer{{display:flex;align-items:center;gap:.5rem;margin:.5rem 0;color:#c44;font-size:.72rem;font-style:italic}}
  .bladwijzer::before{{content:'';flex:0 0 10px;height:10px;background:#c44;border-radius:50%}}
  .bladwijzer::after{{content:'';flex:1;height:1px;background:#c44}}
  .burst{{border-radius:6px;padding:5px;margin-bottom:6px}}
  .burst.tight{{background:#2d2010}}
  .burst.moment{{background:#1a1a2d}}
  .burst-label{{font-size:.67rem;margin-bottom:3px;cursor:pointer;display:inline-block;padding:2px 5px;border-radius:4px}}
  .burst-label:hover{{opacity:.8}}
  .burst.tight .burst-label{{color:#c8860a}}
  .burst.moment .burst-label{{color:#7788cc}}
  /* ── Lightbox ── */
  #lb{{display:none;position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:100;flex-direction:column;align-items:center;justify-content:center}}
  #lb-inner{{display:flex;flex-direction:column;width:100%;max-width:1200px;height:100vh;padding:1rem;gap:.75rem;box-sizing:border-box}}
  #lb-header{{display:flex;justify-content:space-between;align-items:center;color:#aaa;font-size:.82rem}}
  #lb-teller{{color:#eee;font-weight:bold}}
  #lb-fotos{{display:flex;gap:1rem;flex:1;min-height:0}}
  .lb-foto-wrap{{flex:1;display:flex;flex-direction:column;gap:.4rem;min-width:0}}
  .lb-foto-wrap img{{width:100%;height:calc(100% - 56px);object-fit:contain;border-radius:6px;border:3px solid transparent;cursor:pointer}}
  .lb-foto-wrap img.met-hart{{border-color:#e33}}
  .lb-foto-info{{font-size:.7rem;color:#aaa;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.3rem}}
  .lb-hart{{background:none;border:2px solid #555;border-radius:50%;width:34px;height:34px;font-size:1rem;cursor:pointer;color:#aaa;flex-shrink:0;display:flex;align-items:center;justify-content:center;line-height:1}}
  .lb-hart.actief{{border-color:#e33;color:#e33}}
  #lb-nav{{display:flex;align-items:center;justify-content:center;gap:1rem}}
  .lb-pijl{{background:#333;border:none;color:#eee;font-size:1.3rem;width:40px;height:40px;border-radius:50%;cursor:pointer}}
  .lb-pijl:disabled{{opacity:.3;cursor:default}}
  #lb-acties{{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}}
  #lb-info{{flex:1;font-size:.78rem;color:#aaa}}
  .lb-btn-over{{background:#383838;border:none;color:#eee;padding:.4rem .9rem;border-radius:4px;cursor:pointer}}
  .lb-btn-bevestig{{background:#2a7a2a;border:none;color:#eee;padding:.4rem .9rem;border-radius:4px;cursor:pointer;font-weight:bold}}
  .lb-btn-bevestig:disabled{{background:#2a2a2a;color:#555;cursor:default}}
  /* ── Foto-kaarten ── */
  .foto{{cursor:pointer;border:2px solid transparent;border-radius:5px;overflow:hidden;width:100%;background:#222;position:relative}}
  .foto.geselecteerd{{border-color:#f90}}
  .foto img{{width:100%;display:block;min-height:70px;background:#2a2a2a}}
  .naam{{font-size:.58rem;padding:2px 4px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
  .ext-badge{{position:absolute;top:3px;left:3px;background:rgba(0,0,0,.7);color:#fc0;font-size:.52rem;font-weight:bold;padding:1px 3px;border-radius:3px;pointer-events:none;text-transform:uppercase}}
  .foto-del{{position:absolute;top:3px;right:3px;background:rgba(140,0,0,.85);color:#fff;border:none;border-radius:50%;width:18px;height:18px;font-size:.8rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;transition:opacity .15s;z-index:2}}
  .foto:hover .foto-del{{opacity:1}}
  .foto-zoom,.foto-info-btn{{position:absolute;left:3px;background:rgba(0,0,0,.7);color:#fff;border-radius:3px;width:18px;height:18px;font-size:.7rem;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;text-decoration:none;z-index:2;border:none;cursor:pointer;padding:0}}
  .foto-zoom{{top:20px}}
  .foto-info-btn{{top:41px;font-size:.65rem}}
  .foto:hover .foto-zoom,.foto:hover .foto-info-btn{{opacity:1}}
  .foto-tijdstip{{color:#888;margin-left:.25rem}}
  /* ── Info-panel ── */
  #info-panel{{position:fixed;z-index:500;background:#1e1e1e;border:1px solid #444;border-radius:7px;padding:.7rem .9rem;width:260px;font-size:.76rem;color:#ccc;box-shadow:0 4px 24px rgba(0,0,0,.85);display:none}}
  .info-rij{{display:flex;gap:.4rem;margin-bottom:.25rem;align-items:flex-start;line-height:1.4}}
  .info-lbl{{color:#555;white-space:nowrap;min-width:50px;flex-shrink:0}}
  .info-val{{color:#ccc;word-break:break-all}}
  #info-kaart{{width:100%;height:200px;border:0;border-radius:4px;margin-top:.4rem;display:none}}
  .datum{{font-size:.7rem;padding:2px 4px 3px;color:#888}}
  #thumb-toolbar button{{padding:.18rem .45rem;font-size:.7rem}}
  /* ── Activiteitslog (full-width) ── */
  #activiteit-wrap{{flex-shrink:0;border-top:1px solid #222;background:#111}}
  #activiteit-hdr{{padding:.3rem .8rem;font-size:.75rem;font-weight:bold;color:#555;cursor:pointer;user-select:none;display:flex;align-items:center;gap:.3rem}}
  #activiteit-hdr:hover{{color:#888}}
  #activiteit-pijl{{font-size:.5rem;transition:transform .15s}}
  #activiteit-body{{max-height:130px;overflow-y:auto;padding:.2rem 0}}
  #activiteit-lijst{{display:flex;flex-wrap:wrap;gap:0;font-size:.68rem}}
  .act-rij{{padding:2px 10px;border-right:1px solid #1e1e1e;white-space:nowrap}}
  .act-ts{{color:#3a3a3a}}
  .act-naam{{color:#888}}
  .act-naar{{color:#4a7a4a}}
  .later-uitzoeken-rij{{color:#aaf;font-style:italic}}
  /* ── Tree drag-over ── */
  .boom-rij.drag-over{{background:#1a3a1a;outline:1px solid #4a8}}
  .maand-rij.drag-over{{background:#1a3a1a;outline:1px solid #4a8}}
  .ts-hdr.drag-over{{background:#1e3a1e;outline:1px solid #4a8}}
  /* ── Tree rename + add ── */
  .boom-rij-acties{{display:none;gap:2px;margin-left:auto}}
  .boom-rij:hover .boom-rij-acties{{display:flex}}
  .boom-rij-btn{{background:none;border:none;color:#555;cursor:pointer;font-size:.65rem;padding:1px 3px;line-height:1;border-radius:2px}}
  .boom-rij-btn:hover{{color:#ccc;background:#333}}
  .ts-hdr-acties{{margin-left:auto;display:flex;gap:2px}}
  .ts-hdr-btn{{background:none;border:none;color:#555;cursor:pointer;font-size:.72rem;padding:1px 4px;border-radius:3px;line-height:1}}
  .ts-hdr-btn:hover{{color:#8f8;background:#1e2e1e}}
  /* ── Taalknopjes ── */
  .lang-sel{{display:flex;gap:2px;align-items:center;margin-right:.4rem}}
  .lang-btn{{background:none;border:1px solid transparent;cursor:pointer;font-size:.72rem;font-weight:bold;letter-spacing:.04em;padding:3px 7px;border-radius:4px;color:#666;transition:color .15s,border-color .15s,background .15s;line-height:1}}
  .lang-btn:hover{{color:#bbb}}
  .lang-btn.active{{color:#eee;border-color:#555;background:#2a2a2a}}
  /* ── Systeemstatus knop ── */
  #health-btn{{background:#0f1f0f;border:1px solid #1e3a1e;color:#6b8;width:26px;height:26px;border-radius:4px;font-size:.8rem;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-right:.3rem;flex-shrink:0}}
  #health-btn:hover{{background:#1a2f1a;color:#8f8}}
  /* ── Health check modal ── */
  .health-rij{{display:flex;align-items:flex-start;gap:.5rem;padding:.32rem .45rem;border-radius:4px;background:#161616;margin-bottom:2px}}
  .health-icon{{font-size:.88rem;flex-shrink:0;width:1.3rem;padding-top:.05rem}}
  .health-lbl{{flex:1;font-size:.78rem;color:#ccc;line-height:1.35}}
  .health-val{{font-size:.63rem;color:#444;display:block;margin-top:1px}}
  .health-det{{font-size:.72rem;flex-shrink:0;padding-top:.05rem}}
  .det-ok{{color:#6b8}}.det-warn{{color:#f80}}.det-err{{color:#f66}}.det-info{{color:#555}}
  /* ── Info-help knop ── */
  #info-help-btn{{position:fixed;right:1rem;bottom:1rem;width:32px;height:32px;border-radius:50%;background:#2a2a2a;color:#888;border:1px solid #444;font-size:1rem;font-weight:bold;cursor:pointer;z-index:200;display:flex;align-items:center;justify-content:center;line-height:1}}
  #info-help-btn:hover{{background:#383838;color:#ccc}}
  /* ── Tree toggle (alleen mobiel) ── */
  #tree-toggle-btn{{display:none}}
  /* ── Slider wrapper (voor mobiel hide) ── */
  #slider-in-dd{{display:none}}
  #slider-wrap{{display:contents}}
  /* ── Extra tools dropdown (mobiel) ── */
  #extra-tools-wrap{{position:relative;display:flex;align-items:center}}
  #extra-tools-btn{{display:none;background:#383838;border:1px solid #555;color:#ccc;padding:.18rem .55rem;font-size:1rem;cursor:pointer;border-radius:4px;line-height:1;letter-spacing:.1em}}
  #extra-tools-btn:hover{{background:#444}}
  #extra-tools-dropdown{{display:flex;gap:.35rem;align-items:center}}
  /* ── Mobiel verplaats-picker ── */
  #mobiel-verplaats-bar{{display:none}}
  .mv-item{{padding:.55rem .7rem;border-bottom:1px solid #2a2a2a;cursor:pointer;font-size:.82rem;color:#ccc}}
  .mv-item:hover,.mv-item:active{{background:#2a3a2a;color:#eee}}
  @media(max-width:700px){{
    html,body{{height:auto;overflow:auto}}
    :root{{--foto-breedte:130px;--left-w:100%;--right-w:100%}}
    #main-wrap{{flex-direction:column;overflow:visible}}
    #left-panel{{position:fixed!important;top:calc(var(--mob-tb-top,46px) + 35px);left:0;right:0;max-height:0;overflow:hidden;z-index:15;border-right:none;border-bottom:none;transition:max-height .2s ease}}
    #left-panel.mob-open{{max-height:65vh;overflow-y:auto;border-bottom:1px solid #333;box-shadow:0 4px 14px rgba(0,0,0,.6)}}
    #left-resizer{{display:none}}
    #cols-wrap{{flex-direction:column;overflow:visible;height:auto}}
    #fotos-wrap{{width:100%;overflow:visible;min-width:0}}
    #sidebar{{width:100%;border-left:none;border-top:1px solid #2a2a2a}}
    #mobiel-verplaats-bar{{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .8rem;background:#1a2a1a;border-top:2px solid #2a5a2a;position:fixed;bottom:0;left:0;right:0;z-index:50;box-sizing:border-box}}
    #mobiel-verplaats-bar.verborgen{{display:none!important}}
    body{{padding-bottom:56px;padding-top:0}}
    .toolbar{{position:fixed!important;top:0;left:0;right:0;z-index:30;transition:transform .18s ease}}
    .toolbar.mob-verborgen{{transform:translateY(-100%)}}
    #thumb-toolbar{{position:fixed!important;top:var(--mob-tb-top,46px);left:0;right:0;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.5);transition:top .18s ease}}
    #main-wrap{{padding-top:calc(var(--mob-tb-top,46px) + 35px)}}
    #btn-verwijder{{white-space:nowrap}}
    #info-help-btn{{display:none}}
    #slider-wrap{{display:none!important}}
    #tree-toggle-btn{{display:flex;align-items:center;justify-content:center;background:#2a2a2a;border:1px solid #444;color:#ccc;padding:.18rem .55rem;font-size:.95rem;cursor:pointer;border-radius:4px;line-height:1}}
    #tree-toggle-btn:hover{{background:#383838}}
    #extra-tools-btn{{display:flex;align-items:center;justify-content:center}}
    #extra-tools-dropdown{{display:none;position:absolute;top:calc(100% + 6px);right:0;background:#1a1a1a;border:1px solid #444;border-radius:6px;padding:.45rem;flex-direction:column;gap:.3rem;min-width:180px;z-index:100;box-shadow:0 4px 14px rgba(0,0,0,.6)}}
    #extra-tools-dropdown.open{{display:flex}}
    #extra-tools-dropdown button{{text-align:left;width:100%;padding:.35rem .65rem;font-size:.78rem;border-radius:4px}}
    #slider-in-dd{{display:flex;align-items:center;gap:.4rem;padding:.3rem .65rem;border-bottom:1px solid #2a2a2a;margin-bottom:.1rem}}
    #slider-in-dd input[type=range]{{flex:1;accent-color:#4a8abf;cursor:pointer}}
    #slider-in-dd span{{font-size:.72rem;color:#aaa;white-space:nowrap}}
  }}
</style>
</head>
<body>
<div class="toolbar">
  <h1>Declutter</h1>
  <div style="flex:1"></div>
  <div class="lang-sel">
    <button class="lang-btn" data-lang="nl" onclick="setLang('nl')" title="Nederlands">NL</button>
    <button class="lang-btn" data-lang="en" onclick="setLang('en')" title="English">EN</button>
  </div>
  <button id="health-btn" onclick="toonHealth()" data-i18n-title="health_btn_title" title="Systeemstatus">⚡</button>
</div>
<div id="progress-wrap"><div id="progress"></div></div>
<div id="main-wrap">
<div id="cols-wrap">
  <!-- Linkerpaneel: treeview -->
  <div id="left-panel">
    <div class="ts-hdr open" id="tsh-behandeling" onclick="toggleTS('behandeling')">
      <span class="ts-pijl">&#9658;</span> <span data-i18n="section_behandeling">In behandeling</span>
    </div>
    <div class="ts-body open" id="tsb-behandeling"><div id="tree-behandeling" style="padding:.2rem 0"><span style="color:#444;font-size:.7rem;padding:4px 10px" data-i18n="status_laden">Laden…</span></div></div>
    <div class="ts-hdr open" id="tsh-verwerkt" onclick="toggleTS('verwerkt')"
         ondragover="_sectionDragOver(event,this)" ondragleave="_boomDragLeave(this)"
         ondrop="_sectionDrop(event,'verwerkt')">
      <span class="ts-pijl">&#9658;</span> <span data-i18n="section_verwerkt">Verwerkt (met datum)</span>
      <span class="ts-hdr-acties"><button class="ts-hdr-btn" data-i18n-title="tree_nieuwe_in_verwerkt" title="Nieuwe map in Verwerkt" onclick="event.stopPropagation();toonNieuweMapModal('verwerkt')">+</button></span>
    </div>
    <div class="ts-body open" id="tsb-verwerkt"><div id="tree-verwerkt"></div></div>
    <div class="ts-hdr open" id="tsh-datumloos" onclick="toggleTS('datumloos')"
         ondragover="_sectionDragOver(event,this)" ondragleave="_boomDragLeave(this)"
         ondrop="_sectionDrop(event,'datumloos')">
      <span class="ts-pijl">&#9658;</span> <span data-i18n="section_datumloos">Verwerkt (zonder datum)</span>
      <span class="ts-hdr-acties"><button class="ts-hdr-btn" data-i18n-title="tree_nieuwe_in_datumloos" title="Nieuwe map in Zonder datum" onclick="event.stopPropagation();toonNieuweMapModal('datumloos')">+</button></span>
    </div>
    <div class="ts-body open" id="tsb-datumloos"><div id="tree-datumloos"></div></div>
    <div class="ts-hdr" id="tsh-prullenbak" onclick="toggleTS('prullenbak')">
      <span class="ts-pijl">&#9658;</span> <span data-i18n="section_prullenbak">🗑 Prullenbak</span>
    </div>
    <div class="ts-body" id="tsb-prullenbak"><div id="tree-prullenbak"></div></div>
  </div>
  <div id="left-resizer"></div>
  <!-- Middenpaneel: foto's -->
  <div id="fotos-wrap">
    <div id="thumb-toolbar">
      <button type="button" id="tree-toggle-btn" onclick="toggleTreePanel()" title="Boom tonen/verbergen">&#9776;</button>
      <div id="slider-wrap">
        <span data-i18n="lbl_grootte">Grootte:</span>
        <input type="range" id="breedte-slider" min="100" max="400" value="220"
               oninput="sliderVerander(this.value)">
        <span id="breedte-label">220px</span>
      </div>
      <div style="flex:1"></div>
      <button type="button" class="btn-later" onclick="bewaarLater()" data-i18n-title="btn_later_title" title="Zet selectie in 'Later uitzoeken'">⏳ <span data-i18n="btn_later">Later</span></button>
      <button type="button" id="btn-verwijder" class="btn-verwijder" onclick="verwijderSelectie()" data-i18n-title="btn_verwijder_title" title="Verplaats selectie naar prullenbak" disabled>🗑 <span data-i18n="btn_verwijder">Verwijder</span></button>
      <button type="button" class="btn-alles" onclick="allesToggle()" data-i18n-title="btn_alles_title" title="Alles (de)selecteren">☑ <span data-i18n="btn_alles">Alles</span></button>
      <div id="extra-tools-wrap">
        <button type="button" id="extra-tools-btn" onclick="toggleExtraTools()" data-i18n-title="btn_extra_tools_title" title="Meer opties">&#8943;</button>
        <div id="extra-tools-dropdown">
          <div id="slider-in-dd">
            <span data-i18n="lbl_grootte">Grootte:</span>
            <input type="range" id="breedte-slider-dd" min="100" max="400" value="220"
                   oninput="sliderVerander(this.value);document.getElementById('breedte-slider').value=this.value">
            <span id="breedte-label-dd">220px</span>
          </div>
          <button type="button" class="btn-presort" onclick="sluitExtraTools();presortRun()" data-i18n-title="btn_presort_title" title="Foto's uit ruwe_data indelen op datum">⚙ <span data-i18n="btn_presort">Presort</span></button>
          <button type="button" class="btn-opruim" onclick="sluitExtraTools();opruimLege()" data-i18n-title="btn_opruim_title" title="Verwijder lege mappen uit 'In behandeling'">🧹 <span data-i18n="btn_opruim">Opruimen</span></button>
          <button type="button" class="btn-cache" onclick="sluitExtraTools();clearThumbs()" data-i18n-title="btn_cache_title" title="Thumbnail-cache leegmaken">🗑 <span data-i18n="btn_cache">Cache</span></button>
          <button type="button" class="btn-reset" onclick="sluitExtraTools();resetTest()" data-i18n-title="btn_reset_title" title="Testdata opnieuw aanmaken">↺ <span data-i18n="btn_reset">Reset</span></button>
          <button type="button" style="background:#2a2a2a;border:1px solid #444;color:#888" onclick="sluitExtraTools();toonInfoHelp()" data-i18n="btn_info" data-i18n-title="btn_info_title" title="Uitleg over de interface">? Info</button>
        </div>
      </div>
    </div>
    <div id="fotos"><p style="color:#555;padding:1rem" data-i18n="status_init">Kies een map in de boom links.</p></div>
    <div id="status" data-i18n="status_init">Kies een map in de boom links.</div>
  </div>
  <!-- Rechterpaneel: geselecteerd -->
  <div id="sidebar"><h3 data-i18n="sidebar_title">Geselecteerd</h3><p class="sb-leeg" data-i18n="sidebar_leeg">Nog niets geselecteerd.</p></div>
</div><!-- /cols-wrap -->
<!-- Activiteitslog: full-width onder de 3 kolommen -->
<div id="activiteit-wrap">
  <div id="activiteit-hdr" onclick="toggleActiviteit()">
    <span id="activiteit-pijl">&#9658;</span> <span data-i18n="section_activiteit">Activiteitslog</span>
    <span id="activiteit-count" style="color:#555;margin-left:.5rem;font-weight:normal"></span>
  </div>
  <div id="activiteit-body" style="display:none">
    <div id="activiteit-lijst"><span style="color:#444;font-size:.72rem;padding:4px 10px;display:block" data-i18n="activiteit_leeg">Nog geen activiteit in deze sessie.</span></div>
  </div>
</div>
</div><!-- /main-wrap -->

<!-- Drag-tooltip -->
<div id="drag-tooltip" style="position:fixed;display:none;background:rgba(30,30,30,.92);color:#f90;border:1px solid #555;border-radius:6px;padding:4px 10px;font-size:.78rem;pointer-events:none;z-index:600"></div>

<!-- Mobiel: verplaats-balk (sticky onderaan, alleen zichtbaar op mobiel als er selectie is) -->
<div id="mobiel-verplaats-bar" class="verborgen">
  <span id="mobiel-verplaats-lbl" style="font-size:.82rem;color:#9c9"></span>
  <button onclick="toonMobielVerplaats()" style="background:#2a6a2a;color:#eee;border:none;border-radius:5px;padding:.4rem .9rem;font-size:.82rem;cursor:pointer;font-weight:bold" data-i18n="mobiel_verplaats_btn">&#128193; Verplaatsen naar&hellip;</button>
</div>

<!-- Mobiel: verplaats-picker modal (bottom sheet) -->
<div id="mobiel-verplaats-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:500;align-items:flex-end;justify-content:center">
  <div style="background:#1e1e1e;border-radius:12px 12px 0 0;width:100%;max-height:72vh;display:flex;flex-direction:column;padding:1rem 1rem .5rem">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem">
      <h2 style="margin:0;font-size:.92rem;color:#eee" id="mv-titel" data-i18n="mobiel_verplaats_titel">Verplaatsen naar&hellip;</h2>
      <button onclick="document.getElementById('mobiel-verplaats-modal').style.display='none'" style="background:none;border:none;color:#888;font-size:1.3rem;cursor:pointer;line-height:1;padding:0 .2rem">&#215;</button>
    </div>
    <input type="search" id="mv-filter" placeholder="Zoeken&hellip;" data-i18n-placeholder="mobiel_zoeken_ph" oninput="filterMobielVerplaats()"
           style="background:#222;border:1px solid #444;color:#eee;border-radius:4px;padding:.38rem .6rem;font-size:.85rem;margin-bottom:.5rem;width:100%">
    <div id="mobiel-verplaats-lijst" style="overflow-y:auto;flex:1"></div>
  </div>
</div>

<!-- Opruimen bevestig-modal -->
<div id="opruim-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;align-items:center;justify-content:center">
  <div style="background:#1e1e1e;border:1px solid #555;border-radius:8px;padding:1.4rem 1.8rem;max-width:420px;width:90%;color:#eee">
    <h2 style="margin:0 0 .6rem;font-size:1rem;color:#eee" data-i18n="opruim_modal_titel">🧹 Lege mappen opruimen</h2>
    <p style="margin:0 0 .7rem;font-size:.82rem;color:#aaa" data-i18n="opruim_modal_uitleg">De volgende lege mappen worden verwijderd uit In behandeling:</p>
    <div id="opruim-lijst" style="max-height:200px;overflow-y:auto;background:#161616;border:1px solid #333;border-radius:4px;padding:.4rem .6rem;margin-bottom:.8rem;font-size:.8rem"></div>
    <div style="display:flex;gap:.6rem;justify-content:flex-end">
      <button type="button" onclick="document.getElementById('opruim-modal').style.display='none'" style="background:#383838;color:#ccc;padding:.45rem 1rem;border:none;border-radius:4px;cursor:pointer" data-i18n="cancel">Annuleren</button>
      <button type="button" onclick="bevestigOpruim()" style="background:#1a2a3a;color:#7af;border:1px solid #2a4a6a;padding:.45rem 1rem;border-radius:4px;cursor:pointer;font-weight:bold" data-i18n="opruim_bevestig">Opruimen</button>
    </div>
  </div>
</div>

<!-- Nieuwe map modal -->
<div id="nieuwmap-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;align-items:center;justify-content:center">
  <div style="background:#1e1e1e;border:1px solid #555;border-radius:8px;padding:1.4rem 1.8rem;max-width:420px;width:90%;color:#eee">
    <h2 style="margin:0 0 .8rem;font-size:1rem;color:#eee" id="nieuwmap-titel" data-i18n="nieuwmap_titel">Nieuwe map aanmaken</h2>
    <p style="margin:0 0 .6rem;font-size:.82rem;color:#888" id="nieuwmap-uitleg"></p>
    <div style="position:relative;margin-bottom:.5rem">
      <input type="text" id="nieuwmap-naam" placeholder="2026-04-02 Vakantie  of  Marktplaats/Babybedje"
             oninput="valideerNieuweMap()" style="width:100%;padding:.4rem 2rem .4rem .6rem;background:#222;border:1px solid #444;color:#eee;border-radius:4px;font-size:.88rem">
      <span class="album-staat" id="nieuwmap-staat"></span>
    </div>
    <div id="nieuwmap-hint" style="font-size:.72rem;color:#666;margin-bottom:.8rem;min-height:1.2rem"></div>
    <div style="display:flex;gap:.6rem;justify-content:flex-end">
      <button type="button" onclick="sluitNieuweMapModal()" style="background:#383838;color:#ccc;padding:.45rem 1rem;border:none;border-radius:4px;cursor:pointer" data-i18n="cancel">Annuleren</button>
      <button type="button" id="nieuwmap-ok" onclick="bevestigNieuweMap()" style="background:#2a6a2a;color:#eee;padding:.45rem 1rem;border:none;border-radius:4px;cursor:pointer;font-weight:bold" data-i18n="nieuwmap_ok" disabled>Aanmaken</button>
    </div>
  </div>
</div>

<!-- Hernoem-modal -->
<div id="hernoem-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;align-items:center;justify-content:center">
  <div style="background:#1e1e1e;border:1px solid #555;border-radius:8px;padding:1.4rem 1.8rem;max-width:420px;width:90%;color:#eee">
    <h2 style="margin:0 0 .8rem;font-size:1rem;color:#eee" data-i18n="hernoem_titel">Map hernoemen</h2>
    <p style="margin:0 0 .5rem;font-size:.78rem;color:#666" id="hernoem-huidig"></p>
    <input type="text" id="hernoem-naam" placeholder="Nieuwe naam" data-i18n-placeholder="hernoem_ph"
           oninput="valideerHernoem()" style="width:100%;padding:.4rem .6rem;background:#222;border:1px solid #444;color:#eee;border-radius:4px;font-size:.88rem;margin-bottom:.3rem">
    <div id="hernoem-hint" style="font-size:.72rem;color:#f80;margin-bottom:.8rem;min-height:1.2rem"></div>
    <div style="display:flex;gap:.6rem;justify-content:flex-end">
      <button type="button" onclick="sluitHernoemModal()" style="background:#383838;color:#ccc;padding:.45rem 1rem;border:none;border-radius:4px;cursor:pointer" data-i18n="cancel">Annuleren</button>
      <button type="button" id="hernoem-ok" onclick="bevestigHernoem()" style="background:#2a5a8a;color:#eee;padding:.45rem 1rem;border:none;border-radius:4px;cursor:pointer;font-weight:bold" data-i18n="hernoem_ok" disabled>Hernoemen</button>
    </div>
  </div>
</div>

<!-- Systeemstatus modal -->
<div id="health-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:400;align-items:center;justify-content:center;overflow:auto">
  <div style="background:#1a1a1a;border:1px solid #3a3a3a;border-radius:10px;padding:1.5rem 1.8rem;max-width:540px;width:90%;color:#ccc;position:relative;margin:auto;box-shadow:0 8px 40px rgba(0,0,0,.7)">
    <button onclick="document.getElementById('health-modal').style.display='none'" style="position:absolute;top:.6rem;right:.8rem;background:none;border:none;color:#555;font-size:1.2rem;cursor:pointer;line-height:1;transition:color .1s" onmouseover="this.style.color='#ccc'" onmouseout="this.style.color='#555'">×</button>
    <h2 style="margin:0 0 1rem;color:#eee;font-size:.95rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase" data-i18n="health_title">Systeemstatus</h2>
    <div id="health-lijst" style="margin-bottom:1.1rem;display:flex;flex-direction:column;gap:2px;min-height:60px">
      <div class="health-rij"><span class="health-icon" style="color:#555">⏳</span><span class="health-lbl" style="color:#444">Laden…</span></div>
    </div>
    <div style="display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap;border-top:1px solid #2a2a2a;padding-top:.85rem;margin-top:.2rem">
      <button id="health-refresh-btn" onclick="refreshHealth()" style="background:#0f1f0f;color:#6b8;border:1px solid #1e3a1e;padding:.38rem .85rem;border-radius:4px;cursor:pointer;font-size:.8rem;transition:background .1s" data-i18n="health_refresh">↻ Vernieuwen</button>
      <button id="health-restart-btn" onclick="restartServer()" style="background:#1f1400;color:#f80;border:1px solid #3a2800;padding:.38rem .85rem;border-radius:4px;cursor:pointer;font-size:.8rem;transition:background .1s" data-i18n="health_restart">↺ Herstart server</button>
    </div>
  </div>
</div>

<!-- Info-knop rechtsonder -->
<button id="info-help-btn" onclick="toonInfoHelp()" title="Uitleg over de interface">?</button>

<!-- Info-help modal -->
<div id="info-help-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:400;align-items:center;justify-content:center;overflow:auto">
  <div style="background:#1e1e1e;border:1px solid #555;border-radius:8px;padding:1.5rem 2rem;max-width:560px;width:90%;color:#ccc;position:relative;margin:auto">
    <button onclick="document.getElementById('info-help-modal').style.display='none'" style="position:absolute;top:.6rem;right:.8rem;background:none;border:none;color:#888;font-size:1.2rem;cursor:pointer">×</button>
    <h2 style="margin:0 0 1rem;color:#eee;font-size:1rem" data-i18n="help_title">Declutter — gebruiksaanwijzing</h2>
    <div id="info-help-body" style="font-size:.82rem;line-height:1.7;display:flex;flex-direction:column;gap:.5rem">
      <div><strong style="color:#f90">Linkerpaneel (boom)</strong><br>
        Klik op een maand of album om de foto's te laden.<br>
        Dubbelklik op een mapnaam om hem te hernoemen, of gebruik het ✎-icoon.<br>
        Sleep een <em>map</em> naar een andere map of sectie-header om hem te verplaatsen.<br>
        Gebruik het <strong>+</strong>-icoon naast een sectie of map voor een nieuwe submap.</div>
      <div><strong style="color:#f90">Foto's selecteren &amp; verplaatsen</strong><br>
        Klik op een thumbnail om te selecteren. <strong>Shift+klik</strong> voor bereik. <strong>☑ Alles</strong> selecteert alles in de huidige weergave.<br>
        Sleep geselecteerde foto's naar een map in de boom — een tooltip toont het aantal.<br>
        <strong>⏳ Later</strong> verplaatst de selectie naar de map 'Later uitzoeken'.</div>
      <div><strong style="color:#f90">Nieuwe map</strong><br>
        Klik <strong>+</strong> naast een sectie of map. Als foto's geselecteerd zijn worden ze er direct naartoe verplaatst.<br>
        <em>Verwerkt (met datum)</em>: begin met een datum, bijv. <code>2026-04-02 Vakantie</code>.<br>
        <em>Zonder datum</em>: geen datum nodig, bijv. <code>Marktplaats/Babybedje</code>.</div>
      <div><strong style="color:#f90">Werkbalk (boven het overzicht)</strong><br>
        <strong>⚙ Presort</strong> — verdeelt foto's uit ruwe_data automatisch op maand.<br>
        <strong>🧹 Opruimen</strong> — verwijdert lege YYYY-MM mappen uit 'In behandeling', zodat je weet welke periodes al afgehandeld zijn.<br>
        <strong>🗑 Cache</strong> — wist de thumbnail-cache (nuttig na handmatige wijzigingen).<br>
        <strong>↺ Reset</strong> — maakt testdata opnieuw aan (wist alle bestanden!).</div>
      <div><strong style="color:#f90">Burst-groepen</strong><br>
        Foto's die snel achter elkaar genomen zijn, worden gegroepeerd. Klik op het label om de lichtbak te openen voor vergelijking.</div>
      <div><strong style="color:#f90">Kleurcodes album-invoer</strong><br>
        <span style="color:#4c4">●</span> Groen = geldig formaat &nbsp;
        <span style="color:#f80">●</span> Oranje = vrije tekst zonder datum &nbsp;
        <span style="color:#c44">●</span> Rood = ongeldige datum</div>
      <div><strong style="color:#f90">Sneltoetsen (lichtbak)</strong><br>
        ← → bladeren &nbsp;·&nbsp; H = hartje &nbsp;·&nbsp; Esc = sluiten</div>
    </div>
  </div>
</div>

<div id="info-panel">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem">
    <strong id="info-naam" style="font-size:.8rem;color:#eee;word-break:break-all;flex:1;margin-right:.5rem"></strong>
    <button onclick="sluitInfoPanel()" style="background:none;border:none;color:#888;font-size:1.1rem;cursor:pointer;line-height:1;flex-shrink:0">×</button>
  </div>
  <div id="info-inhoud"></div>
  <iframe id="info-kaart" sandbox="allow-scripts allow-same-origin"></iframe>
</div>

<div id="reset-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;align-items:center;justify-content:center">
  <div style="background:#1e1e1e;border:1px solid #555;border-radius:8px;padding:1.5rem 2rem;max-width:440px;width:90%;color:#eee">
    <div id="reset-keuze">
      <h2 style="margin:0 0 .8rem;font-size:1.1rem;color:#f66">Reset test — weet je het zeker?</h2>
      <p style="margin:0 0 .6rem;font-size:.9rem;color:#ccc">Dit gaat het volgende doen:</p>
      <ul style="margin:.3rem 0 .8rem;padding-left:1.4rem;font-size:.85rem;color:#aaa;line-height:1.7">
        <li>De volledige map <code style="color:#f90">{BASE_DIR}</code> wordt gewist</li>
        <li>Gekozen aantal foto's worden gedownload van picsum.photos</li>
        <li>Foto's worden ingedeeld op datum via presort</li>
        <li>De pagina wordt herladen</li>
      </ul>
      <p style="margin:0 0 .8rem;font-size:.8rem;color:#888">Bestanden buiten <code style="color:#f90">{BASE_DIR}</code> worden niet aangeraakt.</p>
      <label style="display:flex;align-items:center;gap:.8rem;font-size:.9rem;margin-bottom:1rem">
        <span style="white-space:nowrap;color:#ccc">Aantal foto's:</span>
        <input type="range" id="reset-aantal" min="20" max="400" step="10" value="40"
               oninput="document.getElementById('reset-aantal-label').textContent=this.value"
               style="flex:1;accent-color:#4a8abf;cursor:pointer">
        <span id="reset-aantal-label" style="width:2.5rem;text-align:right;color:#f90;font-weight:bold">40</span>
      </label>
      <div style="display:flex;gap:.7rem;justify-content:flex-end">
        <button type="button" onclick="document.getElementById('reset-modal').style.display='none'" style="background:#444;color:#eee;padding:.5rem 1.1rem;border:none;border-radius:4px;cursor:pointer;font-size:.9rem" data-i18n="cancel">Annuleren</button>
        <button type="button" onclick="resetTestBevestigd()" style="background:#c33;color:#fff;padding:.5rem 1.1rem;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:bold" data-i18n="reset_ja">Ja, reset</button>
      </div>
    </div>
    <div id="reset-voortgang" style="display:none">
      <h2 style="margin:0 0 1rem;font-size:1rem;color:#ccc" data-i18n="reset_bezig">Reset bezig…</h2>
      <div id="reset-fase-label" style="font-size:.8rem;color:#888;margin-bottom:.4rem" data-i18n="reset_starten">Starten…</div>
      <div style="background:#111;border-radius:4px;height:12px;overflow:hidden;margin-bottom:.5rem">
        <div id="reset-balk" style="height:100%;width:0%;background:#4a8abf;transition:width .2s"></div>
      </div>
      <div id="reset-bericht" style="font-size:.78rem;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"></div>
    </div>
  </div>
</div>

<div id="lb">
  <div id="lb-inner">
    <div id="lb-header">
      <span id="lb-teller"></span>
      <span style="font-size:.75rem;color:#666" data-i18n="lb_sneltoetsen">H = hartje &nbsp;·&nbsp; ← → = bladeren &nbsp;·&nbsp; Esc = sluiten</span>
      <button type="button" onclick="sluitLightbox()" style="background:none;border:none;color:#888;font-size:1.4rem;cursor:pointer;line-height:1;padding:0 .2rem;margin-left:.5rem" data-i18n-title="lb_sluiten" title="Sluiten">&#215;</button>
    </div>
    <div id="lb-fotos"></div>
    <div id="lb-nav">
      <button type="button" class="lb-pijl" id="lb-prev" onclick="lbStap(-1)">&#8592;</button>
      <button type="button" class="lb-pijl" id="lb-next" onclick="lbStap(1)">&#8594;</button>
    </div>
    <div id="lb-acties">
      <span id="lb-info"></span>
      <button type="button" class="lb-btn-over" onclick="sluitLightbox()" data-i18n="lb_sla_over">Sla over</button>
      <button type="button" class="lb-btn-bevestig" id="lb-bevestig" onclick="bevestigLightbox()" data-i18n="lb_bevestig">Bevestig keuze</button>
    </div>
  </div>
</div>

<script>
// Persistente selectie over mappen heen: pad -> {{naam, thumb}}
const selectie = new Map();
let huidigeMaand = null;
let huidigePad   = null;
let _archiefDir    = '';
let _datumloosDir  = '';
let _prullenbakDir = '';
let _uitzoeken     = '';
let _herstelde_anker = localStorage.getItem('fc_anker');

// ── Tree state ─────────────────────────────────────────────────────────────
let _treeData = null;  // cache van laatste /tree respons

function toggleTS(sectie) {{
  const hdr  = document.getElementById('tsh-' + sectie);
  const body = document.getElementById('tsb-' + sectie);
  if (!hdr || !body) return;
  const open = body.classList.toggle('open');
  hdr.classList.toggle('open', open);
}}

function _renderMaandBoom(jm, laterUitzoeken) {{
  const container = document.getElementById('tree-behandeling');
  if (!container) return;
  // Totaal over alle maanden → header bijwerken
  const totaal = jm ? Object.values(jm).flat().reduce((s, mo) => s + (typeof mo === 'object' ? (mo.aantal||0) : 0), 0) : 0;
  const hdr = document.getElementById('tsh-behandeling');
  if (hdr) {{
    let lbl = hdr.querySelector('.ts-behandeling-lbl');
    if (!lbl) {{
      lbl = document.createElement('span');
      lbl.className = 'ts-behandeling-lbl';
      hdr.appendChild(lbl);
    }}
    lbl.innerHTML = totaal ? ` <span class="boom-count">(${{totaal}})</span>` : '';
  }}
  if (!jm || !Object.keys(jm).length) {{
    container.innerHTML = '<span style="color:#444;font-size:.7rem;padding:4px 10px;display:block">' + t('tree_geen_mappen') + '</span>';
    return;
  }}
  const MAANDEN = ['jan','feb','mrt','apr','mei','jun','jul','aug','sep','okt','nov','dec'];
  let html = '';
  for (const jaar of Object.keys(jm).sort().reverse()) {{
    const jaarAantal = jm[jaar].reduce((s, mo) => s + (typeof mo === 'object' ? (mo.aantal||0) : 0), 0);
    const jaarCnt = jaarAantal ? ` <span class="boom-count">(${{jaarAantal}})</span>` : '';
    html += `<div class="jaar-rij" onclick="toggleJaar('${{jaar}}')">
      <span class="jaar-pijl" id="jp-${{jaar}}">&#9658;</span>
      <span class="jaar-label">${{jaar}}${{jaarCnt}}</span>
    </div>
    <div class="jaar-sub" id="js-${{jaar}}">`;
    for (const mo of jm[jaar]) {{
      const maand = typeof mo === 'string' ? mo : mo.naam;
      const aantal = (typeof mo === 'object' && mo.aantal) ? mo.aantal : 0;
      const mn = parseInt(maand.slice(5)) - 1;
      const lbl = MAANDEN[mn] || maand.slice(5);
      const maandPad = ('{INBOX_DIR}/' + maand).replace(/\\\\/g,'/');
      const cntHtml = aantal ? ` <span class="boom-count">(${{aantal}})</span>` : '';
      html += `<div class="maand-rij" id="mr-${{maand}}" data-maand="${{maand}}"
        onclick="laadMaand('${{maand}}',this)">
        <span>${{lbl}}${{cntHtml}}</span>
      </div>`;
    }}
    html += '</div>';
  }}
  // Later uitzoeken speciale entry
  if (laterUitzoeken) {{
    const cntHtml = laterUitzoeken.aantal ? ` <span class="boom-count">(${{laterUitzoeken.aantal}})</span>` : '';
    const safePad = laterUitzoeken.pad.replace(/"/g,'&quot;');
    html += `<div class="maand-rij later-uitzoeken-rij" data-pad="${{safePad}}"
      onclick="bladernInMap('${{safePad}}')"
      ondragover="_boomDragOver(event,this)"
      ondragleave="_boomDragLeave(this)"
      ondrop="_boomDrop(event,'${{safePad}}')">
      <span>&#9201; Later uitzoeken${{cntHtml}}</span>
    </div>`;
  }}
  container.innerHTML = html;
  // Open het meest recente jaar automatisch
  const jaren = Object.keys(jm).sort();
  if (jaren.length) _openJaar(jaren[jaren.length - 1]);
}}

function toggleJaar(jaar) {{
  const sub  = document.getElementById('js-' + jaar);
  const pijl = document.getElementById('jp-' + jaar);
  if (!sub) return;
  const open = sub.style.display !== 'block';
  sub.style.display = open ? 'block' : 'none';
  if (pijl) pijl.innerHTML = open ? '&#9660;' : '&#9658;';
}}

function _openJaar(jaar) {{
  const sub  = document.getElementById('js-' + jaar);
  const pijl = document.getElementById('jp-' + jaar);
  if (sub) {{ sub.style.display = 'block'; }}
  if (pijl) pijl.innerHTML = '&#9660;';
}}

function _renderAlbumBoom(nodes, containerId) {{
  const el = document.getElementById(containerId);
  if (!el) return;
  if (!nodes || !nodes.length) {{
    el.innerHTML = '<span style="color:#444;font-size:.7rem;padding:4px 10px;display:block">' + t('tree_leeg') + '</span>';
    return;
  }}
  el.innerHTML = _renderBoomNodes(nodes, 0);
  el.addEventListener('click', _boomKlik);
}}

function _renderPrullenbakBoom(nodes, containerId) {{
  const el = document.getElementById(containerId);
  if (!el) return;
  if (!nodes || !nodes.length) {{
    el.innerHTML = '<span style="color:#444;font-size:.7rem;padding:4px 10px;display:block">' + t('tree_leeg') + '</span>';
    return;
  }}
  el.innerHTML = _renderPbNodes(nodes, 0);
  el.addEventListener('click', e => {{
    const naam = e.target.closest('.boom-naam');
    if (naam) bladernInMap(naam.closest('.boom-node').dataset.pad);
    const pijl = e.target.closest('.boom-pijl');
    if (pijl) {{
      const node = pijl.closest('.boom-node');
      const sub  = node && node.querySelector(':scope > .boom-sub');
      if (sub) {{
        const open = sub.style.display === 'block';
        sub.style.display = open ? 'none' : 'block';
        pijl.innerHTML = open ? '&#9658;' : '&#9660;';
      }}
    }}
  }});
}}

function _renderPbNodes(nodes, diepte) {{
  return nodes.map(n => {{
    const esc     = n.pad.replace(/"/g,'&quot;');
    const naamEsc = n.naam.replace(/</g,'&lt;').replace(/>/g,'&gt;');
    const heeftSub = n.submappen && n.submappen.length > 0;
    const sub = heeftSub
      ? `<div class="boom-sub">${{_renderPbNodes(n.submappen, diepte+1)}}</div>` : '';
    const cntHtml = n.aantal ? ` <span class="boom-count">(${{n.aantal}})</span>` : '';
    return `<div class="boom-node" data-pad="${{esc}}">
      <div class="boom-rij pb-readonly" style="padding-left:${{8+diepte*12}}px">
        <span class="boom-pijl">${{heeftSub ? '&#9658;' : '&nbsp;'}}</span>
        <span class="boom-naam">${{naamEsc}}${{cntHtml}}</span>
      </div>${{sub}}</div>`;
  }}).join('');
}}

function _renderBoomNodes(nodes, diepte) {{
  return nodes.map(n => {{
    const esc = n.pad.replace(/"/g,'&quot;');
    const naamEsc = n.naam.replace(/</g,'&lt;').replace(/>/g,'&gt;');
    const heeftSub = n.submappen && n.submappen.length > 0;
    const sub = heeftSub
      ? `<div class="boom-sub">${{_renderBoomNodes(n.submappen, diepte+1)}}</div>` : '';
    const cntHtml = n.aantal ? ` <span class="boom-count">(${{n.aantal}})</span>` : '';
    return `<div class="boom-node" data-pad="${{esc}}">
      <div class="boom-rij" draggable="true" style="padding-left:${{8+diepte*12}}px"
           ondragstart="mapDragStart(event,'${{esc}}')"
           ondragover="_boomDragOver(event,this)"
           ondragleave="_boomDragLeave(this)"
           ondrop="_boomDrop(event,'${{esc}}')">
        <span class="boom-pijl">${{heeftSub ? '&#9658;' : '&nbsp;'}}</span>
        <span class="boom-naam" ondblclick="toonHernoemModal('${{esc}}')">${{naamEsc}}${{cntHtml}}</span>
        <span class="boom-rij-acties">
          <button class="boom-rij-btn" title="${{t('tree_nieuwe_submap_title')}}" onclick="event.stopPropagation();toonNieuweMapModal(null,'${{esc}}')">+</button>
          <button class="boom-rij-btn" title="${{t('tree_hernoem_title')}}" onclick="event.stopPropagation();toonHernoemModal('${{esc}}')">✎</button>
        </span>
      </div>${{sub}}</div>`;
  }}).join('');
}}

function _boomKlik(e) {{
  const pijl = e.target.closest('.boom-pijl');
  const naam = e.target.closest('.boom-naam');
  if (pijl) {{
    const node = pijl.closest('.boom-node');
    const sub  = node && node.querySelector(':scope > .boom-sub');
    if (sub) {{
      const open = sub.style.display === 'block';
      sub.style.display = open ? 'none' : 'block';
      pijl.innerHTML    = open ? '&#9658;' : '&#9660;';
    }}
  }} else if (naam) {{
    bladernInMap(naam.closest('.boom-node').dataset.pad);
  }}
}}

async function laadTree(forceer) {{
  if (_treeData && !forceer) return;
  try {{
    const resp = await fetch('/tree');
    if (!resp.ok) throw new Error('HTTP ' + resp.status);
    const d = await resp.json();
    _treeData = d;
    _archiefDir    = d.archief    || '';
    _datumloosDir  = d.datumloos  || '';
    _prullenbakDir = d.prullenbak || '';
    _uitzoeken     = d.uitzoeken  || '';
    _renderMaandBoom(d.jm || {{}}, d.later_uitzoeken || null);
    _renderAlbumBoom(d.archief_boom    || [], 'tree-verwerkt');
    _renderAlbumBoom(d.datumloos_boom  || [], 'tree-datumloos');
    _renderPrullenbakBoom(d.prullenbak_boom || [], 'tree-prullenbak');
  }} catch(err) {{
    console.error('Tree laden mislukt:', err);
    document.getElementById('tree-verwerkt').innerHTML =
      `<span style="color:#c66;font-size:.7rem;padding:4px 10px;display:block">Fout: ${{err.message}}</span>`;
  }}
}}

function _verversTree() {{
  _treeData = null;
  laadTree(true);
}}


// ── Drag foto's en mappen ─────────────────────────────────────────────────────
const _dragTooltip = () => document.getElementById('drag-tooltip');
let _dragMapPad = null;

function fotoDragStart(e, el) {{
  if (!el.classList.contains('geselecteerd')) toggle(el);
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('fc-foto', '1');
  const n = selectie.size || 1;
  const tt = _dragTooltip();
  if (tt) {{
    tt.textContent = t('fotos_drag_n').replace('{{n}}', n);
    tt.style.display = 'block';
  }}
}}

function mapDragStart(e, pad) {{
  e.stopPropagation();
  _dragMapPad = pad;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('fc-map', pad);
  const tt = _dragTooltip();
  if (tt) {{
    tt.textContent = '\U0001F4C1 ' + pad.split('/').pop();
    tt.style.display = 'block';
  }}
}}

document.addEventListener('dragend', () => {{
  _dragMapPad = null;
  const tt = _dragTooltip();
  if (tt) tt.style.display = 'none';
  document.querySelectorAll('.boom-rij.drag-over,.maand-rij.drag-over,.ts-hdr.drag-over').forEach(r => r.classList.remove('drag-over'));
}});

document.addEventListener('dragover', e => {{
  const tt = _dragTooltip();
  if (tt && tt.style.display !== 'none') {{
    tt.style.left = (e.clientX + 16) + 'px';
    tt.style.top  = (e.clientY - 10) + 'px';
  }}
}});

function _boomDragOver(e, rij) {{
  if (!e.dataTransfer.types.includes('fc-foto') && !e.dataTransfer.types.includes('fc-map')) return;
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  rij.classList.add('drag-over');
}}

function _sectionDragOver(e, rij) {{
  if (!e.dataTransfer.types.includes('fc-map')) return;
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  rij.classList.add('drag-over');
}}

function _boomDragLeave(rij) {{
  rij.classList.remove('drag-over');
}}

async function _boomDrop(e, pad) {{
  e.preventDefault();
  document.querySelectorAll('.boom-rij.drag-over,.maand-rij.drag-over,.ts-hdr.drag-over').forEach(r => r.classList.remove('drag-over'));
  if (e.dataTransfer.types.includes('fc-map')) {{
    const vanPad = _dragMapPad; _dragMapPad = null;
    if (!vanPad || vanPad === pad || pad.startsWith(vanPad + '/')) return;
    const r = await fetch('/verplaatsmap', {{
      method: 'POST',
      headers: {{'Content-Type': 'application/json'}},
      body: JSON.stringify({{van: vanPad, naar: pad}})
    }});
    const d = await r.json();
    document.getElementById('status').textContent = d.bericht || d.fout || '';
    if (d.fout) alert('Fout: ' + d.fout);
    else {{ _verversTree(); if (huidigePad && huidigePad.startsWith(vanPad)) bladernInMap(d.nieuw_pad); }}
    return;
  }}
  if (!e.dataTransfer.types.includes('fc-foto')) return;
  const paden = [...selectie.keys()];
  if (!paden.length) return;
  const r = await fetch('/verplaats', {{
    method: 'POST',
    headers: {{'Content-Type': 'application/json'}},
    body: JSON.stringify({{paden, pad}})
  }});
  const d = await r.json();
  document.getElementById('status').textContent = d.bericht;
  if (d.jm) verversNav(d.jm);
  selectie.clear();
  updateSidebar();
  _verversTree();
  _herlaadHuidig();
}}

async function _sectionDrop(e, sectie) {{
  e.preventDefault();
  document.querySelectorAll('.ts-hdr.drag-over').forEach(r => r.classList.remove('drag-over'));
  if (!e.dataTransfer.types.includes('fc-map')) return;
  const vanPad = _dragMapPad; _dragMapPad = null;
  if (!vanPad) return;
  const naarRoot = sectie === 'datumloos' ? _datumloosDir : _archiefDir;
  if (!naarRoot) return;
  const r = await fetch('/verplaatsmap', {{
    method: 'POST',
    headers: {{'Content-Type': 'application/json'}},
    body: JSON.stringify({{van: vanPad, naar: naarRoot}})
  }});
  const d = await r.json();
  document.getElementById('status').textContent = d.bericht || d.fout || '';
  if (d.fout) alert('Fout: ' + d.fout);
  else _verversTree();
}}

// ── Mobiel: verplaats-picker ─────────────────────────────────────────────────
function updateMobielBar() {{
  const bar = document.getElementById('mobiel-verplaats-bar');
  if (!bar) return;
  const n = selectie.size;
  if (n === 0) {{ bar.classList.add('verborgen'); return; }}
  bar.classList.remove('verborgen');
  document.getElementById('mobiel-verplaats-lbl').textContent =
    t('mobiel_n_geselecteerd').replace('{{n}}', n);
}}

function _flattenBoom(boom, prefix, result) {{
  if (!boom) return;
  boom.forEach(n => {{
    const label = prefix ? prefix + ' \u203a ' + n.naam : n.naam;
    result.push({{label, pad: n.pad}});
    if (n.sub && n.sub.length) _flattenBoom(n.sub, label, result);
  }});
}}

function toggleExtraTools() {{
  document.getElementById('extra-tools-dropdown').classList.toggle('open');
}}
function sluitExtraTools() {{
  document.getElementById('extra-tools-dropdown').classList.remove('open');
}}

function toggleTreePanel() {{
  const panel = document.getElementById('left-panel');
  if (!panel) return;
  panel.classList.toggle('mob-open');
}}
document.addEventListener('click', function(e) {{
  const panel = document.getElementById('left-panel');
  if (panel && panel.classList.contains('mob-open') &&
      !panel.contains(e.target) &&
      !e.target.closest('#tree-toggle-btn')) {{
    panel.classList.remove('mob-open');
  }}
}});
document.addEventListener('click', e => {{
  if (!e.target.closest('#extra-tools-wrap')) sluitExtraTools();
}});

function toonMobielVerplaats() {{
  if (!selectie.size) return;
  const n = selectie.size;
  document.getElementById('mv-titel').textContent =
    t('mobiel_n_verplaatsen').replace('{{n}}', n);
  const lijst = [];
  if (_treeData) {{
    const arch = [];
    _flattenBoom(_treeData.archief_boom || [], '', arch);
    arch.forEach(i => lijst.push({{label: '\U0001F4C1 ' + i.label, pad: i.pad}}));
    const dl = [];
    _flattenBoom(_treeData.datumloos_boom || [], '', dl);
    dl.forEach(i => lijst.push({{label: '\U0001F4C2 ' + i.label, pad: i.pad}}));
  }}
  const lijstEl = document.getElementById('mobiel-verplaats-lijst');
  lijstEl.dataset.items = JSON.stringify(lijst);
  document.getElementById('mv-filter').value = '';
  _renderMobielLijst(lijst);
  document.getElementById('mobiel-verplaats-modal').style.display = 'flex';
}}

function _renderMobielLijst(items) {{
  const el = document.getElementById('mobiel-verplaats-lijst');
  if (!items.length) {{
    el.innerHTML = '<p style="color:#666;font-size:.8rem;padding:.5rem 0">' + t('mobiel_geen_mappen') + '</p>';
    return;
  }}
  el.innerHTML = items.map(item => {{
    const safePad   = item.pad.replace(/&/g,'&amp;').replace(/"/g,'&quot;');
    const safeLabel = item.label.replace(/</g,'&lt;').replace(/>/g,'&gt;');
    return `<div class="mv-item" data-pad="${{safePad}}">${{safeLabel}}</div>`;
  }}).join('');
  el.querySelectorAll('.mv-item').forEach(div => {{
    div.addEventListener('click', () => kiesMobielDoel(div.dataset.pad));
  }});
}}

function filterMobielVerplaats() {{
  const q = document.getElementById('mv-filter').value.toLowerCase();
  let items = [];
  try {{ items = JSON.parse(document.getElementById('mobiel-verplaats-lijst').dataset.items || '[]'); }} catch(_) {{}}
  _renderMobielLijst(q ? items.filter(i => i.label.toLowerCase().includes(q)) : items);
}}

async function kiesMobielDoel(pad) {{
  document.getElementById('mobiel-verplaats-modal').style.display = 'none';
  const paden = [...selectie.keys()];
  if (!paden.length) return;
  const r = await fetch('/verplaats', {{
    method: 'POST',
    headers: {{'Content-Type': 'application/json'}},
    body: JSON.stringify({{paden, pad}})
  }});
  const d = await r.json();
  document.getElementById('status').textContent = d.bericht;
  if (d.jm) verversNav(d.jm);
  selectie.clear();
  updateSidebar();
  _verversTree();
  _herlaadHuidig();
}}

const MAANDEN_NL = ['januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december'];
function formatDag(ddmmyyyy) {{
  const [d,m,y] = ddmmyyyy.split('-');
  return `${{parseInt(d)}} ${{MAANDEN_NL[parseInt(m)-1]}} ${{y}}`;
}}

function verversNav(jm) {{
  // Ververst alleen de in-behandeling-sectie van de boom
  if (!jm) return;
  _renderMaandBoom(jm);
}}

async function bladernInMap(pad) {{
  document.getElementById('left-panel')?.classList.remove('mob-open');
  huidigePad   = pad;
  huidigeMaand = null;
  document.querySelectorAll('.maand-rij').forEach(r => r.classList.remove('actief'));
  document.querySelectorAll('.boom-naam').forEach(n => n.classList.remove('actief'));
  const node = [...document.querySelectorAll('.boom-node')].find(n => n.dataset.pad === pad);
  if (node) node.querySelector('.boom-naam').classList.add('actief');
  const inPb = _prullenbakDir && pad.startsWith(_prullenbakDir);
  document.getElementById('fotos-wrap').classList.toggle('prullenbak-modus', !!inPb);
  document.getElementById('status').textContent = t('status_huidig_map') + pad;
  updateSidebar();
  _toonLaden();
  let data;
  try {{
    const resp = await fetch('/fotos?pad=' + encodeURIComponent(pad));
    data = await resp.json();
  }} catch(e) {{
    _verbergLaden();
    document.getElementById('fotos').innerHTML = `<p style="color:#c66">Fout: ${{e.message}}</p>`;
    return;
  }}
  _verbergLaden();
  renderFotos(data.groepen || []);
}}

function _toonLaden() {{
  document.getElementById('fotos').innerHTML =
    '<div class="fotos-laden"><div class="fotos-laden-spinner"></div><span style="font-size:.8rem">' + t('status_laden') + '</span></div>';
  const wrap = document.getElementById('progress-wrap');
  wrap.style.display = 'block';
  wrap.classList.add('laden');
}}
function _verbergLaden() {{
  const wrap = document.getElementById('progress-wrap');
  wrap.classList.remove('laden');
}}

function _herlaadHuidig() {{
  if (huidigeMaand) laadMaand(huidigeMaand, null);
  else if (huidigePad) bladernInMap(huidigePad);
}}

// ── Activiteitslog (full-width) ───────────────────────────────────────────────
const recenteActiviteit = [];
function toggleActiviteit() {{
  const body  = document.getElementById('activiteit-body');
  const pijl  = document.getElementById('activiteit-pijl');
  const open = body.style.display === 'block';
  body.style.display = open ? 'none' : 'block';
  if (pijl) pijl.innerHTML = open ? '&#9658;' : '&#9660;';
}}

function voegActiviteitToe(bestanden) {{
  if (!bestanden || !bestanden.length) return;
  const nu = new Date().toLocaleTimeString('nl-NL', {{hour:'2-digit',minute:'2-digit'}});
  for (const b of bestanden) recenteActiviteit.unshift({{...b, ts: nu}});
  if (recenteActiviteit.length > 100) recenteActiviteit.length = 100;
  const el = document.getElementById('activiteit-lijst');
  if (!el) return;
  el.innerHTML = recenteActiviteit.map(b => {{
    const map = b.naar ? b.naar.split('/').slice(0, -1).join('/') : '';
    return `<div class="act-rij">
      <span class="act-ts">${{b.ts}}</span>
      <span class="act-naam"> ${{b.naam}}</span>
      <span class="act-naar"> → ${{map || b.naar || ''}}</span>
    </div>`;
  }}).join('');
  const cnt = document.getElementById('activiteit-count');
  if (cnt) cnt.textContent = '(' + recenteActiviteit.length + ')';
  // Open log
  const body = document.getElementById('activiteit-body');
  if (body && body.style.display !== 'block') toggleActiviteit();
}}

// ── Hernoemen ─────────────────────────────────────────────────────────────────
let _hernoemPad = null;

function toonHernoemModal(pad) {{
  _hernoemPad = pad;
  const naam = pad.split('/').pop();
  document.getElementById('hernoem-huidig').textContent = t('hernoem_huidig') + naam;
  const inp = document.getElementById('hernoem-naam');
  inp.value = naam;
  document.getElementById('hernoem-hint').textContent = '';
  document.getElementById('hernoem-ok').disabled = true;
  document.getElementById('hernoem-modal').style.display = 'flex';
  inp.focus(); inp.select();
}}

function sluitHernoemModal() {{
  document.getElementById('hernoem-modal').style.display = 'none';
  _hernoemPad = null;
}}

function valideerHernoem() {{
  const val = document.getElementById('hernoem-naam').value.trim();
  const huidig = _hernoemPad ? _hernoemPad.split('/').pop() : '';
  const hint = document.getElementById('hernoem-hint');
  const ok   = document.getElementById('hernoem-ok');
  if (!val || val === huidig) {{ hint.textContent = ''; ok.disabled = true; return; }}
  if (/[/\\\\:*?"<>|]/.test(val)) {{
    hint.textContent = t('hernoem_hint_ongeldig'); ok.disabled = true; return;
  }}
  hint.textContent = '';
  ok.disabled = false;
}}

async function bevestigHernoem() {{
  const nieuw = document.getElementById('hernoem-naam').value.trim();
  if (!nieuw || !_hernoemPad) return;
  const r = await fetch('/hernoem', {{
    method: 'POST',
    headers: {{'Content-Type': 'application/json'}},
    body: JSON.stringify({{pad: _hernoemPad, naam: nieuw}})
  }});
  const d = await r.json();
  sluitHernoemModal();
  if (d.fout) {{ alert('Fout: ' + d.fout); return; }}
  document.getElementById('status').textContent = t('hernoem_klaar') + nieuw;
  _verversTree();
  if (huidigePad && huidigePad.startsWith(_hernoemPad)) bladernInMap(d.nieuw_pad || huidigePad);
  else _herlaadHuidig();
}}

// ── Nieuwe map ────────────────────────────────────────────────────────────────
let _nieuweMapSectie = null;   // 'verwerkt' | 'datumloos' | null
let _nieuweMapOuder  = null;   // pad van oudermap of null

function toonNieuweMapModal(sectie, ouder) {{
  _nieuweMapSectie = sectie;
  _nieuweMapOuder  = ouder || null;
  const inp  = document.getElementById('nieuwmap-naam');
  const uitl = document.getElementById('nieuwmap-uitleg');
  let placeholder = '2026-04-02 Vakantie';
  if (sectie === 'datumloos' || (_nieuweMapOuder && _nieuweMapOuder.startsWith(_datumloosDir))) {{
    placeholder = t('nieuwmap_ph_datumloos');
    uitl.textContent = t('nieuwmap_uitleg_datumloos');
  }} else if (ouder) {{
    placeholder = t('nieuwmap_ph_submap');
    uitl.textContent = t('nieuwmap_uitleg_submap') + ouder;
  }} else {{
    uitl.textContent = t('nieuwmap_uitleg_datum');
  }}
  const aantalSel = selectie.size;
  document.getElementById('nieuwmap-titel').textContent =
    aantalSel > 0 ? t('nieuwmap_titel_met_fotos').replace('{{n}}', aantalSel) : t('nieuwmap_titel');
  document.getElementById('nieuwmap-ok').textContent =
    aantalSel > 0 ? t('nieuwmap_ok_verplaatsen') : t('nieuwmap_ok');
  inp.placeholder = placeholder || t('nieuwmap_ph_datum');

  // Datumrange voorvullen vanuit geselecteerde foto's (alleen voor verwerkt-sectie)
  const isDatumloosCtx = sectie === 'datumloos' ||
    (_nieuweMapOuder && _nieuweMapOuder.startsWith(_datumloosDir));
  let voorvul = '';
  if (!isDatumloosCtx && aantalSel > 0) {{
    const datums = [...document.querySelectorAll('.foto.geselecteerd[data-datum]')]
      .map(el => el.dataset.datum).filter(d => d && d.length === 10).sort();
    if (datums.length) {{
      const eerste = datums[0];
      const laatste = datums[datums.length - 1];
      voorvul = eerste === laatste ? eerste + ' ' : eerste + ' - ' + laatste + ' ';
    }}
  }}
  inp.value = voorvul;
  document.getElementById('nieuwmap-hint').textContent = '';
  document.getElementById('nieuwmap-ok').disabled = true;
  document.getElementById('nieuwmap-modal').style.display = 'flex';
  // Cursor aan het einde plaatsen
  inp.focus();
  inp.setSelectionRange(inp.value.length, inp.value.length);
  if (voorvul) valideerNieuweMap();
}}

function sluitNieuweMapModal() {{
  document.getElementById('nieuwmap-modal').style.display = 'none';
  _nieuweMapSectie = null; _nieuweMapOuder = null;
}}

function valideerNieuweMap() {{
  const val  = document.getElementById('nieuwmap-naam').value.trim();
  const hint = document.getElementById('nieuwmap-hint');
  const staat = document.getElementById('nieuwmap-staat');
  const ok   = document.getElementById('nieuwmap-ok');
  if (!val) {{ hint.textContent = ''; staat.className = 'album-staat'; ok.disabled = true; return; }}
  if (/[\\\\:*?"<>|]/.test(val)) {{
    hint.textContent = t('nieuwmap_hint_ongeldig'); staat.className = 'album-staat rood'; ok.disabled = true; return;
  }}
  const isDatumloos = _nieuweMapSectie === 'datumloos' ||
    (_nieuweMapOuder && _nieuweMapOuder.startsWith(_datumloosDir));
  if (!isDatumloos && !/^\d{{4}}-\d{{2}}-\d{{2}}/.test(val) && !_nieuweMapOuder) {{
    hint.textContent = t('nieuwmap_hint_geen_datum');
    staat.className = 'album-staat oranje';
  }} else {{
    hint.textContent = '';
    staat.className = 'album-staat groen';
  }}
  ok.disabled = false;
}}

async function bevestigNieuweMap() {{
  const naam = document.getElementById('nieuwmap-naam').value.trim();
  if (!naam) return;
  const paden = [...selectie.keys()];
  const r = await fetch('/maakmap', {{
    method: 'POST',
    headers: {{'Content-Type': 'application/json'}},
    body: JSON.stringify({{
      naam,
      sectie: _nieuweMapSectie,
      ouder: _nieuweMapOuder,
      paden: paden.length ? paden : []
    }})
  }});
  const d = await r.json();
  sluitNieuweMapModal();
  if (d.fout) {{ alert('Fout: ' + d.fout); return; }}
  document.getElementById('status').textContent = d.bericht;
  if (d.jm) verversNav(d.jm);
  if (paden.length) {{ selectie.clear(); updateSidebar(); _herlaadHuidig(); }}
  _verversTree();
}}

// ── Info-help ──────────────────────────────────────────────────────────────────
function _bouwInfoHelp() {{
  if (_lang === 'en') return `
    <div><strong style="color:#f90">Left panel (tree)</strong><br>
      Click a month or album to load its photos.<br>
      Double-click a folder name to rename it, or use the ✎ icon.<br>
      Drag a <em>folder</em> to another folder or section header to move it.<br>
      Use the <strong>+</strong> icon next to a section or folder to create a sub-folder.</div>
    <div><strong style="color:#f90">Selecting &amp; moving photos</strong><br>
      Click a thumbnail to select it. <strong>Shift+click</strong> for a range. <strong>☑ All</strong> selects all in the current view.<br>
      Drag selected photos to a folder in the tree — a tooltip shows the count.<br>
      <strong>⏳ Later</strong> moves the selection to the 'Review later' folder.</div>
    <div><strong style="color:#f90">New folder</strong><br>
      Click <strong>+</strong> next to a section or folder. If photos are selected they are moved there immediately.<br>
      <em>Archived (with date)</em>: start with a date, e.g. <code>2026-04-02 Holiday</code>.<br>
      <em>No date</em>: no date needed, e.g. <code>Marketplace/Crib</code>.</div>
    <div><strong style="color:#f90">Toolbar</strong><br>
      <strong>⚙ Presort</strong> — distributes photos from raw_data by month automatically.<br>
      <strong>🧹 Clean up</strong> — removes empty YYYY-MM folders from 'To sort'.<br>
      <strong>🗑 Cache</strong> — clears the thumbnail cache (useful after manual changes).<br>
      <strong>↺ Reset</strong> — recreates test data (deletes all files!).</div>
    <div><strong style="color:#f90">Burst groups</strong><br>
      Photos taken in quick succession are grouped. Click the label to open the lightbox for comparison.</div>
    <div><strong style="color:#f90">Colour codes (album input)</strong><br>
      <span style="color:#4c4">●</span> Green = valid format &nbsp;
      <span style="color:#f80">●</span> Orange = free text without date &nbsp;
      <span style="color:#c44">●</span> Red = invalid date</div>
    <div><strong style="color:#f90">Keyboard shortcuts (lightbox)</strong><br>
      ← → navigate &nbsp;·&nbsp; H = heart &nbsp;·&nbsp; Esc = close</div>`;
  return `
    <div><strong style="color:#f90">Linkerpaneel (boom)</strong><br>
      Klik op een maand of album om de foto's te laden.<br>
      Dubbelklik op een mapnaam om hem te hernoemen, of gebruik het ✎-icoon.<br>
      Sleep een <em>map</em> naar een andere map of sectie-header om hem te verplaatsen.<br>
      Gebruik het <strong>+</strong>-icoon naast een sectie of map voor een nieuwe submap.</div>
    <div><strong style="color:#f90">Foto's selecteren &amp; verplaatsen</strong><br>
      Klik op een thumbnail om te selecteren. <strong>Shift+klik</strong> voor bereik. <strong>☑ Alles</strong> selecteert alles in de huidige weergave.<br>
      Sleep geselecteerde foto's naar een map in de boom — een tooltip toont het aantal.<br>
      <strong>⏳ Later</strong> verplaatst de selectie naar de map 'Later uitzoeken'.</div>
    <div><strong style="color:#f90">Nieuwe map</strong><br>
      Klik <strong>+</strong> naast een sectie of map. Als foto's geselecteerd zijn worden ze er direct naartoe verplaatst.<br>
      <em>Verwerkt (met datum)</em>: begin met een datum, bijv. <code>2026-04-02 Vakantie</code>.<br>
      <em>Zonder datum</em>: geen datum nodig, bijv. <code>Marktplaats/Babybedje</code>.</div>
    <div><strong style="color:#f90">Werkbalk (boven het overzicht)</strong><br>
      <strong>⚙ Presort</strong> — verdeelt foto's uit ruwe_data automatisch op maand.<br>
      <strong>🧹 Opruimen</strong> — verwijdert lege YYYY-MM mappen uit 'In behandeling', zodat je weet welke periodes al afgehandeld zijn.<br>
      <strong>🗑 Cache</strong> — wist de thumbnail-cache (nuttig na handmatige wijzigingen).<br>
      <strong>↺ Reset</strong> — maakt testdata opnieuw aan (wist alle bestanden!).</div>
    <div><strong style="color:#f90">Burst-groepen</strong><br>
      Foto's die snel achter elkaar genomen zijn, worden gegroepeerd. Klik op het label om de lichtbak te openen voor vergelijking.</div>
    <div><strong style="color:#f90">Kleurcodes album-invoer</strong><br>
      <span style="color:#4c4">●</span> Groen = geldig formaat &nbsp;
      <span style="color:#f80">●</span> Oranje = vrije tekst zonder datum &nbsp;
      <span style="color:#c44">●</span> Rood = ongeldige datum</div>
    <div><strong style="color:#f90">Sneltoetsen (lichtbak)</strong><br>
      ← → bladeren &nbsp;·&nbsp; H = hartje &nbsp;·&nbsp; Esc = sluiten</div>`;
}}

function toonInfoHelp() {{
  const body = document.getElementById('info-help-body');
  if (body) body.innerHTML = _bouwInfoHelp();
  document.getElementById('info-help-modal').style.display = 'flex';
}}

async function laadMaand(maand, knop) {{
  document.getElementById('left-panel')?.classList.remove('mob-open');
  huidigeMaand = maand;
  huidigePad   = null;
  localStorage.setItem('fc_maand', maand);
  document.getElementById('status').textContent = '';
  document.querySelectorAll('.boom-naam').forEach(n => n.classList.remove('actief'));
  document.querySelectorAll('.maand-rij').forEach(r => r.classList.remove('actief'));
  // Activeer juiste rij in behandeling-boom
  const rij = document.getElementById('mr-' + maand) ||
              document.querySelector(`.maand-rij[data-maand="${{maand}}"]`);
  if (rij) {{
    rij.classList.add('actief');
    // Zorg dat het juiste jaar open staat
    const jaar = maand.slice(0, 4);
    _openJaar(jaar);
    // Zorg dat sectie open is
    const tsb = document.getElementById('tsb-behandeling');
    if (tsb && !tsb.classList.contains('open')) toggleTS('behandeling');
  }}
  _toonLaden();
  let data;
  try {{
    const resp = await fetch('/fotos?maand=' + maand);
    if (!resp.ok) throw new Error(`Server fout: ${{resp.status}}`);
    data = await resp.json();
  }} catch(e) {{
    _verbergLaden();
    document.getElementById('fotos').innerHTML = `<p style="color:#c66">${{t('status_fout_laden')}}${{e.message}}</p>`;
    return;
  }}
  _verbergLaden();
  renderFotos(data.groepen || []);
}}

function renderFotos(groepen) {{
  _laatsteKlik = null;
  const div = document.getElementById('fotos');
  if (!groepen.length) {{ div.innerHTML = "<p style='color:#666'>" + t('fotos_geen') + "</p>"; return; }}
  let html = '';
  huidigeGroepen = groepen;
  let huidigedag = null;
  groepen.forEach((g, gi) => {{
    const fotos = g.fotos;
    const type  = g.type;
    const dagDatum = fotos.length ? fotos[0].datum : null;
    if (dagDatum && dagDatum !== huidigedag) {{
      huidigedag = dagDatum;
      html += `<div class="dag-header">${{formatDag(dagDatum)}}</div>`;
    }}
    if (type === 'tight') {{
      const span = g.span_sec < 60 ? `${{g.span_sec}} ${{t('burst_sec')}}` : `${{Math.round(g.span_sec/60)}} ${{t('burst_min')}}`;
      const label = t('burst_tight').replace('{{n}}', fotos.length).replace('{{span}}', span);
      html += `<div class="burst tight"><div class="burst-label" onclick="openLightbox(${{gi}}, event)">${{label}}</div><div class="grid">`;
    }} else if (type === 'moment') {{
      const span = g.span_sec < 60 ? `${{g.span_sec}} ${{t('burst_sec')}}` : `${{Math.round(g.span_sec/60)}} ${{t('burst_min')}}`;
      const label = t('burst_moment').replace('{{n}}', fotos.length).replace('{{span}}', span);
      html += `<div class="burst moment"><div class="burst-label" onclick="openLightbox(${{gi}}, event)">${{label}}</div><div class="grid">`;
    }} else {{
      html += '<div class="grid" style="margin-bottom:8px">';
    }}
    fotos.forEach(f => {{
      const sel = selectie.has(f.rel) ? ' geselecteerd' : '';
      const thumbUrl = '/thumb?pad=' + encodeURIComponent(f.rel);
      const ext = f.naam.includes('.') ? f.naam.split('.').pop().toLowerCase() : '';
      html += `<div class="foto${{sel}}" draggable="true" data-pad="${{f.rel}}" data-naam="${{f.naam}}" data-thumb="${{thumbUrl}}" data-datum="${{f.datum_iso||''}}" data-datum-nl="${{f.datum||''}}" data-grootte="${{f.grootte||0}}" onclick="toggle(this,event)" ondragstart="fotoDragStart(event,this)">
        ${{ext ? `<span class="ext-badge">${{ext}}</span>` : ''}}
        <button class="foto-del" title="${{t('foto_prullenbak_title')}}" onclick="verwijderFoto(event,this)">×</button>
        <button class="foto-zoom" title="${{t('foto_zoom_title')}}" onclick="openFotoZoom(event,this)">⤢</button>
        <button class="foto-info-btn" title="Info" onclick="toonFotoInfo(event,this)">ℹ</button>
        <img src="${{thumbUrl}}" alt="${{f.naam}}" draggable="false">
        <div class="naam">${{f.naam}}</div>
        <div class="datum">${{f.datum}}${{f.tijdstip ? `<span class="foto-tijdstip">${{f.tijdstip}}</span>` : ''}}</div></div>`;
    }});
    html += '</div>';
    if (type !== 'los') html += '</div>';
  }});
  div.innerHTML = html;

  // Bladwijzer: herstel na page load
  if (_herstelde_anker) {{
    const anker = _herstelde_anker;
    _herstelde_anker = null;
    setTimeout(() => {{
      const el = [...div.querySelectorAll('.foto')].find(f => f.dataset.pad === anker);
      if (el) {{
        plaatsBladwijzer(el);
        el.scrollIntoView({{block: 'center', behavior: 'smooth'}});
      }}
    }}, 150);
  }}

  // Progress op basis van daadwerkelijk geladen thumbnails
  const imgs = [...div.querySelectorAll('img')];
  const totaal = imgs.length;
  if (!totaal) return;
  const wrap = document.getElementById('progress-wrap');
  const bar = document.getElementById('progress');
  let geladen = 0;
  wrap.style.display = 'block';
  bar.style.width = '0%';
  function tick() {{
    geladen++;
    bar.style.width = Math.round(geladen / totaal * 100) + '%';
    if (geladen >= totaal) setTimeout(() => {{ wrap.style.display = 'none'; bar.style.width = '0%'; }}, 300);
  }}
  imgs.forEach(img => {{
    if (img.complete) {{ tick(); }} else {{ img.addEventListener('load', tick); img.addEventListener('error', tick); }}
  }});
}}

let _laatsteKlik = null;

function toggle(el, e) {{
  const pad = el.dataset.pad;
  const allesFotos = [...document.querySelectorAll('.foto')];

  if (e && e.shiftKey && _laatsteKlik && _laatsteKlik !== el) {{
    // Selecteer bereik tussen _laatsteKlik en el
    const van = allesFotos.indexOf(_laatsteKlik);
    const tot = allesFotos.indexOf(el);
    const [begin, eind] = van < tot ? [van, tot] : [tot, van];
    const aanzetten = !el.classList.contains('geselecteerd');
    allesFotos.slice(begin, eind + 1).forEach(f => {{
      if (aanzetten) {{
        f.classList.add('geselecteerd');
        selectie.set(f.dataset.pad, {{ naam: f.dataset.naam, thumb: f.dataset.thumb }});
      }} else {{
        f.classList.remove('geselecteerd');
        selectie.delete(f.dataset.pad);
      }}
    }});
  }} else {{
    if (el.classList.toggle('geselecteerd')) {{
      selectie.set(pad, {{ naam: el.dataset.naam, thumb: el.dataset.thumb }});
    }} else {{
      selectie.delete(pad);
    }}
  }}

  _laatsteKlik = el;
  updateSidebar();
}}

function deselecteer(pad) {{
  selectie.delete(pad);
  const el = document.querySelector(`.foto[data-pad="${{pad}}"]`);
  if (el) el.classList.remove('geselecteerd');
  updateSidebar();
}}

function updateSidebar() {{
  const sb  = document.getElementById('sidebar');
  const btn = document.getElementById('btn-verwijder');
  const n   = selectie.size;
  const inPb = huidigePad && _prullenbakDir && huidigePad.startsWith(_prullenbakDir);
  if (btn) {{
    btn.disabled = n === 0 || !!inPb;
    btn.textContent = '\U0001F5D1 ' + t('btn_verwijder') + (n > 0 ? ' (' + n + ')' : '');
  }}
  updateMobielBar();
  if (n === 0) {{
    sb.innerHTML = '<h3>' + t('sidebar_title') + '</h3><p class="sb-leeg">' + t('sidebar_leeg') + '</p>';
    return;
  }}
  let html = '<h3>' + t('sidebar_title') + ' (' + n + ')</h3>';
  for (const [pad, {{naam, thumb}}] of selectie) {{
    const safePad = pad.replace(/&/g,'&amp;').replace(/"/g,'&quot;');
    html += `<div class="sb-item">
      <img class="sb-thumb" src="${{thumb}}" alt="">
      <span class="sb-naam" title="${{naam}}">${{naam}}</span>
      <button type="button" class="sb-x" data-pad="${{safePad}}">✕</button>
    </div>`;
  }}
  sb.innerHTML = html;
  sb.querySelectorAll('.sb-x').forEach(btn => {{
    btn.addEventListener('click', () => deselecteer(btn.dataset.pad));
  }});
}}

async function verwijderSelectie() {{
  const paden = [...selectie.keys()];
  if (!paden.length) return;
  const n = paden.length;
  if (!confirm(t('confirm_pb').replace('{{n}}', n))) return;
  const r = await fetch('/prullenbak', {{
    method: 'POST',
    headers: {{'Content-Type': 'application/json'}},
    body: JSON.stringify({{paden, submap: 'losse_items'}})
  }});
  const d = await r.json();
  document.getElementById('status').textContent = t('status_naar_pb').replace('{{n}}', d.verplaatst || 0);
  if (d.jm) verversNav(d.jm);
  selectie.clear();
  updateSidebar();
  _verversTree();
  _herlaadHuidig();
}}

function allesToggle() {{
  const alle = [...document.querySelectorAll('.foto')];
  const aanZetten = alle.some(e => !e.classList.contains('geselecteerd'));
  alle.forEach(e => {{
    e.classList.toggle('geselecteerd', aanZetten);
    const pad = e.dataset.pad;
    if (aanZetten) selectie.set(pad, {{ naam: e.dataset.naam, thumb: e.dataset.thumb }});
    else selectie.delete(pad);
  }});
  updateSidebar();
}}

async function bewaarLater() {{
  if (!selectie.size) {{ alert(t('alert_selecteer_eerst')); return; }}
  const paden = [...selectie.keys()];
  const laterPad = (_uitzoeken ? _uitzoeken + '/Later uitzoeken' : 'Later uitzoeken');
  const r = await fetch('/verplaats', {{method:'POST', headers:{{'Content-Type':'application/json'}}, body:JSON.stringify({{paden, pad:laterPad}})}});
  const d = await r.json();
  document.getElementById('status').textContent = d.bericht;
  if (d.jm) verversNav(d.jm);
  selectie.clear();
  updateSidebar();
  _verversTree();
  _herlaadHuidig();
}}

let _infoPad = null;

function _infoRij(lbl, val) {{
  return `<div class="info-rij"><span class="info-lbl">${{lbl}}</span><span class="info-val">${{val}}</span></div>`;
}}

async function toonFotoInfo(e, btn) {{
  e.stopPropagation();
  const rel = btn.closest('.foto').dataset.pad;
  const panel = document.getElementById('info-panel');
  if (_infoPad === rel && panel.style.display !== 'none') {{
    sluitInfoPanel(); return;
  }}
  _infoPad = rel;
  // Positioneer naast de knop
  const rect = btn.getBoundingClientRect();
  const px = Math.min(rect.right + 8, window.innerWidth - 286);
  const py = Math.max(rect.top, 8);
  panel.style.left = px + 'px';
  panel.style.top  = py + 'px';
  panel.style.display = 'block';
  document.getElementById('info-naam').textContent = rel.split('/').pop();
  document.getElementById('info-inhoud').innerHTML = '<span style="color:#555">' + t('status_laden') + '</span>';
  document.getElementById('info-kaart').style.display = 'none';
  try {{
    const d = await (await fetch('/info?pad=' + encodeURIComponent(rel))).json();
    let html = '';
    html += _infoRij(t('info_lbl_map'), d.map || '—');
    html += _infoRij(t('info_lbl_datum'), d.datum || '—');
    html += _infoRij(t('info_lbl_grootte'), fmtBytes(d.grootte));
    if (d.gps) {{
      const osmUrl = `https://www.openstreetmap.org/?mlat=${{d.gps.lat}}&mlon=${{d.gps.lng}}#map=15/${{d.gps.lat}}/${{d.gps.lng}}`;
      html += _infoRij('GPS', `<a href="${{osmUrl}}" target="_blank" style="color:#4a8abf">${{d.gps.lat}}, ${{d.gps.lng}}</a>`);
    }}
    if (d.locatie) html += _infoRij(t('info_lbl_locatie'), d.locatie);
    document.getElementById('info-inhoud').innerHTML = html || '<span style="color:#555">' + t('info_geen') + '</span>';
    if (d.gps) {{
      const kaart = document.getElementById('info-kaart');
      const b = 0.008;
      kaart.src = `https://www.openstreetmap.org/export/embed.html?bbox=${{d.gps.lng-b}},${{d.gps.lat-b}},${{d.gps.lng+b}},${{d.gps.lat+b}}&layer=mapnik&marker=${{d.gps.lat}},${{d.gps.lng}}`;
      kaart.style.display = 'block';
    }}
  }} catch(_) {{
    document.getElementById('info-inhoud').innerHTML = '<span style="color:#c66">' + t('info_fout') + '</span>';
  }}
}}

function sluitInfoPanel() {{
  document.getElementById('info-panel').style.display = 'none';
  _infoPad = null;
}}

document.addEventListener('click', function(e) {{
  const panel = document.getElementById('info-panel');
  if (panel && panel.style.display !== 'none' &&
      !panel.contains(e.target) && !e.target.closest('.foto-info-btn')) {{
    sluitInfoPanel();
  }}
}});

async function verwijderFoto(e, btn) {{
  e.stopPropagation();
  const el = btn.closest('.foto');
  const rel = el.dataset.pad;
  el.style.opacity = '.3';
  el.style.pointerEvents = 'none';
  const r = await fetch('/prullenbak', {{
    method: 'POST',
    headers: {{'Content-Type': 'application/json'}},
    body: JSON.stringify({{paden: [rel], submap: 'losse_items'}})
  }});
  const d = await r.json();
  el.remove();
  selectie.delete(rel);
  updateSidebar();
  if (d.jm) verversNav(d.jm);
}}

function toonVoortgang(d) {{
  const modal = document.getElementById('reset-modal');
  if (modal.style.display !== 'none') {{
    // Reset bezig — toon in modal
    document.getElementById('reset-keuze').style.display = 'none';
    document.getElementById('reset-voortgang').style.display = '';
    const pct = d.totaal > 0 ? Math.round(d.stap / d.totaal * 100) : 0;
    document.getElementById('reset-balk').style.width = pct + '%';
    document.getElementById('reset-fase-label').textContent =
      (d.fase === 'download' ? t('progress_downloaden') : t('progress_presorteren')) + ` (${{d.stap}}/${{d.totaal}})`;
    document.getElementById('reset-bericht').textContent = d.bericht || '';
  }} else {{
    // Standalone presort — toon in voortgangsbalk bovenin
    const pct = d.totaal > 0 ? Math.round(d.stap / d.totaal * 100) : 0;
    document.getElementById('progress').style.width = pct + '%';
    document.getElementById('status').textContent = t('progress_presorteren') + `: ${{d.stap}}/${{d.totaal}} — ${{d.bericht}}`;
  }}
}}

function resetTest() {{
  document.getElementById('reset-keuze').style.display = '';
  document.getElementById('reset-voortgang').style.display = 'none';
  document.getElementById('reset-modal').style.display = 'flex';
}}

async function resetTestBevestigd() {{
  const aantal = parseInt(document.getElementById('reset-aantal').value);
  document.getElementById('fotos').innerHTML = '';
  selectie.clear();
  updateSidebar();
  huidigeMaand = null;
  await fetch('/reset', {{
    method: 'POST',
    headers: {{'Content-Type': 'application/json'}},
    body: JSON.stringify({{aantal}})
  }});
  // Wacht op reset_klaar via SSE — modal blijft open en toont voortgang
}}

async function presortRun() {{
  document.getElementById('progress').style.width = '0%';
  document.getElementById('status').textContent = t('status_presort_start');
  await fetch('/presort', {{method: 'POST'}});
}}

async function clearThumbs() {{
  document.getElementById('status').textContent = t('status_cache_wissen');
  const r = await fetch('/clearthumbs', {{method: 'POST'}});
  const d = await r.json();
  document.getElementById('status').textContent = d.ok ? t('status_cache_gewist') : t('status_cache_fout');
}}

async function opruimLege() {{
  const r = await fetch('/opruim-check');
  const d = await r.json();
  if (!d.mappen || !d.mappen.length) {{
    document.getElementById('status').textContent = 'Geen lege mappen gevonden.';
    return;
  }}
  document.getElementById('opruim-lijst').innerHTML =
    d.mappen.map(m => `<div style="padding:2px 0;color:#9cf">&#128193; ${{m}}</div>`).join('');
  document.getElementById('opruim-modal').style.display = 'flex';
}}

async function bevestigOpruim() {{
  document.getElementById('opruim-modal').style.display = 'none';
  const r = await fetch('/opruim', {{method: 'POST'}});
  const d = await r.json();
  document.getElementById('status').textContent = d.bericht;
  if (d.verwijderd > 0) {{ verversNav(d.jm || {{}}); _verversTree(); }}
}}

// ── Zoom-knop → lightbox ─────────────────────────────────────────────────────
function openFotoZoom(e, btn) {{
  e.stopPropagation();
  const el = btn.closest('.foto');
  lb_groep = [{{
    rel:     el.dataset.pad,
    naam:    el.dataset.naam,
    datum:   el.dataset.datumNl || el.dataset.datum || '',
    grootte: parseInt(el.dataset.grootte || '0'),
  }}];
  lb_index = 0;
  lb_hartjes.clear();
  document.getElementById('lb').style.display = 'flex';
  document.body.style.overflow = 'hidden';
  renderLightbox();
}}

// ── Lightbox ──────────────────────────────────────────────────────────────────
let huidigeGroepen = [];   // wordt gezet in renderFotos
let lb_groep = [];         // fotos in huidige lightbox
let lb_index = 0;          // startindex huidige pagina
const lb_hartjes = new Set(); // rel-paden met hartje

function lbPerPagina() {{ return window.innerWidth < 600 ? 1 : 2; }}

function fmtBytes(b) {{
  if (b < 1024) return b + ' B';
  if (b < 1024*1024) return (b/1024).toFixed(0) + ' KB';
  return (b/1024/1024).toFixed(1) + ' MB';
}}

function openLightbox(gi, evt) {{
  evt.stopPropagation();
  lb_groep = huidigeGroepen[gi].fotos;
  lb_index = 0;
  lb_hartjes.clear();
  document.getElementById('lb').style.display = 'flex';
  document.body.style.overflow = 'hidden';
  renderLightbox();
}}

function sluitLightbox() {{
  document.getElementById('lb').style.display = 'none';
  document.body.style.overflow = '';
}}

function lbStap(richting) {{
  const pp = lbPerPagina();
  const nieuw = lb_index + richting * pp;
  if (nieuw < 0 || nieuw >= lb_groep.length) return;
  lb_index = nieuw;
  renderLightbox();
}}

function lbToggleHart(rel) {{
  if (lb_hartjes.has(rel)) lb_hartjes.delete(rel);
  else lb_hartjes.add(rel);
  renderLightbox();
}}

function renderLightbox() {{
  const pp = lbPerPagina();
  const totaal = lb_groep.length;
  const fotos = lb_groep.slice(lb_index, lb_index + pp);
  const eind = Math.min(lb_index + pp, totaal);

  document.getElementById('lb-teller').textContent =
    `foto ${{lb_index + 1}}–${{eind}} van ${{totaal}}`;

  // Foto-panelen
  const wrap = document.getElementById('lb-fotos');
  wrap.innerHTML = fotos.map(f => {{
    const metHart = lb_hartjes.has(f.rel);
    const hartKls = metHart ? ' actief' : '';
    const imgKls  = metHart ? ' met-hart' : '';
    const fullUrl = '/full?pad=' + encodeURIComponent(f.rel);
    return `<div class="lb-foto-wrap">
      <img src="${{fullUrl}}" class="${{imgKls}}" onclick="lbToggleHart('${{f.rel.replace(/'/g,"\\\\'")}}')" title="Klik of H voor hartje">
      <div class="lb-foto-info">
        <span>${{f.naam}}<br><span style="color:#666">${{f.datum}} · ${{fmtBytes(f.grootte)}}</span></span>
        <button type="button" class="lb-hart${{hartKls}}" onclick="lbToggleHart('${{f.rel.replace(/'/g,"\\\\'")}}')" title="H">❤</button>
      </div>
    </div>`;
  }}).join('');

  // Navigatie
  document.getElementById('lb-prev').disabled = lb_index <= 0;
  document.getElementById('lb-next').disabled = lb_index + pp >= totaal;

  // Info + bevestig-knop
  const bewaard = lb_hartjes.size;
  const weg     = totaal - bewaard;
  document.getElementById('lb-info').textContent =
    bewaard > 0
      ? t('lb_bewaard').replace('{{b}}', bewaard).replace('{{w}}', weg)
      : '';
  document.getElementById('lb-bevestig').disabled = bewaard === 0;
}}

async function bevestigLightbox() {{
  const bewaard  = new Set(lb_hartjes);
  const weg      = lb_groep.map(f => f.rel).filter(r => !bewaard.has(r));
  if (weg.length > 0) {{
    const resp = await fetch('/prullenbak', {{
      method: 'POST',
      headers: {{'Content-Type': 'application/json'}},
      body: JSON.stringify({{paden: weg, submap: 'duplicaten'}})
    }});
    const d = await resp.json();
    if (d.jm) verversNav(d.jm);
    _verversTree();
  }}
  sluitLightbox();
  _herlaadHuidig();
}}

// Toetsenbord
document.addEventListener('keydown', e => {{
  if (document.getElementById('lb').style.display !== 'flex') return;
  if (e.key === 'ArrowLeft')  {{ lbStap(-1); e.preventDefault(); }}
  if (e.key === 'ArrowRight') {{ lbStap(1);  e.preventDefault(); }}
  if (e.key === 'Escape') sluitLightbox();
  if (e.key === 'h' || e.key === 'H') {{
    // Hart geven aan alle zichtbare foto's op huidige pagina
    const pp = lbPerPagina();
    lb_groep.slice(lb_index, lb_index + pp).forEach(f => lb_hartjes.add(f.rel));
    renderLightbox();
  }}
}});

// Swipe (mobiel)
(function() {{
  let tx = 0;
  const el = document.getElementById('lb');
  el.addEventListener('touchstart', e => {{ tx = e.touches[0].clientX; }}, {{passive:true}});
  el.addEventListener('touchend', e => {{
    const dx = e.changedTouches[0].clientX - tx;
    if (Math.abs(dx) > 50) lbStap(dx < 0 ? 1 : -1);
  }}, {{passive:true}});
}})();

// Breedte slider + persistence
function sliderVerander(val) {{
  document.documentElement.style.setProperty('--foto-breedte', val + 'px');
  document.getElementById('breedte-label').textContent = val + 'px';
  const ddLbl = document.getElementById('breedte-label-dd');
  if (ddLbl) ddLbl.textContent = val + 'px';
  localStorage.setItem('fc_breedte', val);
}}
(function() {{
  const opgeslagen = localStorage.getItem('fc_breedte');
  if (opgeslagen) {{
    const s = document.getElementById('breedte-slider');
    const sd = document.getElementById('breedte-slider-dd');
    if (s) {{ s.value = opgeslagen; }}
    if (sd) {{ sd.value = opgeslagen; }}
    sliderVerander(opgeslagen);
  }}
}})();

// ── Resizable left-panel ──────────────────────────────────────────────────────
(function() {{
  const resizer = document.getElementById('left-resizer');
  const panel   = document.getElementById('left-panel');
  if (!resizer || !panel) return;
  const LS_KEY = 'fc_left_w';
  const opgeslagenW = localStorage.getItem(LS_KEY);
  const _mq = window.matchMedia('(max-width:700px)');
  if (opgeslagenW && !_mq.matches) document.documentElement.style.setProperty('--left-w', opgeslagenW + 'px');
  _mq.addEventListener('change', e => {{
    if (e.matches) {{
      document.documentElement.style.removeProperty('--left-w');
    }} else {{
      const saved = localStorage.getItem(LS_KEY);
      if (saved) document.documentElement.style.setProperty('--left-w', saved + 'px');
    }}
  }});
  let startX, startW;
  resizer.addEventListener('mousedown', e => {{
    startX = e.clientX;
    startW = panel.offsetWidth;
    resizer.classList.add('dragging');
    document.addEventListener('mousemove', onMove);
    document.addEventListener('mouseup', onUp);
    e.preventDefault();
  }});
  function onMove(e) {{
    const w = Math.max(140, Math.min(520, startW + e.clientX - startX));
    document.documentElement.style.setProperty('--left-w', w + 'px');
  }}
  function onUp() {{
    resizer.classList.remove('dragging');
    document.removeEventListener('mousemove', onMove);
    document.removeEventListener('mouseup', onUp);
    localStorage.setItem(LS_KEY, panel.offsetWidth);
  }}
}})();

// Bladwijzer
function plaatsBladwijzer(el) {{
  document.querySelectorAll('.bladwijzer').forEach(b => b.remove());
  const fotos = document.getElementById('fotos');
  let node = el;
  while (node.parentElement && node.parentElement !== fotos) node = node.parentElement;
  const bw = document.createElement('div');
  bw.className = 'bladwijzer';
  bw.textContent = 'hier gebleven';
  fotos.insertBefore(bw, node);
}}

// Scroll positie + anker opslaan
let _scrollTimer = null;
document.addEventListener('scroll', (ev) => {{
  if (!ev.target.closest || !ev.target.closest('#fotos')) return;
  clearTimeout(_scrollTimer);
  _scrollTimer = setTimeout(() => {{
    if (!huidigeMaand) return;
    const eerst = [...document.querySelectorAll('.foto')].find(f => f.getBoundingClientRect().bottom > 80);
    if (eerst) localStorage.setItem('fc_anker', eerst.dataset.pad);
  }}, 600);
}}, {{passive: true, capture: true}});

// Tree laden bij start + herstel sessie
laadTree(true).then(() => {{
  const maand = localStorage.getItem('fc_maand');
  if (maand) laadMaand(maand, null);
}});

// SSE live updates
(function() {{
  function verbind() {{
    const es = new EventSource('/events');
    es.addEventListener('message', function(e) {{
      try {{
        const d = JSON.parse(e.data);
        if (d.type === 'update') {{
          if (d.jm) verversNav(d.jm);
          if (d.bestanden && d.bestanden.length) voegActiviteitToe(d.bestanden);
          if (huidigeMaand) laadMaand(huidigeMaand, null);
        }} else if (d.type === 'progress') {{
          toonVoortgang(d);
        }} else if (d.type === 'reset_klaar') {{
          location.reload();
        }} else if (d.type === 'reset_fout') {{
          document.getElementById('reset-fase-label').textContent = 'Fout!';
          document.getElementById('reset-bericht').textContent = d.bericht || 'Onbekende fout.';
          document.getElementById('reset-bericht').style.color = '#f66';
        }} else if (d.type === 'presort_klaar') {{
          document.getElementById('progress').style.width = '0%';
          document.getElementById('status').textContent = t('status_presort_klaar');
          if (d.jm) verversNav(d.jm);
          _verversTree();
        }} else if (d.type === 'presort_fout') {{
          document.getElementById('progress').style.width = '0%';
          document.getElementById('status').textContent = t('status_presort_fout') + (d.bericht || '?');
        }}
      }} catch(_) {{}}
    }});
    es.addEventListener('error', function() {{ es.close(); setTimeout(verbind, 5000); }});
  }}
  verbind();
}})();

// ── Vertaalsysteem ────────────────────────────────────────────────────────────
const _tlCache = {{}};
let _lang = localStorage.getItem('lang') || 'nl';

function t(key) {{
  return (_tlCache[_lang] && _tlCache[_lang][key] !== undefined)
    ? _tlCache[_lang][key] : key;
}}

async function _loadLang(code) {{
  if (_tlCache[code]) return;
  try {{
    const r = await fetch('/lang/' + code + '.json');
    if (r.ok) _tlCache[code] = await r.json();
  }} catch(_) {{}}
}}

function applyTranslations() {{
  const tr = _tlCache[_lang] || {{}};
  document.querySelectorAll('[data-i18n]').forEach(el => {{
    const v = tr[el.dataset.i18n];
    if (v !== undefined) el.textContent = v;
  }});
  document.querySelectorAll('[data-i18n-title]').forEach(el => {{
    const v = tr[el.dataset.i18nTitle];
    if (v !== undefined) el.title = v;
  }});
  document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {{
    const v = tr[el.dataset.i18nPlaceholder];
    if (v !== undefined) el.placeholder = v;
  }});
  document.querySelectorAll('.lang-btn').forEach(btn => {{
    btn.classList.toggle('active', btn.dataset.lang === _lang);
  }});
  const _ihb = document.getElementById('info-help-body');
  if (_ihb && document.getElementById('info-help-modal').style.display !== 'none') {{
    _ihb.innerHTML = _bouwInfoHelp();
  }}
  updateMobielBar();
  updateSidebar();
}}

async function setLang(code) {{
  _lang = code;
  localStorage.setItem('lang', code);
  await _loadLang(code);
  applyTranslations();
}}

(async function() {{
  await _loadLang(_lang);
  applyTranslations();
}})();

// ── Mobiel: toolbar verbergen bij scrollen ────────────────────────────────────
(function() {{
  const mq = window.matchMedia('(max-width:700px)');
  let lastY = 0, ticking = false;

  function setToolbarH(bar) {{
    const h = bar ? bar.offsetHeight : 46;
    document.documentElement.style.setProperty('--mob-tb-top', h + 'px');
  }}

  function onScroll() {{
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(function() {{
      if (mq.matches) {{
        const y = window.scrollY;
        const bar = document.querySelector('.toolbar');
        if (bar) {{
          if (y > lastY + 4 && y > 60) {{
            bar.classList.add('mob-verborgen');
            document.documentElement.style.setProperty('--mob-tb-top', '0px');
          }} else if (y < lastY - 2) {{
            bar.classList.remove('mob-verborgen');
            setToolbarH(bar);
          }}
        }}
        lastY = y;
      }}
      ticking = false;
    }});
  }}

  window.addEventListener('scroll', onScroll, {{passive: true}});

  function init() {{
    if (mq.matches) setToolbarH(document.querySelector('.toolbar'));
  }}
  if (document.readyState === 'loading') {{
    document.addEventListener('DOMContentLoaded', init);
  }} else {{
    init();
  }}
  mq.addEventListener('change', function(e) {{
    if (!e.matches) {{
      document.querySelector('.toolbar')?.classList.remove('mob-verborgen');
      document.documentElement.style.removeProperty('--mob-tb-top');
    }} else {{
      setToolbarH(document.querySelector('.toolbar'));
    }}
  }});
}})();

// ── Systeemstatus (health check) ──────────────────────────────────────────────
async function toonHealth() {{
  const modal = document.getElementById('health-modal');
  modal.style.display = 'flex';
  await refreshHealth();
}}

async function refreshHealth() {{
  const lijst = document.getElementById('health-lijst');
  lijst.innerHTML = '<div class="health-rij"><span class="health-icon" style="color:#555">⏳</span><span class="health-lbl" style="color:#444">…</span></div>';
  const btn = document.getElementById('health-refresh-btn');
  btn.disabled = true;
  try {{
    const r = await fetch('/healthcheck');
    const data = await r.json();
    renderHealthChecks(data.checks);
  }} catch(e) {{
    lijst.innerHTML = '<div style="color:#f66;font-size:.78rem;padding:.5rem">Fout bij ophalen status.</div>';
  }} finally {{
    btn.disabled = false;
  }}
}}

function renderHealthChecks(checks) {{
  const icons = {{ok:'✅', warn:'⚠️', error:'❌', info:'ℹ️'}};
  const detCls = {{ok:'det-ok', warn:'det-warn', error:'det-err', info:'det-info'}};
  const lijst = document.getElementById('health-lijst');
  lijst.innerHTML = checks.map(c => {{
    const icon  = icons[c.status]  || 'ℹ️';
    const cls   = detCls[c.status] || 'det-info';
    const label = t(c.label_key)  || c.label_key;
    const det   = t(c.detail_key) || c.detail_key;
    const valHtml = c.value
      ? `<span class="health-val">${{c.value}}</span>`
      : '';
    return `<div class="health-rij">
      <span class="health-icon">${{icon}}</span>
      <span class="health-lbl">${{label}}${{valHtml}}</span>
      <span class="health-det ${{cls}}">${{det}}</span>
    </div>`;
  }}).join('');
}}

async function restartServer() {{
  const btn = document.getElementById('health-restart-btn');
  btn.disabled = true;
  btn.textContent = t('health_restarting');
  try {{
    await fetch('/restart', {{method: 'POST'}});
    document.getElementById('health-lijst').innerHTML =
      '<div style="color:#8f8;font-size:.78rem;padding:.5rem">↺ Server herstart… pagina wordt opnieuw geladen.</div>';
    setTimeout(() => location.reload(), 2800);
  }} catch(_) {{
    btn.disabled = false;
    btn.textContent = t('health_restart');
  }}
}}
</script>
</body>
</html>"""

    class Handler(BaseHTTPRequestHandler):
        def log_message(self, *_): pass

        def send_json(self, data, code=200):
            body = _json.dumps(data).encode()
            self.send_response(code)
            self.send_header("Content-Type", "application/json")
            self.send_header("Content-Length", len(body))
            self.end_headers()
            self.wfile.write(body)

        def do_GET(self):
            parsed = urlparse(self.path)

            if parsed.path == "/info":
                params = parse_qs(parsed.query)
                rel = params.get("pad", [""])[0]
                try:
                    pad = (BASE_DIR / rel).resolve()
                    if not pad.is_relative_to(BASE_DIR.resolve()) or not pad.is_file():
                        self.send_json({"fout": "niet gevonden"}, 404); return
                except Exception:
                    self.send_json({"fout": "ongeldig pad"}, 400); return
                stat = pad.stat()
                datum = lees_datum(pad)
                gps = _lees_gps(pad)
                locatie = _reverse_geocode(gps['lat'], gps['lng']) if gps else None
                self.send_json({
                    "map": str(pad.parent.relative_to(BASE_DIR)),
                    "grootte": stat.st_size,
                    "datum": datum.strftime("%d-%m-%Y %H:%M"),
                    "gps": gps,
                    "locatie": locatie,
                })
                return

            if parsed.path == "/thumb":
                params = parse_qs(parsed.query)
                rel = params.get("pad", [""])[0]
                try:
                    pad = (BASE_DIR / rel).resolve()
                    if not pad.is_relative_to(BASE_DIR.resolve()):
                        raise ValueError("Pad buiten BASE_DIR")
                except (ValueError, OSError):
                    self.send_response(403); self.end_headers(); return
                if not pad.exists() or not pad.is_file():
                    self.send_response(404); self.end_headers(); return
                data = get_thumbnail(pad)
                self.send_response(200)
                self.send_header("Content-Type", "image/jpeg")
                self.send_header("Content-Length", len(data))
                self.send_header("Cache-Control", "public, max-age=86400")
                self.end_headers()
                self.wfile.write(data)
                return

            if parsed.path == "/full":
                params = parse_qs(parsed.query)
                rel = params.get("pad", [""])[0]
                try:
                    pad = (BASE_DIR / rel).resolve()
                    if not pad.is_relative_to(BASE_DIR.resolve()):
                        raise ValueError("Pad buiten BASE_DIR")
                except (ValueError, OSError):
                    self.send_response(403); self.end_headers(); return
                if not pad.exists() or not pad.is_file():
                    self.send_response(404); self.end_headers(); return
                # Serveer origineel, converteer non-JPEG naar JPEG via Pillow/rawpy
                ext = pad.suffix.lower()
                if ext in ('.jpg', '.jpeg'):
                    data = pad.read_bytes()
                elif ext == '.arw' and HAS_RAWPY:
                    # ARW: extraheer ingebedde JPEG-preview op maximale grootte
                    try:
                        import io as _io
                        with _rawpy.imread(str(pad)) as raw:
                            thumb = raw.extract_thumb()
                        if thumb.format.name == 'JPEG':
                            data = thumb.data
                        elif thumb.format.name == 'BITMAP':
                            img = Image.fromarray(thumb.data).convert("RGB")
                            buf = _io.BytesIO()
                            img.save(buf, format="JPEG", quality=92)
                            data = buf.getvalue()
                        else:
                            data = _maak_placeholder(pad.name)
                    except Exception:
                        data = _maak_placeholder(pad.name)
                else:
                    try:
                        import io as _io
                        img = Image.open(pad)
                        from PIL import ImageOps
                        img = ImageOps.exif_transpose(img).convert("RGB")
                        buf = _io.BytesIO()
                        img.save(buf, format="JPEG", quality=90)
                        data = buf.getvalue()
                    except Exception:
                        data = _maak_placeholder(pad.name)
                self.send_response(200)
                self.send_header("Content-Type", "image/jpeg")
                self.send_header("Content-Length", len(data))
                self.send_header("Cache-Control", "public, max-age=3600")
                self.end_headers()
                self.wfile.write(data)
                return

            if parsed.path == "/fotos":
                params = parse_qs(parsed.query)
                maand    = params.get("maand", [""])[0]
                pad_par  = params.get("pad",   [""])[0]
                try:
                    if pad_par:
                        pad_abs = (BASE_DIR / pad_par).resolve()
                        if not pad_abs.is_relative_to(BASE_DIR.resolve()):
                            raise ValueError("Pad buiten BASE_DIR")
                        fotos = zoek_fotos(pad_abs) if pad_abs.is_dir() else []
                    else:
                        fotos = fotos_in_map(maand)
                    groepen_raw = burst_groepen(fotos)
                    groepen_out = []
                    for g in groepen_raw:
                        items = []
                        for f in g["fotos"]:
                            rel = str(f.relative_to(BASE_DIR))
                            datum = lees_datum(f)
                            grootte = f.stat().st_size
                            items.append({"rel": rel, "naam": f.name, "datum": datum.strftime("%d-%m-%Y"), "datum_iso": datum.strftime("%Y-%m-%d"), "tijdstip": datum.strftime("%H:%M"), "grootte": grootte})
                        groepen_out.append({"fotos": items, "type": g["type"], "span_sec": g.get("span_sec", 0)})
                    self.send_json({"groepen": groepen_out})
                except Exception as e:
                    import traceback
                    traceback.print_exc()
                    self.send_json({"fout": str(e), "groepen": []}, 500)
                return

            if parsed.path == "/jm":
                self.send_json(jaren_maanden())
                return

            if parsed.path == "/tree":
                _skip = {'@eadir', '#recycle', '.recycle', '.ds_store', 'thumbs.db'}
                def _boom(pad, diepte=0):
                    if diepte > 6:
                        return []
                    result = []
                    try:
                        for sub in sorted(pad.iterdir(), key=lambda x: x.name.lower()):
                            if sub.is_dir() and not sub.name.startswith(('.', '@', '#')) \
                                    and sub.name.lower() not in _skip:
                                try:
                                    aantal = sum(1 for f in sub.rglob("*")
                                                 if f.is_file() and f.suffix.lower() in FOTO_EXTS)
                                except Exception:
                                    aantal = 0
                                result.append({
                                    "naam": sub.name,
                                    "pad": str(sub.relative_to(BASE_DIR)),
                                    "submappen": _boom(sub, diepte + 1),
                                    "aantal": aantal,
                                })
                    except Exception:
                        pass
                    return result

                datumloos_pad = BASE_DIR / DATELESS_DIR
                datumloos_pad.mkdir(parents=True, exist_ok=True)
                prullenbak_pad = BASE_DIR / TRASH_DIR
                later_pad = uitzoeken / "Later uitzoeken"
                later_data = None
                if later_pad.exists():
                    try:
                        later_aantal = sum(1 for f in later_pad.rglob("*")
                                           if f.is_file() and f.suffix.lower() in FOTO_EXTS)
                    except Exception:
                        later_aantal = 0
                    later_data = {"pad": str(later_pad.relative_to(BASE_DIR)), "aantal": later_aantal}
                self.send_json({
                    "archief": ARCHIVE_DIR,
                    "archief_boom": _boom(archief),
                    "datumloos": DATELESS_DIR,
                    "datumloos_boom": _boom(datumloos_pad),
                    "prullenbak": TRASH_DIR,
                    "prullenbak_boom": _boom(prullenbak_pad) if prullenbak_pad.exists() else [],
                    "uitzoeken": INBOX_DIR,
                    "later_uitzoeken": later_data,
                    "jm": jaren_maanden(),
                })
                return

            if parsed.path.startswith("/lang/"):
                code = parsed.path[6:].replace(".json", "").strip("/")
                if not code.isalpha() or len(code) > 5:
                    self.send_response(400); self.end_headers(); return
                lang_file = TRANSLATIONS_DIR / f"{code}.json"
                if not lang_file.exists():
                    self.send_json({"fout": "taal niet gevonden"}, 404); return
                data = lang_file.read_bytes()
                self.send_response(200)
                self.send_header("Content-Type", "application/json; charset=utf-8")
                self.send_header("Content-Length", len(data))
                self.send_header("Cache-Control", "public, max-age=3600")
                self.end_headers()
                self.wfile.write(data)
                return

            if parsed.path == "/opruim-check":
                import re as _re2
                leeg = []
                if uitzoeken.exists():
                    for sub in sorted(uitzoeken.iterdir(), key=lambda x: x.name):
                        if sub.is_dir() and _re2.match(r'^\d{4}-\d{2}$', sub.name):
                            if not _heeft_echte_inhoud(sub):
                                leeg.append(sub.name)
                self.send_json({"mappen": leeg})
                return

            if parsed.path == "/healthcheck":
                self.send_json({"checks": run_health_checks()})
                return

            if parsed.path == "/events":
                q = _queue.Queue()
                with _sse_lock:
                    _sse_queues.append(q)
                self.send_response(200)
                self.send_header("Content-Type", "text/event-stream")
                self.send_header("Cache-Control", "no-cache")
                self.send_header("Connection", "keep-alive")
                self.send_header("X-Accel-Buffering", "no")
                self.end_headers()
                try:
                    while True:
                        try:
                            msg = q.get(timeout=20)
                            self.wfile.write(f"data: {msg}\n\n".encode())
                            self.wfile.flush()
                        except _queue.Empty:
                            self.wfile.write(b": heartbeat\n\n")
                            self.wfile.flush()
                except Exception:
                    pass
                finally:
                    with _sse_lock:
                        try: _sse_queues.remove(q)
                        except ValueError: pass
                return

            html = render_hoofdpagina().encode()
            self.send_response(200)
            self.send_header("Content-Type", "text/html; charset=utf-8")
            self.send_header("Content-Length", len(html))
            self.end_headers()
            self.wfile.write(html)

        def do_POST(self):
            path = urlparse(self.path).path
            length = int(self.headers.get("Content-Length", 0))
            body = self.rfile.read(length) if length else b""

            if path == "/verplaats":
                data = _json.loads(body)
                base_resolved = BASE_DIR.resolve()
                # Ondersteuning voor zowel 'album' (→ archief/album) als 'pad' (→ BASE_DIR/pad)
                if "pad" in data:
                    raw_pad = data["pad"]
                    try:
                        doel_map = (BASE_DIR / raw_pad).resolve()
                        if not doel_map.is_relative_to(base_resolved):
                            self.send_json({"fout": "pad buiten BASE_DIR"}, 400); return
                    except Exception:
                        self.send_json({"fout": "ongeldig pad"}, 400); return
                else:
                    album = data["album"]
                    doel_map = archief / Path(album)
                doel_map.mkdir(parents=True, exist_ok=True)
                count = 0
                for rel in data["paden"]:
                    try:
                        src = (BASE_DIR / rel).resolve()
                        if not src.is_relative_to(base_resolved):
                            continue
                    except (ValueError, OSError):
                        continue
                    if src.exists():
                        dst = uniek_doel(doel_map, src.name)
                        shutil.move(str(src), dst)
                        count += 1
                album_label = str(doel_map.relative_to(BASE_DIR))
                sla_recent_op(album_label)
                verwijder_lege_mappen()
                immich_rescan()
                self.send_json({
                    "bericht": f"{count} foto('s) verplaatst naar '{album_label}'",
                    "jm": jaren_maanden(),
                })

            elif path == "/prullenbak":
                data = _json.loads(body)
                submap = data.get("submap", "losse_items")
                if submap not in ("duplicaten", "losse_items"):
                    submap = "losse_items"
                prullenbak = BASE_DIR / TRASH_DIR / submap
                prullenbak.mkdir(parents=True, exist_ok=True)
                base_resolved = BASE_DIR.resolve()
                count = 0
                for rel in data["paden"]:
                    try:
                        src = (BASE_DIR / rel).resolve()
                        if not src.is_relative_to(base_resolved):
                            continue
                    except (ValueError, OSError):
                        continue
                    if src.exists():
                        dst = uniek_doel(prullenbak, src.name)
                        shutil.move(str(src), dst)
                        count += 1
                verwijder_lege_mappen()
                immich_rescan()
                self.send_json({"verplaatst": count, "jm": jaren_maanden()})

            elif path == "/recents":
                data = _json.loads(body)
                recents = laad_recents()
                if "verwijder" in data:
                    album = data["verwijder"]
                    if album in recents:
                        recents.remove(album)
                    RECENTS_FILE.write_text(_json.dumps(recents))
                    self.send_json({"recents": recents})
                elif "volgorde" in data:
                    volgorde = [str(a) for a in data["volgorde"] if isinstance(a, str)]
                    RECENTS_FILE.write_text(_json.dumps(volgorde[:10]))
                    self.send_json({"recents": volgorde[:10]})
                else:
                    self.send_json({"fout": "onbekende actie"}, 400)

            elif path == "/reset":
                req = _json.loads(body) if body else {}
                aantal = max(20, min(400, int(req.get("aantal", 40))))

                def doe_reset(n=aantal):
                    _watcher_pauze[0] = True
                    try:
                        def dl_cb(stap, tot, bericht):
                            _push_sse(_json.dumps({"type": "progress", "fase": "download",
                                                   "stap": stap, "totaal": tot, "bericht": bericht}))
                        def ps_cb(stap, tot, bericht):
                            _push_sse(_json.dumps({"type": "progress", "fase": "presort",
                                                   "stap": stap, "totaal": tot, "bericht": bericht}))
                        maak_testdata(aantal=n, progress_cb=dl_cb)
                        presort(progress_cb=ps_cb)
                        _push_sse(_json.dumps({"type": "reset_klaar", "jm": jaren_maanden()}))
                    except Exception as _exc:
                        import traceback as _tb
                        _log(f"[Reset] Fout: {_exc}\n{_tb.format_exc()}")
                        _push_sse(_json.dumps({"type": "reset_fout", "bericht": str(_exc)}))
                    finally:
                        _watcher_pauze[0] = False

                threading.Thread(target=doe_reset, daemon=True).start()
                self.send_json({"ok": True})

            elif path == "/presort":
                def doe_presort():
                    try:
                        def ps_cb(stap, tot, bericht):
                            _push_sse(_json.dumps({"type": "progress", "fase": "presort",
                                                   "stap": stap, "totaal": tot, "bericht": bericht}))
                        presort(progress_cb=ps_cb)
                        _push_sse(_json.dumps({"type": "presort_klaar", "jm": jaren_maanden()}))
                    except Exception as _exc:
                        import traceback as _tb
                        _log(f"[Presort] Fout: {_exc}\n{_tb.format_exc()}")
                        _push_sse(_json.dumps({"type": "presort_fout", "bericht": str(_exc)}))

                threading.Thread(target=doe_presort, daemon=True).start()
                self.send_json({"ok": True})

            elif path == "/clearthumbs":
                gewist = 0
                for p in [THUMBCACHE_DIR, DATUMCACHE_FILE]:
                    if p.exists():
                        if p.is_dir():
                            shutil.rmtree(p)
                        else:
                            p.unlink()
                        gewist += 1
                THUMBCACHE_DIR.mkdir(exist_ok=True)
                _log(f"[Cache] {gewist} cache-item(s) gewist")
                self.send_json({"ok": True})

            elif path == "/opruim":
                import re as _re
                verwijderd = 0
                if uitzoeken.exists():
                    for sub in list(uitzoeken.iterdir()):
                        if sub.is_dir() and _re.match(r'^\d{4}-\d{2}$', sub.name):
                            if not _heeft_echte_inhoud(sub):
                                try:
                                    shutil.rmtree(sub)
                                    _log(f"[Opruimen] Lege map verwijderd: {sub.name}")
                                    verwijderd += 1
                                except OSError as oe:
                                    _log(f"[Opruimen] Fout bij verwijderen {sub.name}: {oe}")
                bericht = f"{verwijderd} lege map(pen) verwijderd." if verwijderd else "Geen lege mappen gevonden."
                self.send_json({"bericht": bericht, "verwijderd": verwijderd, "jm": jaren_maanden()})

            elif path == "/hernoem":
                data = _json.loads(body)
                rel  = data.get("pad", "")
                naam = data.get("naam", "").strip()
                if not rel or not naam:
                    self.send_json({"fout": "pad of naam ontbreekt"}, 400); return
                import re as _re
                if _re.search(r'[/\\:*?"<>|]', naam):
                    self.send_json({"fout": "ongeldige tekens in naam"}, 400); return
                try:
                    oud = (BASE_DIR / rel).resolve()
                    if not oud.is_relative_to(BASE_DIR.resolve()) or not oud.is_dir():
                        self.send_json({"fout": "map niet gevonden"}, 404); return
                    nieuw = oud.parent / naam
                    if nieuw.exists():
                        self.send_json({"fout": f"'{naam}' bestaat al"}); return
                    oud.rename(nieuw)
                    nieuw_rel = str(nieuw.relative_to(BASE_DIR))
                    _log(f"[Hernoem] {rel} → {nieuw_rel}")
                    self.send_json({"ok": True, "nieuw_pad": nieuw_rel})
                except Exception as e:
                    self.send_json({"fout": str(e)}, 500)

            elif path == "/maakmap":
                data   = _json.loads(body)
                naam   = data.get("naam", "").strip()
                sectie = data.get("sectie")  # 'verwerkt' | 'datumloos' | None
                ouder  = data.get("ouder")   # pad relatief aan BASE_DIR of None
                paden  = data.get("paden", [])
                if not naam:
                    self.send_json({"fout": "naam ontbreekt"}, 400); return
                import re as _re
                if _re.search(r'[\\:*?"<>|]', naam):
                    self.send_json({"fout": "ongeldige tekens"}, 400); return
                base_resolved = BASE_DIR.resolve()
                try:
                    if ouder:
                        basis = (BASE_DIR / ouder).resolve()
                        if not basis.is_relative_to(base_resolved):
                            self.send_json({"fout": "ouder buiten BASE_DIR"}, 400); return
                    elif sectie == "datumloos":
                        basis = BASE_DIR / DATELESS_DIR
                    else:
                        basis = archief  # standaard: verwerkt
                    doel_map = basis / Path(naam)
                    doel_map.mkdir(parents=True, exist_ok=True)
                    nieuw_rel = str(doel_map.relative_to(BASE_DIR))
                    count = 0
                    for rel in paden:
                        try:
                            src = (BASE_DIR / rel).resolve()
                            if not src.is_relative_to(base_resolved): continue
                        except (ValueError, OSError): continue
                        if src.exists():
                            dst = uniek_doel(doel_map, src.name)
                            shutil.move(str(src), dst)
                            count += 1
                    if count:
                        verwijder_lege_mappen()
                        immich_rescan()
                    _log(f"[NieuweMap] {nieuw_rel} ({count} foto's)")
                    self.send_json({
                        "bericht": f"Map '{naam}' aangemaakt" + (f", {count} foto('s) verplaatst" if count else ""),
                        "nieuw_pad": nieuw_rel,
                        "jm": jaren_maanden(),
                    })
                except Exception as e:
                    self.send_json({"fout": str(e)}, 500)

            elif path == "/verplaatsmap":
                data     = _json.loads(body)
                van_rel  = data.get("van", "").strip()
                naar_rel = data.get("naar", "").strip()
                if not van_rel or not naar_rel:
                    self.send_json({"fout": "van of naar ontbreekt"}, 400); return
                base_resolved = BASE_DIR.resolve()
                try:
                    van_abs  = (BASE_DIR / van_rel).resolve()
                    naar_abs = (BASE_DIR / naar_rel).resolve()
                    if not van_abs.is_relative_to(base_resolved) or not van_abs.is_dir():
                        self.send_json({"fout": "bronmap niet gevonden"}, 404); return
                    if not naar_abs.is_relative_to(base_resolved):
                        self.send_json({"fout": "doelmap buiten BASE_DIR"}, 400); return
                    # Voorkom neerzetten in zichzelf of een submap
                    if naar_abs == van_abs or naar_abs.is_relative_to(van_abs):
                        self.send_json({"fout": "kan map niet in zichzelf verplaatsen"}, 400); return
                    naar_abs.mkdir(parents=True, exist_ok=True)
                    doel = uniek_doel(naar_abs, van_abs.name)
                    shutil.move(str(van_abs), doel)
                    nieuw_rel = str(doel.relative_to(BASE_DIR))
                    verwijder_lege_mappen()
                    _log(f"[VerplaatsMap] {van_rel} → {nieuw_rel}")
                    self.send_json({"bericht": f"Map verplaatst naar '{naar_rel}'", "nieuw_pad": nieuw_rel})
                except Exception as e:
                    self.send_json({"fout": str(e)}, 500)

            elif path == "/restart":
                def _doe_restart():
                    import time as _time
                    _time.sleep(0.4)
                    _log("[Server] Herstart op verzoek van gebruiker")
                    os.execv(sys.executable, [sys.executable] + sys.argv)
                threading.Thread(target=_doe_restart, daemon=False).start()
                self.send_json({"ok": True})

            else:
                self.send_json({"fout": "onbekend pad"}, 404)

    try:
        s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
        s.connect(("8.8.8.8", 80))
        lan_ip = s.getsockname()[0]
        s.close()
    except Exception:
        lan_ip = "onbekend"

    print(f"Declutter draait op:")
    print(f"  http://localhost:{PORT}")
    print(f"  http://{lan_ip}:{PORT}")

    server = ThreadingHTTPServer(("0.0.0.0", PORT), Handler)
    server.serve_forever()


# ── Entrypoint ────────────────────────────────────────────────────────────────

if __name__ == "__main__":
    args = set(sys.argv[1:])

    if "--clearcache" in args:
        for p in [THUMBCACHE_DIR, DATUMCACHE_FILE]:
            if p.exists():
                if p.is_dir():
                    shutil.rmtree(p)
                else:
                    p.unlink()
        print("Cache gewist.")
        sys.exit(0)

    check_dependencies()
    start_server()