<h1 class="title"><?= __('Top Players') ?></h1>

<ul class="tabs">
    <?php foreach ($rankings as $index => $ranking): ?>
        <li><a class="tab-link<?= $index === 0 ? ' active' : '' ?>" href="#tab-<?= strtolower($ranking['id']) ?>"><?= $ranking['name'] ?></a></li>
    <?php endforeach ?>
</ul>

<div class="tabs-content">
    <?php foreach ($rankings as $index => $ranking): ?>
        <div class="tab-content<?= $index === 0 ? ' active' : '' ?>" id="tab-<?= strtolower($ranking['id']) ?>">
            <div class="top-players">
                <?php foreach ($ranking['data'] as $type => $data): ?>
                    <div class="top-player">
                        <div class="type"><?= __(ucfirst($type)) ?></div>
                        <?php if (!empty($data)): ?>
                            <div class="name">
                                <?php if (plugin_active('Profile')): ?>
                                    <a data-ajax href="<?= url_to('/profile/' . ($ranking['is_guild'] ? 'guild' : 'character') . '/' . $data[0]['name']) ?>"><?= $data[0]['name'] ?></a>
                                <?php else: ?>
                                    <?= $data[0]['name'] ?>
                                <?php endif ?>
                            </div>

                            <div class="image">
                                <?php if ($ranking['is_guild']): ?>
                                    <?= util('Guild')->logo($data[0]['mark'], 74) ?>
                                <?php else: ?>
                                    <img src="<?= util('Character')->avatar($data[0]['avatar']) ?>" width="60" height="76" />
                                <?php endif ?>
                            </div>

                            <div class="score"><?= __('Score') ?>: <?= $data[0]['score'] ?></div>
                        <?php endif ?>
                    </div>
                <?php endforeach ?>
            </div>
        </div>
    <?php endforeach ?>
</div>