<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Job Portal — Installation Wizard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { background: #f4f6f9; }
        .installer-shell { max-width: 760px; margin: 40px auto; }
        .step-pill { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
        .step-pill.done { background: #198754; color: #fff; }
        .step-pill.active { background: #0d6efd; color: #fff; }
        .step-pill.pending { background: #e9ecef; color: #6c757d; }
        .req-row.pass { color: #198754; }
        .req-row.fail { color: #dc3545; }
    </style>
</head>
<body>
<div class="installer-shell">
    <div class="text-center mb-4">
        <h3>Job Portal — Installation Wizard</h3>
        <p class="text-muted">Step <?= $currentStep ?? 1 ?> of 8</p>
    </div>

    <div class="d-flex justify-content-between mb-4 px-2">
        <?php for ($i = 1; $i <= 8; $i++): ?>
            <span class="step-pill <?= $i < ($currentStep ?? 1) ? 'done' : ($i === ($currentStep ?? 1) ? 'active' : 'pending') ?>"><?= $i ?></span>
        <?php endfor; ?>
    </div>

    <div class="card shadow-sm">
        <div class="card-body p-4">
            <?= $this->renderSection('content') ?>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<?= $this->renderSection('scripts') ?>
</body>
</html>
