<!DOCTYPE html>
<html lang="<?= current_locale() ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= __('auth.reset_title') ?></title>
    <link rel="stylesheet" href="/admin/assets/css/tokens.css?v=<?= cms_version() ?>">
    <link rel="stylesheet" href="/admin/assets/css/admin.css">
</head>
<body class="login-body">
    <div class="login-container">
        <?php $siteName = setting('site_name', 'ITSWEBER CMS'); ?>
        <div class="login-header">
            <a href="/" class="login-brand-link" title="<?= __('auth.login_to_site') ?>">
                <?php $adminLogo = setting('admin_logo', ''); ?>
                <?php if ($adminLogo): ?>
                <img src="<?= e($adminLogo) ?>"
                     alt="<?= e($siteName) ?>"
                     class="login-brand-logo"
                     onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                <?php else: ?>
                <img src="/admin/assets/images/brand/itsweber-cms-logo.png"
                     alt="<?= e($siteName) ?>"
                     class="login-brand-logo"
                     onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                <?php endif; ?>
                <h1 class="login-logo" style="display:none"><?= e($siteName) ?></h1>
            </a>
        </div>

        <h2 class="login-subtitle"><?= __('auth.reset_heading') ?></h2>

        <?php if (!empty($error)): ?>
        <div class="alert alert-error"><?= e($error) ?></div>
        <?php endif; ?>

        <?php if (!$valid): ?>
            <!-- Token is missing, expired, or already used -->
            <div class="alert alert-error">
                <?= __('auth.reset_invalid') ?>
            </div>
            <p class="login-forgot">
                <a href="<?= admin_url('forgot-password') ?>"><?= __('auth.reset_request_new') ?></a>
            </p>
        <?php else: ?>
            <form method="POST" action="<?= admin_url('reset-password') ?>" class="login-form">
                <?= csrf_field() ?>
                <input type="hidden" name="token" value="<?= e($token) ?>">

                <div class="form-group">
                    <label for="password"><?= __('auth.reset_password') ?></label>
                    <div class="login-password-wrapper">
                        <input type="password" id="password" name="password"
                               required autofocus minlength="<?= \App\Core\Auth::MIN_PASSWORD_LENGTH ?>"
                               placeholder="<?= __('auth.reset_password_placeholder') ?>">
                        <button type="button" class="login-password-toggle" data-target="password"
                                aria-label="<?= __('auth.login_show_password') ?>">
                            <span class="pw-icon-show"><?= icon('eye', 18) ?></span>
                            <span class="pw-icon-hide" style="display:none"><?= icon('eye-off', 18) ?></span>
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="password_confirm"><?= __('auth.reset_confirm') ?></label>
                    <div class="login-password-wrapper">
                        <input type="password" id="password_confirm" name="password_confirm"
                               required minlength="<?= \App\Core\Auth::MIN_PASSWORD_LENGTH ?>"
                               placeholder="<?= __('auth.reset_confirm_placeholder') ?>">
                        <button type="button" class="login-password-toggle" data-target="password_confirm"
                                aria-label="<?= __('auth.login_show_password') ?>">
                            <span class="pw-icon-show"><?= icon('eye', 18) ?></span>
                            <span class="pw-icon-hide" style="display:none"><?= icon('eye-off', 18) ?></span>
                        </button>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary btn-full"><?= __('auth.reset_submit') ?></button>
            </form>
        <?php endif; ?>

        <p class="login-forgot">
            <a href="<?= admin_url('login') ?>"><?= __('auth.reset_back') ?></a>
        </p>
    </div>

    <script>
    (function() {
        document.querySelectorAll('.login-password-toggle').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var targetId = btn.getAttribute('data-target');
                var field = document.getElementById(targetId);
                if (!field) return;
                var isPassword = field.type === 'password';
                field.type = isPassword ? 'text' : 'password';
                var show = btn.querySelector('.pw-icon-show');
                var hide = btn.querySelector('.pw-icon-hide');
                if (show) show.style.display = isPassword ? 'none' : '';
                if (hide) hide.style.display = isPassword ? '' : 'none';
                field.focus();
            });
        });
    })();
    </script>
</body>
</html>
