{% 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">
  <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">
    <form method="post">
      <h1>{{ titles[mode] }}</h1>
      {% if mode == 'setup' %}
        <p class="muted">Maak het eerste beheerdersaccount aan.</p>
        <label for="name">Naam</label><input id="name" name="name" required autofocus>
        <label for="email" style="margin-top:1rem">E-mailadres</label><input id="email" type="email" name="email" required>
      {% elif mode == 'invite' %}
        <p class="muted">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">Bekijk uw offertes en deel bestanden met ons.</p>{% endif %}
        <label for="email">E-mailadres</label><input id="email" type="email" name="email" required autofocus>
      {% endif %}
      <label for="pw" style="margin-top:1rem">Wachtwoord</label>
      <input id="pw" type="password" name="password" {{ 'minlength=8' if mode in ('setup', 'invite') }} required>
      {% if mode in ('setup', 'invite') %}
        <label for="pw2" style="margin-top:1rem">Herhaal wachtwoord</label>
        <input id="pw2" type="password" name="password2" minlength="8" required>
      {% endif %}
      <div class="actions"><button class="btn">{{ 'Inloggen' if mode in ('login', 'portal_login') else 'Opslaan en doorgaan' }}</button></div>
    </form>
  </div>
</div>
{% endblock %}