{% extends 'base.html' %}
{% block title %}{{ mb.name or 'Nieuwe mailbox' }}{% endblock %}
{% macro field(key, label, type='text', placeholder='', full=false) %}
  <div class="{{ 'col-12' if full else 'col-md-6 col-xl-4' }}"><label class="form-label" for="{{ key }}">{{ label }}</label><input class="form-control" id="{{ key }}" type="{{ type }}" name="{{ key }}" value="{{ mb[key] or '' if mb[key] is defined else '' }}" placeholder="{{ placeholder }}"></div>
{% endmacro %}
{% macro security(key) %}
  <div class="col-md-6 col-xl-4"><label class="form-label" for="{{ key }}">Beveiliging</label>
    <select class="form-select" id="{{ key }}" name="{{ key }}">{% for v, label in SECURITY %}<option value="{{ v }}" {{ 'selected' if (mb[key] or '') == v }}>{{ label }}</option>{% endfor %}</select></div>
{% endmacro %}
{% macro secret(key, label, empty='') %}
  <div class="col-md-6 col-xl-4"><label class="form-label" for="{{ key }}">{{ label }}</label><input class="form-control" id="{{ key }}" type="password" name="{{ key }}" placeholder="{{ '•••••••• (ingesteld)' if mb[key] else empty }}" autocomplete="new-password"></div>
{% endmacro %}
{% block content %}
<div class="head">
  <div><a class="label" href="{{ url_for('settings', _anchor='mail') }}">← Instellingen</a><h1>{{ mb.name if mb.id else 'Nieuwe mailbox' }}</h1>
    {% if mb.last_error %}<div class="flash error mt-2">Laatste fout bij ophalen: {{ mb.last_error }}</div>{% endif %}</div>
</div>
<form method="post">
  <div class="card"><div class="card-body">
    <h2>Algemeen</h2>
    <div class="row g-3">
      <div class="col-md-6 col-xl-4"><label class="form-label" for="name">Naam *</label><input class="form-control" id="name" name="name" value="{{ mb.name or '' }}" placeholder="Info" required></div>
      <div class="col-md-6 col-xl-4"><label class="form-label" for="purpose">Rol</label>
        <select class="form-select" id="purpose" name="purpose" aria-describedby="purpose-hint">{% for k, l in PURPOSES %}<option value="{{ k }}" {{ 'selected' if mb.purpose == k }}>{{ l }}</option>{% endfor %}</select>
        <p class="hint" id="purpose-hint">Nieuwsbrieven kiezen standaard een nieuwsbriefmailbox.</p></div>
      {{ field('smtp_from', 'Afzender', placeholder='Van Emous <info@vanemouswoningen.nl>') }}
      <div class="col-12">
        <div class="form-check"><input class="form-check-input" type="checkbox" id="active" name="active" value="1" {{ 'checked' if mb.active }}><label class="form-check-label" for="active">Actief (ophalen en versturen)</label></div>
        <div class="form-check"><input class="form-check-input" type="checkbox" id="notify" name="notify" value="1" {{ 'checked' if mb.notify }}><label class="form-check-label" for="notify">Melding bij nieuwe e-mail voor wie toegang heeft</label></div>
      </div>
    </div>
    <h3>Toegang</h3>
    <p class="hint">Niemand aangevinkt = gedeeld met iedereen. Vink alleen jezelf aan voor een persoonlijke mailbox.</p>
    <div class="d-flex flex-wrap gap-3">
      {% for u in USERS %}<div class="form-check"><input class="form-check-input" type="checkbox" id="user-{{ u.id }}" name="users" value="{{ u.id }}" {{ 'checked' if u.id in access }}><label class="form-check-label" for="user-{{ u.id }}">{{ u.name }}</label></div>{% endfor %}
    </div>
  </div></div>

  <div class="card"><div class="card-body">
    <h2>Verbinding</h2>
    <p class="hint" style="margin:-.4rem 0 1rem">Bij OVHcloud (Zimbra of MX Plan) is de gebruikersnaam het volledige e-mailadres en heeft elke mailbox een eigen wachtwoord.
      Gmail werkt met een app-wachtwoord. Wachtwoorden staan in de database: houd de map <code>data/</code> privé.</p>
    <div class="row g-3">
      <div class="col-md-6 col-xl-4"><label class="form-label" for="mail-provider">Aanbieder</label>
        <select class="form-select" id="mail-provider" aria-describedby="mail-provider-hint">
          <option value="">Kies om de servers in te vullen…</option>
          {% for key, p in PROVIDERS.items() %}<option value="{{ key }}" data-preset="{{ p|tojson|forceescape }}">{{ p.label }}</option>{% endfor %}
        </select>
        <p class="hint" id="mail-provider-hint">Vult server, poort en beveiliging in; daarna kun je alles nog aanpassen.</p>
      </div>
    </div>
    <h3>Ontvangen (IMAP)</h3>
    <div class="row g-3">
      {{ field('imap_host', 'Server', placeholder='imap.mail.ovh.net') }}
      {{ field('imap_port', 'Poort', 'number', '993') }}
      {{ security('imap_security') }}
      {{ field('imap_user', 'Gebruikersnaam', placeholder='info@vanemouswoningen.nl') }}
      {{ secret('imap_pass', 'Wachtwoord') }}
      {{ field('imap_folder', 'Map', placeholder='INBOX') }}
      {{ field('imap_days', 'Aantal dagen terug ophalen', 'number', '30') }}
    </div>
    <h3>Versturen (SMTP)</h3>
    <div class="row g-3">
      {{ field('smtp_host', 'Server', placeholder='smtp.mail.ovh.net') }}
      {{ field('smtp_port', 'Poort', 'number', '465') }}
      {{ security('smtp_security') }}
      {{ field('smtp_user', 'Gebruikersnaam', placeholder='leeg = zelfde als IMAP') }}
      {{ secret('smtp_pass', 'Wachtwoord', 'leeg = zelfde als IMAP') }}
      <div class="col-md-6 col-xl-4"><label class="form-label" for="smtp_sent_folder">Kopie in map</label><input class="form-control" id="smtp_sent_folder" name="smtp_sent_folder" value="{{ mb.smtp_sent_folder or '' }}" placeholder="leeg = geen kopie" aria-describedby="sent-hint"><p class="hint" id="sent-hint">Bij Zimbra/MX Plan <code>Sent</code>, zodat verstuurde mail ook in de webmail staat. Gmail doet dit zelf. Nieuwsbrieven komen er niet in.</p></div>
    </div>
  </div></div>

  <div class="actions">
    <button class="btn btn-primary" name="action" value="save">Opslaan</button>
    <button class="btn btn-outline-primary" name="action" value="test">Opslaan en verbinding testen</button>
    <a class="btn btn-outline-secondary" href="{{ url_for('settings', _anchor='mail') }}">Annuleren</a>
  </div>
</form>
{% endblock %}
{% block scripts %}
<script>
  document.getElementById('mail-provider').addEventListener('change', (e) => {
    const opt = e.target.selectedOptions[0];
    if (!opt || !opt.dataset.preset) return;
    Object.entries(JSON.parse(opt.dataset.preset)).forEach(([key, value]) => {
      const el = document.getElementById(key);
      if (el) el.value = value;
    });
  });
</script>
{% endblock %}