<!DOCTYPE html>
<html>
<head>
    <title>Database Status</title>
    <style>
        body { font-family: Arial; background:#f4f6f8; padding:40px; }
        .box { max-width:600px; margin:auto; padding:30px; border-radius:6px; }
        .success { background:#e6fffa; border:1px solid #34d399; }
        .error { background:#fee2e2; border:1px solid #f87171; }
        ul { text-align:left; margin-top:15px; }
        li { padding:5px 0; }
    </style>
</head>
<body>

<div class="box <?= $db_status ? 'success' : 'error' ?>">
    <h2>
        <?= $db_status ? '✅ Connection Successful' : '❌ Connection Failed' ?>
    </h2>

    <p><?= esc($message) ?></p>

    <?php if ($db_status): ?>
        <hr>
        <h3>📋 Tables in Database</h3>

        <?php if (!empty($tables)): ?>
            <ul>
                <?php foreach ($tables as $table): ?>
                    <li><?= esc($table) ?></li>
                <?php endforeach; ?>
            </ul>
        <?php else: ?>
            <p>No tables found.</p>
        <?php endif; ?>
    <?php endif; ?>
</div>

</body>
</html>
