{% extends "base.html" %}
{% block title %}接受注册邀请{% endblock %}
{% block content %}
<section class="mx-auto max-w-md rounded-xl border border-line bg-white p-5 shadow-panel sm:p-6">
  <span class="material-symbols-outlined text-4xl text-primary" aria-hidden="true">mail</span>
  <h1 class="mt-3 text-2xl font-extrabold">接受注册邀请</h1>
  <p class="mt-2 text-sm leading-6 text-textSub">受邀邮箱：{{ email }}。请设置显示名和登录密码以激活账号。</p>
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}
    <p class="mt-4 rounded-lg p-3 text-sm {{ 'bg-dangerSoft text-dangerText' if category == 'error' else 'bg-blueSoft text-primaryDeep' }}">{{ message }}</p>
    {% endfor %}
  {% endwith %}
  <form method="post" class="mt-5 space-y-4" novalidate>
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <label class="block text-sm font-semibold">显示名<input name="username" required maxlength="100" autocomplete="username" class="mt-2 w-full rounded-lg border border-line px-3 py-2" placeholder="请输入显示名"></label>
    <label class="block text-sm font-semibold">设置密码<input name="password" type="password" required minlength="12" autocomplete="new-password" class="mt-2 w-full rounded-lg border border-line px-3 py-2" placeholder="12 位以上，包含大小写、数字和特殊字符"></label>
    <label class="block text-sm font-semibold">确认密码<input name="password_confirm" type="password" required minlength="12" autocomplete="new-password" class="mt-2 w-full rounded-lg border border-line px-3 py-2" placeholder="再次输入密码"></label>
    <button class="ui-btn ui-btn-primary w-full">完成注册</button>
  </form>
</section>
{% endblock %}