{% extends 'base.html' %}
{% set titles = {'setup': 'Welkom', 'login': 'Inloggen', 'portal_login': 'Klantportaal', 'invite': 'Wachtwoord instellen'} %}
{% block title %}{{ titles[mode] }}{% endblock %}
{% block body %}
<div class="auth-wrap">
<div class="auth">
  <img src="{{ url_for('static', filename='logo.svg') }}" alt="Van Emous">
  {% with msgs = get_flashed_messages(with_categories=true) %}
    {% for cat, m in msgs %}<div class="flash {{ cat }}">{{ m }}</div>{% endfor %}
  {% endwith %}
  <div class="card"><div class="card-body">
    <form method="post">
      <h1>{{ titles[mode] }}</h1>
      <div class="row g-3">
      {% if mode == 'setup' %}
        <p class="muted mb-0">Maak het eerste beheerdersaccount aan.</p>
        <div class="col-12"><label class="form-label" for="name">Naam</label><input class="form-control" id="name" name="name" required autofocus></div>
        <div class="col-12"><label class="form-label" for="email">E-mailadres</label><input class="form-control" id="email" type="email" name="email" required></div>
      {% elif mode == 'invite' %}
        <p class="muted mb-0">Welkom {{ c.name }}. Kies een wachtwoord voor het klantportaal. Daarna logt u in met {{ c.email }}.</p>
      {% else %}
        {% if mode == 'portal_login' %}<p class="muted mb-0">Bekijk uw offertes en deel bestanden met ons.</p>{% endif %}
        <div class="col-12"><label class="form-label" for="email">E-mailadres</label><input class="form-control" id="email" type="email" name="email" required autofocus autocomplete="username"></div>
      {% endif %}
        <div class="col-12"><label class="form-label" for="pw">Wachtwoord</label>
          <input class="form-control" id="pw" type="password" name="password" {{ 'minlength=8' if mode in ('setup', 'invite') }} required autocomplete="{{ 'new-password' if mode in ('setup', 'invite') else 'current-password' }}"></div>
      {% if mode in ('setup', 'invite') %}
        <div class="col-12"><label class="form-label" for="pw2">Herhaal wachtwoord</label>
          <input class="form-control" id="pw2" type="password" name="password2" minlength="8" required autocomplete="new-password"></div>
      {% endif %}
      </div>
      <div class="actions"><button class="btn btn-primary w-100">{{ 'Inloggen' if mode in ('login', 'portal_login') else 'Opslaan en doorgaan' }}</button></div>
    </form>
  </div></div>
</div>
</div>
{% endblock %}