{# auth/invite.html — where an invitee makes their own account (milestone 496).
   `invite` is the working invite, or none: then only `error` shows. #}
{% extends "base.html" %}
{% block title %}Join Steward{% endblock %}
{% block content %}
<div class="invite-page">
  <div class="card">
    <h1 class="invite-title">Join Steward</h1>
    {% if invite %}
    <p class="invite-lede">{{ inviter }} invited you as {{ "an" if invite.role.value in ("admin", "operator") else "a" }} {{ invite.role.value }}. Choose your username, email and password.</p>
    {% if session.user_id %}<p class="field-hint">You're signed in as {{ session.username }}. Making this account signs you in as it instead.</p>{% endif %}
    {% endif %}
    {% if error %}<div class="alert alert-error" role="alert">{{ error }}</div>{% endif %}
    {% if invite %}
    <form method="post" action="/invite/{{ key }}">{{ csrf_field() }}
      <div class="field">
        <label class="field-label" for="inv-username">Username</label>
        <input class="input" id="inv-username" type="text" name="username" maxlength="64" required autofocus
               autocomplete="username" value="{{ form.get('username', '') }}">
      </div>
      <div class="field">
        <label class="field-label" for="inv-email">Email</label>
        <input class="input" id="inv-email" type="email" name="email" maxlength="255" required
               autocomplete="email" value="{{ form.get('email', '') }}">
        <span class="field-hint">Steward sends alerts and the weekly report here; you can turn them off later.</span>
      </div>
      <div class="field">
        <label class="field-label" for="inv-pw">Password</label>
        <input class="input" id="inv-pw" type="password" name="password" minlength="{{ min_password }}" required autocomplete="new-password">
        <span class="field-hint">At least {{ min_password }} characters.</span>
      </div>
      <div class="field">
        <label class="field-label" for="inv-pw2">Password again</label>
        <input class="input" id="inv-pw2" type="password" name="confirm" required autocomplete="new-password">
      </div>
      <button type="submit" class="btn invite-submit">Make my account</button>
    </form>
    {% else %}
    <a href="/login" class="btn btn-ghost">Go to sign in</a>
    {% endif %}
  </div>
</div>
{% endblock %}