<?php


$currentStep = $step ?? 1;
$stepLabels = ['Welcome', 'Requirements', 'Database', 'Admin Account', 'Settings', 'Complete'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Installation - TubePress</title>
    <style><?php readfile(__DIR__ . '/style.css'); ?></style>
</head>
<body>
    <div class="install-wrapper">

        <div class="install-header">
            <h1>Tube<span>Press</span></h1>
            <div class="version">Version <?= APP_VERSION ?></div>
        </div>

        <div class="steps">
            <?php foreach ($stepLabels as $i => $label):
                $num = $i + 1;
                if ($num < $currentStep) {
                    $stepClass = 'completed';
                } elseif ($num === $currentStep) {
                    $stepClass = 'active';
                } else {
                    $stepClass = '';
                }
            ?>
                <?php if ($i > 0): ?><div class="step-line"></div><?php endif; ?>
                <div class="step-item <?= $stepClass ?>">
                    <div class="step-circle"><?= $num < $currentStep ? '&#10003;' : $num ?></div>
                </div>
            <?php endforeach; ?>
        </div>

        <div class="install-card">
            <?php if (!empty($pageTitle)): ?>
            <div class="card-header">
                <h2><?= htmlspecialchars($pageTitle) ?></h2>
                <?php if (!empty($pageDesc)): ?>
                <p><?= htmlspecialchars($pageDesc) ?></p>
                <?php endif; ?>
            </div>
            <?php endif; ?>

            <div class="card-body">
                <?= $content ?>
            </div>
        </div>

    </div>
</body>
</html>
