{% extends "base.html" %}

{% block content %}
<div class="container narrow">
  
  <div class="login-box">
    <div class="login-header">
      <div class="login-icon">🎉</div>
      <h1>Team-Einladung</h1>
      <p class="login-sub">
        Portal: <strong>{{ tenant.name }}</strong>
      </p>
    </div>

    {% if error %}
    <div class="alert-error">
      {{ error }}
    </div>
    <div style="text-align: center; margin-top: 1.5rem;">
      <a href="/login" class="btn-primary">Zur Anmeldung</a>
    </div>
    {% else %}

    <div class="privacy-note">
      👋 Du wurdest eingeladen, am Schmankerl-Brotzeitportal von <strong>{{ tenant.name }}</strong> teilzunehmen. Bitte lege deinen Namen und ein persönliches Passwort fest.
    </div>

    <form action="/join" method="POST" class="auth-form" style="margin-top: 1.5rem;">
      <input type="hidden" name="token" value="{{ token }}">

      <div class="input-group">
        <label for="reg_first_name">Vorname</label>
        <input type="text" id="reg_first_name" name="first_name" required placeholder="z. B. Florian">
      </div>

      <div class="input-group">
        <label for="reg_last_name">Nachname</label>
        <input type="text" id="reg_last_name" name="last_name" required placeholder="z. B. Meier">
      </div>

      <div class="input-group">
        <label for="reg_email">E-Mail-Adresse</label>
        {% if invitation.email %}
        <input type="email" id="reg_email" name="email" value="{{ invitation.email }}" readonly class="readonly-input">
        <small class="form-hint">E-Mail durch Einladung vorgegeben.</small>
        {% else %}
        <input type="email" id="reg_email" name="email" required placeholder="name@firma.de">
        {% endif %}
      </div>

      <div class="input-group">
        <label for="reg_password">Passwort festlegen</label>
        <input type="password" id="reg_password" name="password" required minlength="6" placeholder="Mindestens 6 Zeichen">
      </div>

      <button type="submit" class="btn-submit" style="margin-top: 1rem;">
        🥨 Konto aktivieren & Team beitreten
      </button>
    </form>
    {% endif %}

  </div>

</div>
{% endblock %}