<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Choose Account</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="icon" href="<?= base_url('assets/images/favicon.ico') ?>">
</head>

<body class="bg-light">

    <div class="container mt-5">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">Select Account Type</h4>
            </div>
            <div class="card-body">
                <p class="mb-4">You have multiple roles. Please select the account you'd like to log into:</p>

                <div class="d-flex flex-wrap gap-3">
                    <?php foreach ($roles as $role): ?>
                    <a href="<?= base_url('roleswitcher/switchTo/' . urlencode($role)) ?>"
                        class="btn btn-outline-primary">
                        <?= ucfirst(str_replace('_', ' ', $role)) ?>
                    </a>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>

</body>

</html>