{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-lg rounded-3xl bg-white p-6 shadow-soft">
  <h2 class="text-xl font-semibold text-slate-900">Accept Invite</h2>
  <p class="mt-1 text-sm text-slate-500">Set your password to activate your account.</p>
  {% if flash %}
  <div class="mt-4 rounded-2xl border border-red-200 bg-red-50 p-3 text-sm text-red-800">{{ flash }}</div>
  {% endif %}
  <form method="post" class="mt-6 space-y-4">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
    <input type="hidden" name="token" value="{{ token }}" />
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Password</label>
      <input type="password" name="password" class="w-full rounded-2xl border border-slate-300 px-4 py-2.5 text-sm" required />
      <p class="mt-1 text-xs text-slate-500">Use at least 8 characters with letters and numbers.</p>
    </div>
    <button class="rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700">Accept invite</button>
  </form>
</div>
{% endblock %}