<?php
/**
 * Installer chrome: a self-contained page with a step indicator sidebar.
 *
 * @var \BotGuard\Core\View $this
 * @var string[] $steps
 * @var string   $currentStep
 * @var \BotGuard\Core\Csrf $csrf
 */
$labels = [
    'welcome' => 'Welcome', 'license' => 'License', 'requirements' => 'Requirements',
    'database' => 'Database', 'administrator' => 'Administrator', 'website' => 'Website',
    'install' => 'Install', 'finish' => 'Finish',
];
$icons = [
    'welcome' => 'bi-stars', 'license' => 'bi-key', 'requirements' => 'bi-check2-square',
    'database' => 'bi-database', 'administrator' => 'bi-person-badge', 'website' => 'bi-globe',
    'install' => 'bi-download', 'finish' => 'bi-flag',
];
$currentIndex = array_search($currentStep, $steps, true) ?: 0;
$title = isset($title) ? e($title) : 'Install';
$flashSuccess = isset($session) ? $session->getFlash('success') : null;
$flashError = isset($session) ? $session->getFlash('error') : null;
?>
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="<?= isset($csrf) ? e($csrf->token()) : '' ?>">
    <meta name="robots" content="noindex,nofollow">
    <title><?= $title ?> · BotGuard Installer</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="/assets/css/app.css" rel="stylesheet">
    <style>body{min-height:100vh;background:radial-gradient(1000px 600px at 20% -10%, var(--bs-primary-bg-subtle), var(--bs-body-bg));}</style>
</head>
<body>
<div class="container py-4 py-lg-5">
    <div class="d-flex align-items-center gap-2 mb-4">
        <i class="bi bi-shield-check text-primary fs-3"></i>
        <h1 class="h4 mb-0">BotGuard <span class="text-secondary fw-normal">Installer</span></h1>
    </div>
    <div class="row g-4">
        <div class="col-lg-3">
            <div class="list-group">
                <?php foreach ($steps as $i => $step): ?>
                    <?php
                    $done = $i < $currentIndex;
                    $active = $i === $currentIndex;
                    $cls = $active ? 'list-group-item-primary' : '';
                    ?>
                    <div class="list-group-item d-flex align-items-center gap-2 <?= $cls ?>">
                        <?php if ($done): ?>
                            <i class="bi bi-check-circle-fill text-success"></i>
                        <?php else: ?>
                            <i class="bi <?= e($icons[$step] ?? 'bi-circle') ?> <?= $active ? 'text-primary' : 'text-secondary' ?>"></i>
                        <?php endif; ?>
                        <span class="<?= $active ? 'fw-semibold' : ($done ? '' : 'text-secondary') ?>"><?= e($labels[$step] ?? $step) ?></span>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        <div class="col-lg-9">
            <?php if ($flashSuccess): ?>
                <div class="alert alert-success"><i class="bi bi-check-circle"></i> <?= e($flashSuccess) ?></div>
            <?php endif; ?>
            <?php if ($flashError): ?>
                <div class="alert alert-danger"><i class="bi bi-exclamation-triangle"></i> <?= e($flashError) ?></div>
            <?php endif; ?>
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4 p-lg-5">
                    <?= $this->yield('content') ?>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
