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

<head>
    <meta charset="UTF-8">
    <title>Lista de Torneos</title>
    <link rel="stylesheet" href="../public/css/style.css">
    <link rel="stylesheet" href="../public/css/tournament.css">
</head>

<body>
    <div class="head">
        <div class="tittle">Torneos</div>
    </div>
    <div class="wb">
        <div class="tournaments-container">
            <?php foreach ($tournaments as $tournament): ?>
                <a href="../public/tournament.php?id=<?= $tournament['id'] ?>">
                    <img src="../public/img/tournament/banner-<?= htmlspecialchars($tournament['pic']) ?>.webp" loading="lazy" class="item">
                </a>
            <?php endforeach; ?>
        </div>
    </div>
    <script>
        const tournaments = <?= json_encode($tournaments); ?>;
        console.log('tournaments:', tournaments);
    </script>
</body>

</html>