<?php /** @var array $user */ ?>
<div class="w-full max-w-sm bg-slate border border-white/10 rounded-2xl p-8">
  <div class="text-center mb-6">
    <div class="w-14 h-14 rounded-full bg-gold/10 border border-gold/30 flex items-center justify-center mx-auto mb-4">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#d4af37" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
    </div>
    <div class="text-[10px] uppercase tracking-[0.3em] text-gold"><?= e(t('hub.change_password.kicker')) ?></div>
    <h1 class="text-2xl font-display mt-2"><?= e(t('hub.change_password.title')) ?></h1>
    <p class="text-bone/50 text-sm mt-2"><?= e(t('hub.change_password.body')) ?></p>
  </div>
  <form method="POST" action="<?= url('/hub/change-password') ?>" class="space-y-4">
    <?= csrf_field() ?>
    <div>
      <label class="label"><?= e(t('hub.change_password.new')) ?></label>
      <input name="new_password" type="password" required minlength="8" class="input" autocomplete="new-password">
    </div>
    <div>
      <label class="label"><?= e(t('hub.change_password.confirm')) ?></label>
      <input name="confirm_password" type="password" required minlength="8" class="input" autocomplete="new-password">
    </div>
    <p class="text-xs text-bone/30"><?= e(t('hub.change_password.hint')) ?></p>
    <button class="btn-gold w-full"><?= e(t('hub.change_password.save')) ?></button>
  </form>
</div>
