<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Activate To-Do Account — {{ config('app.name') }}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-slate-50 flex items-center justify-center p-4">
  <div class="w-full max-w-md bg-white rounded-2xl shadow-xl p-6 sm:p-8">
    <div class="text-center">
      <div class="inline-flex items-center justify-center h-12 w-12 rounded-2xl bg-slate-900 text-white font-bold">TD</div>
      <h1 class="mt-4 text-2xl font-bold">Set your password</h1>
      <p class="text-sm text-slate-500">Hi {{ $user->name }}, finish activating your account.</p>
    </div>

    @if ($errors->any())
      <div class="mt-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
        {{ $errors->first() }}
      </div>
    @endif

    <form method="POST" action="{{ route('todo.activate.store', $token) }}" class="mt-6 space-y-4">
      @csrf
      <div>
        <label class="block text-sm font-medium mb-1">New Password</label>
        <input type="password" name="password" required class="w-full rounded-xl border-slate-300 focus:border-slate-900 focus:ring-slate-900" placeholder="••••••••">
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">Confirm Password</label>
        <input type="password" name="password_confirmation" required class="w-full rounded-xl border-slate-300 focus:border-slate-900 focus:ring-slate-900" placeholder="••••••••">
      </div>
      <button class="w-full rounded-xl bg-slate-900 text-white py-2.5">Activate Account</button>
    </form>
  </div>
</body>
</html>
