<?php require PATH . '/theme/view/common/head.php'; ?>
<?php require PATH . '/theme/view/common/header.php'; ?>
<div class="py-lg-5">
    <div class="container h-100">
        <div class="row justify-content-center align-items-center">
            <div class="col-xl-8 col-lg-10">
                <?php $i = 1 ;?>
                <?php foreach($Listings as $Listing) { ?>
                <?php $Ranked    = ranked((int)$Listing['xp'],$Rank); ?>
                <?php if($i == 1) { ?>
                <div class="leaderboard">
                <?php } ?>
                <?php if($i <= 3) { ?>
                    <div class="user">
                        <div class="avatar">
                            <?php echo gravatar($Listing['id'],$Listing['username'],$Listing['avatar'],'avatar-body rounded-circle fs-lg text-white fs-xs',$Listing['color']);?>
                            <span class="avatar-badge"><?php echo $i?></span>
                        </div>
                        <div class="user-body text-center fs-sm text-heading mt-4">
                            <div class="text-uppercase text-xp fw-bold fs-xxs"><?php echo $Ranked['name'];?></div>
                            <a href="<?php echo user($Listing['id'],$Listing['username']);?>" class="text-current fw-semibold"><?php echo $Listing['username'];?></a>
                            <div class="fs-xs text-muted"><?php echo (int)$Listing['xp'].' XP';?></div>
                        </div>
                    </div>
                <?php } ?>
                <?php if($i == 3) { ?>
                </div>
                <?php } ?>

                <?php if($i > 3) { ?>
                <div class="card mb-2">
                    <div class="card-body py-2">
                        <div class="row align-items-center">
                            <div class="col-lg-6 col-8">
                                <div class="d-flex align-items-center">
                                    <div class="btn btn-square text-heading fw-bold fs-base"><?php echo $i?></div>
                                    <div class="flex-grow-0"><?php echo gravatar($Listing['id'],$Listing['username'],$Listing['avatar'],'avatar rounded-circle fs-sm text-white fs-xs',$Listing['color']);?></div>
                                    <a href="<?php echo user($Listing['id'],$Listing['username']);?>" class="fs-sm text-heading px-3 flex-fill">
                                        <?php echo $Listing['username'];?>
                                    </a>
                                </div>
                            </div>
                            <div class="col-lg-3 col-4">
                                <div class="fs-sm text-muted">
                                    <?php echo (int)$Listing['xp'].' XP';?>
                                </div>
                            </div>
                            <div class="col-lg-3 text-end d-none d-lg-block">
                                <div class="d-flex align-items-center justify-content-end lh-1">
                                    <div class="fs-xxs text-uppercase text-heading fw-bold">
                                        <?php echo $Ranked['name'];?>
                                    </div>
                                    <div class="flex-grow-0 ms-3">
                                        <img src="<?php echo LOCAL.'/rank/'.$Ranked['level'].'.svg';?>" width="24" height="24">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php } ?>
                <?php $i++; } ?>
            </div>
        </div>
    </div>
</div>
<?php require PATH . '/theme/view/common/javascript.php'; ?>
<?php require PATH . '/theme/view/common/footer.php'; ?>