<!DOCTYPE html>
<html lang="<?= current_locale() ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= __('installer.title') ?></title>
    <link rel="stylesheet" href="/installer/assets/css/installer.css">
    <style>
    .iw-pw-wrap{position:relative;display:flex;align-items:center}
    .iw-pw-wrap input{padding-right:2.75rem;width:100%}
    .iw-pw-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:.25rem;color:#94a3b8;transition:color .15s;display:flex;align-items:center}
    .iw-pw-toggle:hover{color:#475569}
    </style>
</head>
<body>
    <div class="installer">
        <div class="installer-header">
            <div class="installer-brand">
                <img src="/admin/assets/images/brand/itsweber-logo.png"
                     alt="ITSWEBER"
                     class="installer-brand-logo"
                     onerror="this.style.display='none';this.nextElementSibling.style.display='inline'">
                <span class="installer-brand-text" style="display:none">ITSWEBER <span>CMS</span></span>
            </div>
            <p class="installer-subtitle"><?= __('installer.subtitle') ?></p>
        </div>

        <?php if (isset($step) && $step >= 1 && $step <= 7): ?>
        <div class="installer-steps">
            <?php for ($i = 1; $i <= $totalSteps; $i++): ?>
            <div class="step-indicator <?= $i < $step ? 'completed' : ($i === $step ? 'active' : '') ?>">
                <span class="step-number"><?= $i ?></span>
            </div>
            <?php if ($i < $totalSteps): ?>
            <div class="step-line <?= $i < $step ? 'completed' : '' ?>"></div>
            <?php endif; ?>
            <?php endfor; ?>
        </div>
        <?php endif; ?>

        <div class="installer-content">
            <?= $content ?? '' ?>
        </div>

        <div class="installer-footer">
            <div class="installer-footer-brand">
                <?= __('installer.footer_copyright', [':year' => date('Y')]) ?>
            </div>
            <div class="installer-footer-credits">
                <?= e(__('installer.footer_author')) ?> · <a href="https://www.itsweber.de" target="_blank" rel="noopener"><?= e(__('installer.footer_website')) ?></a> · <a href="mailto:info@itsweber.de"><?= e(__('installer.footer_email')) ?></a>
            </div>
        </div>
    </div>
    <script>
    document.querySelectorAll('.iw-pw-toggle').forEach(function(btn){
        btn.addEventListener('click',function(){
            var f=document.getElementById(btn.getAttribute('data-target'));
            if(!f)return;
            var v=f.type==='password';
            f.type=v?'text':'password';
            var s=btn.querySelector('.iw-pw-eye'),h=btn.querySelector('.iw-pw-eye-off');
            if(s)s.style.display=v?'none':'';
            if(h)h.style.display=v?'':'none';
            f.focus();
        });
    });
    </script>
</body>
</html>
