<!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">
</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>
</body>
</html>
