{% extends "layout.html" %}

{% block content %}
  <section class="mx-auto max-w-xl ui-pane p-8">
    <div class="mb-6">
      <p class="ui-eyebrow">Access</p>
      <h1 class="ui-page-title">Accept invitation</h1>
      <p class="ui-page-subtitle">Set up your account for <span class="font-medium text-slate-900 dark:text-slate-100">{{ email }}</span>.</p>
    </div>

    {% if error %}
      <div class="mb-4 ui-alert border-rose-300 dark:border-rose-500/60 bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-200">
        {{ error }}
      </div>
    {% endif %}

    <form class="space-y-4" method="post" action="/invite/{{ token }}">
      <div>
        <label class="ui-form-label" for="display_name">Display name</label>
        <input
          class="ui-form-input mt-2 px-4 py-2.5"
          type="text"
          name="display_name"
          id="display_name"
          placeholder="Your name"
          required
        />
      </div>
      <div>
        <label class="ui-form-label" for="password">Password</label>
        <input
          class="ui-form-input mt-2 px-4 py-2.5"
          type="password"
          name="password"
          id="password"
          placeholder="Choose a password"
          required
        />
      </div>
      <div>
        <label class="ui-form-label" for="confirm_password">Confirm password</label>
        <input
          class="ui-form-input mt-2 px-4 py-2.5"
          type="password"
          name="confirm_password"
          id="confirm_password"
          placeholder="Confirm your password"
          required
        />
      </div>
      <button
        class="w-full ui-btn-primary hover:bg-brand-600 dark:hover:bg-brand-200 transition-colors"
        type="submit"
      >
        Create account
      </button>
    </form>

    <div class="mt-4 text-center">
      <a href="/login" class="text-sm text-slate-500 dark:text-slate-400 hover:text-brand-600 dark:hover:text-brand-300 transition-colors">
        Already have an account? Sign in
      </a>
    </div>
  </section>
{% endblock %}