<!DOCTYPE html>
<html lang="<?= current_locale() ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= __('auth.login_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">
        <div class="login-header">
            <a href="/" class="login-brand-link" title="<?= __('auth.login_to_site') ?>">
                <img src="/admin/assets/images/brand/itsweber-cms-logo.png"
                     alt="ITSWEBER CMS"
                     class="login-brand-logo"
                     onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                <h1 class="login-logo" style="display:none">ITSWEBER <span>CMS</span></h1>
            </a>
        </div>

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

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

        <form method="POST" action="/admin/login" class="login-form">
            <?= csrf_field() ?>
            <div class="form-group">
                <label for="username"><?= __('auth.login_username') ?></label>
                <input type="text" id="username" name="username" required autofocus>
            </div>
            <div class="form-group">
                <label for="password"><?= __('auth.login_password') ?></label>
                <div class="login-password-wrapper">
                    <input type="password" id="password" name="password" required>
                    <button type="button" class="login-password-toggle" id="passwordToggle"
                            aria-label="<?= __('auth.login_show_password') ?>"
                            title="<?= __('auth.login_show_password') ?>">
                        <span class="pw-icon-show">&#128065;</span>
                        <span class="pw-icon-hide" style="display:none">&#128064;</span>
                    </button>
                </div>
            </div>
            <div class="form-group login-remember-group">
                <label class="login-remember-label">
                    <input type="checkbox" name="remember_me" value="1">
                    <span><?= __('auth.login_remember_me') ?></span>
                </label>
            </div>
            <button type="submit" class="btn btn-primary btn-full"><?= __('auth.login_submit') ?></button>
        </form>
        <p class="login-forgot">
            <a href="/admin/forgot-password"><?= __('auth.login_forgot') ?></a>
        </p>
        <p class="login-back-to-site">
            <a href="/"><?= __('auth.login_back_to_site') ?></a>
        </p>
    </div>

    <script>
    (function() {
        var toggle = document.getElementById('passwordToggle');
        var field  = document.getElementById('password');
        if (!toggle || !field) return;

        var showIcon = toggle.querySelector('.pw-icon-show');
        var hideIcon = toggle.querySelector('.pw-icon-hide');
        var showLabel = <?= json_encode(__('auth.login_show_password')) ?>;
        var hideLabel = <?= json_encode(__('auth.login_hide_password')) ?>;

        toggle.addEventListener('click', function() {
            var isPassword = field.type === 'password';
            field.type = isPassword ? 'text' : 'password';
            showIcon.style.display = isPassword ? 'none' : '';
            hideIcon.style.display = isPassword ? '' : 'none';
            toggle.setAttribute('aria-label', isPassword ? hideLabel : showLabel);
            toggle.setAttribute('title', isPassword ? hideLabel : showLabel);
            field.focus();
        });
    })();
    </script>
</body>
</html>
