<div class="auth-content">
    <h1 class="auth-title"><?= t('reset_password_title') ?></h1>
    <p class="auth-subtitle"><?= t('reset_password_subtitle') ?></p>

    <?php foreach ($errors as $e): ?>
    <div class="alert alert-error"><?= Helper::e($e) ?></div>
    <?php endforeach; ?>

    <form method="POST" action="<?= url('reset-password') ?>?token=<?= Helper::e($token) ?>" class="auth-form">
        <?= Helper::csrf() ?>
        <div class="form-group">
            <label for="password" class="form-label"><?= t('password') ?></label>
            <div class="input-with-toggle">
                <input type="password" id="password" name="password" class="form-input" required autofocus
                       autocomplete="new-password" minlength="8">
                <button type="button" class="pw-toggle" data-pw-toggle="password">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                </button>
            </div>
        </div>
        <div class="form-group">
            <label for="password_confirm" class="form-label"><?= t('password_confirm') ?></label>
            <div class="input-with-toggle">
                <input type="password" id="password_confirm" name="password_confirm" class="form-input" required
                       autocomplete="new-password" minlength="8">
                <button type="button" class="pw-toggle" data-pw-toggle="password_confirm">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                </button>
            </div>
        </div>
        <button type="submit" class="btn btn-primary btn-block"><?= t('reset_password_btn') ?></button>
    </form>
    <p class="auth-footer-link"><a href="<?= url('login') ?>"><?= t('back_to_login') ?></a></p>
</div>
<script nonce="<?= csp_nonce() ?>">
function togglePassword(id) {
    const el = document.getElementById(id);
    el.type = el.type === 'password' ? 'text' : 'password';
}
</script>
