<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php $assetsUrl = $assetsUrl ?? rtrim($baseUrl, '/'); ?>
    <title>Change password · <?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?></title>
    <?php include constant('BASE_PATH') . '/core/views/favicon.php'; ?>
    <link href="<?= $assetsUrl ?>/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?= $assetsUrl ?>/icons/bootstrap-icons.css" rel="stylesheet">
    <?php include constant('BASE_PATH') . '/core/views/theme-head.php'; ?>
    <link href="<?= $assetsUrl ?>/css/account.css?v=<?= (int) @filemtime(constant('BASE_PATH') . '/public/assets/css/account.css') ?>" rel="stylesheet">
</head>
<body class="acct-body">
    <header class="acct-top">
        <a class="acct-brand-min" href="<?= rtrim($baseUrl, '/') ?>/projects" aria-label="Home">
            <?= \PpPhp\Core\Brand::lockup(30) ?>
        </a>
        <div class="acct-top-actions">
            <a href="<?= rtrim($baseUrl, '/') ?>/projects" class="acct-back"><i class="bi bi-house-door"></i> Home</a>
            <?php include constant('BASE_PATH') . '/core/views/theme-toggle.php'; ?>
        </div>
    </header>

    <main class="acct-main">
        <div class="acct-card">
            <div class="acct-head">
                <div class="acct-avatar is-key"><i class="bi bi-shield-lock"></i></div>
                <div class="acct-head-copy">
                    <div class="acct-eyebrow">Security</div>
                    <h1 class="acct-title">Change password</h1>
                    <p class="acct-sub">Pick a strong password you don't use anywhere else.</p>
                </div>
            </div>

            <?php if (!empty($error)): ?>
                <div class="acct-alert is-error"><i class="bi bi-exclamation-triangle-fill"></i><span><?= htmlspecialchars($error) ?></span></div>
            <?php endif; ?>
            <?php if (!empty($success)): ?>
                <div class="acct-alert is-success"><i class="bi bi-check-circle-fill"></i><span><?= htmlspecialchars($success) ?></span></div>
            <?php endif; ?>

            <form method="post" action="<?= rtrim($baseUrl, '/') ?>/change-password" id="acctPwForm">
                <div class="acct-field">
                    <label class="acct-label" for="pw-current">Current password</label>
                    <div class="acct-inputwrap">
                        <input id="pw-current" type="password" name="current_password" class="acct-input" autocomplete="current-password" required>
                        <button type="button" class="acct-eye" data-eye="pw-current" aria-label="Show password"><i class="bi bi-eye"></i></button>
                    </div>
                </div>
                <div class="acct-field">
                    <label class="acct-label" for="pw-new">New password</label>
                    <div class="acct-inputwrap">
                        <input id="pw-new" type="password" name="new_password" class="acct-input" minlength="8" autocomplete="new-password" required>
                        <button type="button" class="acct-eye" data-eye="pw-new" aria-label="Show password"><i class="bi bi-eye"></i></button>
                    </div>
                    <div class="acct-strength" id="pw-strength" hidden>
                        <div class="acct-strength-track"><div class="acct-strength-bar" id="pw-bar"></div></div>
                        <div class="acct-strength-label" id="pw-label"></div>
                    </div>
                    <div class="acct-hint"><i class="bi bi-info-circle"></i> At least 8 characters — mix letters, numbers and symbols.</div>
                </div>
                <div class="acct-field">
                    <label class="acct-label" for="pw-confirm">Confirm new password</label>
                    <div class="acct-inputwrap">
                        <input id="pw-confirm" type="password" name="new_password_confirm" class="acct-input" minlength="8" autocomplete="new-password" required>
                        <button type="button" class="acct-eye" data-eye="pw-confirm" aria-label="Show password"><i class="bi bi-eye"></i></button>
                    </div>
                    <div class="acct-match" id="pw-match"></div>
                </div>
                <div class="acct-actions">
                    <button type="submit" class="acct-btn acct-btn-primary"><i class="bi bi-shield-check"></i> Update password</button>
                    <a href="<?= rtrim($baseUrl, '/') ?>/profile" class="acct-btn acct-btn-ghost"><i class="bi bi-arrow-left"></i> Back to profile</a>
                </div>
            </form>
        </div>
    </main>

    <footer class="acct-foot"><?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?><?php $__tg = \PpPhp\Core\Brand::tagline(); if ($__tg !== ''): ?> · <?= htmlspecialchars($__tg) ?><?php endif; ?></footer>

    <script src="<?= $assetsUrl ?>/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script>
    (function () {
        // Show / hide password toggles.
        document.querySelectorAll('.acct-eye').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var input = document.getElementById(btn.dataset.eye);
                if (!input) return;
                var show = input.type === 'password';
                input.type = show ? 'text' : 'password';
                btn.querySelector('i').className = show ? 'bi bi-eye-slash' : 'bi bi-eye';
                btn.setAttribute('aria-label', show ? 'Hide password' : 'Show password');
            });
        });

        // Live strength meter.
        var pw = document.getElementById('pw-new');
        var wrap = document.getElementById('pw-strength');
        var bar = document.getElementById('pw-bar');
        var label = document.getElementById('pw-label');
        var LEVELS = [
            { w: '25%', c: '#ef4444', t: 'Weak' },
            { w: '50%', c: '#f59e0b', t: 'Fair' },
            { w: '75%', c: '#3b82f6', t: 'Good' },
            { w: '100%', c: '#10b981', t: 'Strong' }
        ];
        function score(v) {
            var s = 0;
            if (v.length >= 8) s++;
            if (v.length >= 12) s++;
            if (/[a-z]/.test(v) && /[A-Z]/.test(v)) s++;
            if (/\d/.test(v)) s++;
            if (/[^A-Za-z0-9]/.test(v)) s++;
            return Math.max(0, Math.min(3, s - 1));
        }
        if (pw) {
            pw.addEventListener('input', function () {
                if (!pw.value) { wrap.hidden = true; checkMatch(); return; }
                wrap.hidden = false;
                var lv = LEVELS[score(pw.value)];
                bar.style.width = lv.w;
                bar.style.background = lv.c;
                label.textContent = lv.t + ' password';
                label.style.color = lv.c;
                checkMatch();
            });
        }

        // Match indicator.
        var confirm = document.getElementById('pw-confirm');
        var match = document.getElementById('pw-match');
        function checkMatch() {
            if (!confirm || !confirm.value) { match.className = 'acct-match'; match.innerHTML = ''; return; }
            var ok = confirm.value === pw.value;
            match.className = 'acct-match show ' + (ok ? 'ok' : 'bad');
            match.innerHTML = ok
                ? '<i class="bi bi-check-circle-fill"></i> Passwords match'
                : '<i class="bi bi-x-circle-fill"></i> Passwords don’t match yet';
        }
        if (confirm) confirm.addEventListener('input', checkMatch);

        // Block submit on mismatch with an inline cue.
        document.getElementById('acctPwForm').addEventListener('submit', function (e) {
            if (pw && confirm && pw.value !== confirm.value) {
                e.preventDefault();
                checkMatch();
                confirm.focus();
            }
        });
    })();
    </script>
</body>
</html>
