{% extends 'base.html' %}
{% block title %}Mijn account{% endblock %}
{% block content %}
<div class="head"><div><div class="kicker">{{ ROLE.get(g.user.role) }}</div><h1>{{ g.user.name }}</h1><div class="muted">{{ g.user.email }}</div></div></div>
<div class="row g-4">
<div class="col-lg-6">
<form method="post" class="card"><div class="card-body">
  <h2>Wachtwoord wijzigen</h2>
  <div class="row g-3">
    <div class="col-12"><label class="form-label" for="old">Huidig wachtwoord</label><input class="form-control" id="old" type="password" name="old_password" required></div>
    <div class="col-12"><label class="form-label" for="new">Nieuw wachtwoord</label><input class="form-control" id="new" type="password" name="new_password" minlength="8" required autocomplete="new-password"></div>
  </div>
  <div class="actions"><button class="btn btn-primary">Opslaan</button></div>
</div></form>
</div>

<div class="col-lg-6">
<div class="card dav-box" id="agenda"><div class="card-body">
  <h2>Agenda koppelen</h2>
  <p>Zet je CRM-agenda in de agenda van je telefoon of computer (CalDAV). Wijzigingen gaan beide kanten op. Je logt
    daar in met een apart <strong>app-wachtwoord</strong>, niet met je CRM-wachtwoord.</p>
  {% if dav.password %}
    <p class="mb-1">Je nieuwe app-wachtwoord (alleen nu te zien):</p>
    <p><span class="dav-pass">{{ dav.password }}</span></p>
  {% endif %}
  <table class="table table-sm mb-3">
    <tr><th class="label" scope="row">Server</th><td><code>{{ dav.host }}</code></td></tr>
    <tr><th class="label" scope="row">Volledig adres</th><td><code>{{ dav.url }}</code></td></tr>
    <tr><th class="label" scope="row">Gebruikersnaam</th><td><code>{{ g.user.email }}</code></td></tr>
    <tr><th class="label" scope="row">Wachtwoord</th><td>{{ 'het app-wachtwoord' if dav.active else 'maak hieronder een app-wachtwoord aan' }}</td></tr>
  </table>
  <ul class="hint ps-3">
    <li><strong>iPhone / iPad:</strong> Instellingen › Agenda › Accounts › Voeg account toe › Anders › Voeg CalDAV-account toe; server <code>{{ dav.host }}</code>.</li>
    <li><strong>Mac:</strong> Agenda › Instellingen › Accounts › + › Ander CalDAV-account; type Handmatig, server <code>{{ dav.host }}</code>.</li>
    <li><strong>Android:</strong> installeer DAVx⁵, kies "Inloggen met URL en gebruikersnaam" met het volledige adres.</li>
    <li><strong>Thunderbird:</strong> Nieuwe agenda › Op het netwerk; het volledige adres.</li>
  </ul>
  <form method="post" class="actions">
    <button class="btn btn-primary" name="action" value="dav" {% if dav.active %}onclick="return confirm('Een nieuw app-wachtwoord maakt het oude ongeldig. Doorgaan?')"{% endif %}>{{ 'Nieuw app-wachtwoord' if dav.active else 'App-wachtwoord aanmaken' }}</button>
    {% if dav.active %}<button class="btn btn-outline-secondary" name="action" value="dav-off" onclick="return confirm('Agendakoppeling uitzetten?')">Koppeling uitzetten</button>{% endif %}
  </form>
</div></div>
</div>
</div>
{% endblock %}