<div class="p-1 bg-neutral-100/80">
    <div class="p-1 text-neutral-900 uppercase font-semibold bg-neutral-200/50 rounded-sm">
        Os melhores dos eventos
    </div>

    <div class="flex justify-center items-center gap-8 m-auto py-5 flex-wrap">
        <?php
        foreach ($hallfame as $rank) : ?>
            <div class="w-56 bg-neutral-200 p-1">
                <table class="border-collpase w-full">
                    <thead class="bg-neutral-900">
                        <tr>
                            <th class="font-normal text-white text-sm p-2 text-left" colspan="3"><?= $rank['title'] ?></th>
                            <th class="font-normal text-white text-sm p-2 text-right"><?= $rank['tag_game'] ?></th>
                        </tr>
                    </thead>

                    <tbody>
                        <?php $cont = 0;
                        foreach ($rank['ranking'] as $tops) : $cont++;  ?>
                            <tr>
                                <td class="border-t border-neutral-400 px-1 py-2 text-xs"><?= $cont; ?></td>
                                <td class="border-t border-neutral-400 px-1 py-2 text-xs"><img src="<?= $tops['type'] == "char" ? __avatar($tops['imagem']) :  __guildmark($tops['imagem']) ?>" width="20" height="20"></td>
                                <td class="border-t border-neutral-400 px-1 py-2 text-xs font-semibold text-left">
                                    <a href="<?= __redirect("preview/{$tops['type']}/") ?><?= $tops['type'] == 'char' ? $tops['name'] : $tops['guild'] ?>" class="preview">
                                        <?= $tops['type'] == "char" ? $tops['name'] : $tops['guild'] ?>
                                    </a>
                                </td>
                                <td class="border-t border-neutral-400 px-1 py-2 text-xs font-semibold text-right"><?= $tops['score'] ?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php
        endforeach; ?>
    </div>

</div>