<?php
/**
 * Reusable PIN confirmation modal.
 * Usage: include with $formAction, $formMethod (POST), $trigger (button label), $title
 * The caller passes the action URL; this partial renders an Alpine modal that
 * submits a hidden form with _csrf, username, pin fields to that action.
 */
/** @var string $formAction */
/** @var string $triggerLabel */
/** @var string $modalTitle */
/** @var string $triggerClass */
$triggerClass = $triggerClass ?? 'btn-gold';
?>
<div x-data="{ open:false, username:'', pin:'' }">
  <button type="button" @click="open=true; $nextTick(()=>$refs.username.focus())" class="<?= e($triggerClass) ?>"><?= e($triggerLabel) ?></button>
  <div x-show="open" x-transition style="display:none" class="fixed inset-0 z-50 bg-black/80 backdrop-blur flex items-center justify-center p-4">
    <div class="bg-slate border border-white/10 rounded-xl w-full max-w-md p-6" @click.outside="open=false">
      <h3 class="text-xl font-display text-gold"><?= e($modalTitle) ?></h3>
      <p class="text-sm text-bone/60 mt-1"><?= e(t('hub.pin.enter_credentials')) ?></p>
      <form method="POST" action="<?= e($formAction) ?>" class="mt-4 space-y-3">
        <?= csrf_field() ?>
        <div>
          <label class="block text-xs uppercase tracking-widest text-bone/50 mb-1"><?= e(t('hub.pin.username')) ?></label>
          <input x-ref="username" name="username" x-model="username" required autocomplete="off"
                 class="w-full bg-ink border border-white/10 rounded-md px-3 py-2 focus:border-gold outline-none">
        </div>
        <div>
          <label class="block text-xs uppercase tracking-widest text-bone/50 mb-1"><?= e(t('hub.pin.pin')) ?></label>
          <input name="pin" type="password" x-model="pin" inputmode="numeric" pattern="[0-9]{4,6}" maxlength="6" required autocomplete="off"
                 class="w-full bg-ink border border-white/10 rounded-md px-3 py-2 text-center text-2xl tracking-[0.5em] focus:border-gold outline-none">
        </div>
        <div class="flex justify-end gap-2 pt-2">
          <button type="button" @click="open=false" class="px-4 py-2 text-sm text-bone/60 hover:text-bone"><?= e(t('common.cancel')) ?></button>
          <button type="submit" class="btn-gold"><?= e(t('hub.pin.confirm')) ?></button>
        </div>
      </form>
    </div>
  </div>
</div>
