// E-mail opstellen (templates/_compose.html): een template zet zijn tekst boven het bericht (of vervangt de tekst die
// de vorige template daar zette) en vult een leeg onderwerp. Velden als {voornaam} worden ingevuld met data-vars; wat
// overblijft, vult de server bij het versturen in.
document.querySelectorAll('form.compose').forEach((form) => {
  const pick = form.querySelector('select[name="template"]');
  if (!pick) return;
  const vars = JSON.parse(form.dataset.vars || '{}');
  const fill = (text) => text.replace(/\{(\w+)\}/g, (m, k) => (k in vars ? vars[k] : m));
  const subject = form.elements.subject, body = form.elements.body;
  let added = '', addedSubject = '';
  function apply() {
    const o = pick.selectedOptions[0];
    const on = o && o.value;
    const rest = (added && body.value.startsWith(added) ? body.value.slice(added.length) : body.value).replace(/^\n+/, '');
    const text = on ? fill(o.dataset.body || '') : '';
    added = text && rest ? `${text}\n\n` : text;
    body.value = added + rest;
    if (!subject.value.trim() || subject.value === addedSubject) {
      addedSubject = on ? fill(o.dataset.subject || '') : '';
      subject.value = addedSubject;
    }
    body.focus();
    body.setSelectionRange(text.length, text.length);
  }
  pick.addEventListener('change', apply);
  if (pick.value) apply();
});