<?php /** @var array $user */ ?>
<div class="w-full max-w-sm bg-slate border border-white/10 rounded-xl p-8">
  <div class="text-center mb-6">
    <div class="text-xs uppercase tracking-[0.3em] text-gold"><?= e(t('hub.setup_pin.kicker')) ?></div>
    <h1 class="text-2xl font-display mt-2"><?= e(t('hub.setup_pin.title')) ?></h1>
    <p class="text-bone/60 text-sm mt-2"><?= e(t('hub.setup_pin.body', ['name' => $user['first_name'] ?? ''])) ?></p>
  </div>
  <form method="POST" action="<?= url('/hub/setup-pin') ?>" class="space-y-4">
    <?= csrf_field() ?>
    <div>
      <label class="label"><?= e(t('hub.setup_pin.pin')) ?></label>
      <input name="pin" type="password" inputmode="numeric" pattern="[0-9]{4,6}" maxlength="6" required class="input text-center text-2xl tracking-[0.5em]">
    </div>
    <div>
      <label class="label"><?= e(t('hub.setup_pin.confirm')) ?></label>
      <input name="pin_confirm" type="password" inputmode="numeric" pattern="[0-9]{4,6}" maxlength="6" required class="input text-center text-2xl tracking-[0.5em]">
    </div>
    <button class="btn-gold w-full"><?= e(t('hub.setup_pin.save')) ?></button>
  </form>
</div>
