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

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

    <form method="POST" action="<?= url('register') ?>" class="auth-form">
        <?= Helper::csrf() ?>
        <div aria-hidden="true" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden">
            <label for="website">Website</label>
            <input type="text" id="website" name="website" tabindex="-1" autocomplete="off" value="">
        </div>
        <div class="form-group">
            <label for="username" class="form-label"><?= t('username') ?></label>
            <input type="text" id="username" name="username" class="form-input" required autofocus
                   value="<?= Helper::e(Helper::post('username')) ?>" autocomplete="username">
        </div>
        <div class="form-group">
            <label for="email" class="form-label"><?= t('email') ?></label>
            <input type="email" id="email" name="email" class="form-input" required
                   value="<?= Helper::e(Helper::post('email')) ?>" autocomplete="email">
        </div>
        <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 autocomplete="new-password"
                       data-input="pwStrengthInput" data-bar-id="reg-bar" data-label-id="reg-lbl">
                <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 class="pw-strength-wrap"><div class="pw-strength-bar" id="reg-bar"></div></div>
            <div class="pw-strength-lbl" id="reg-lbl"></div>
        </div>
        <div class="form-group">
            <label for="password_confirm" class="form-label"><?= t('password_confirm') ?></label>
            <input type="password" id="password_confirm" name="password_confirm" class="form-input" required autocomplete="new-password">
        </div>
        <button type="submit" class="btn btn-primary btn-block"><?= t('register_btn') ?></button>
    </form>
    <p class="auth-footer-link"><a href="<?= url('login') ?>"><?= t('back_to_login') ?></a></p>
</div>
<style>
.pw-strength-wrap{height:4px;background:var(--border-color);border-radius:2px;margin-top:6px;overflow:hidden}
.pw-strength-bar{height:100%;width:0;border-radius:2px;transition:width .2s,background .2s}
.pw-strength-lbl{font-size:.73rem;margin-top:3px;min-height:1rem;font-weight:500}
</style>
<script nonce="<?= csp_nonce() ?>">
function pwStrengthInput(el) {
    const pw  = el.value;
    const bar = document.getElementById(el.dataset.barId);
    const lbl = document.getElementById(el.dataset.labelId);
    if (!pw) { bar.style.width = '0'; lbl.textContent = ''; return; }
    let s = 0;
    if (pw.length >= 8)  s++;
    if (pw.length >= 12) s++;
    if (/[A-Z]/.test(pw) && /[a-z]/.test(pw)) s++;
    if (/[0-9]/.test(pw)) s++;
    if (/[^A-Za-z0-9]/.test(pw)) s++;
    s = Math.min(4, Math.max(1, s));
    const colors = ['#ef4444','#f97316','#eab308','#22c55e'];
    const labels = ['Sehr schwach','Schwach','Mittel','Stark'];
    bar.style.width = (s * 25) + '%';
    bar.style.background = colors[s-1];
    lbl.textContent = labels[s-1];
    lbl.style.color = colors[s-1];
}
</script>
