<?= $this->layout('_layout', ['title' => $title]); ?>

<div class="p-1 bg-neutral-100/80">
    <div class="p-1 text-neutral-900 uppercase font-semibold bg-neutral-200/50 rounded-sm">
        Visualizando classe: <?= $classe ?>
    </div>

    <div class="flex items-start gap-5">
        <div class="w-[850px]">
            <ul class="flex gap-1 flex-wrap mb-3">
                <?php foreach (characters['classes'] as $class) : ?>
                    <li>
                        <a href="<?= __redirect("market/view/characters/class/{$class['short_name']}") ?>" class="bg-orange-500 rounded-sm text-[11px] text-white py-0.5 px-2 hover:bg-orange-700 select-category focus:bg-orange-800"> <?= $class['name'] ?></a>
                    </li>
                <?php endforeach; ?>
            </ul>
            <?php if (plugin()->market) : ?>
                <?php if ($items) :  ?>
                    <div class="flex gap-5 justify-center py-3 flex-wrap">
                        <?php foreach ($items as $item) :
                        ?>
                            <div class="v-tier text-center p-3 bg-neutral-900 border-2 border-neutral-200 rounded-xs text-xs w-60">
                                <p class="p-1 bg-neutral-600 rounded-lg text-white"><?= $item->name ?></p>
                                <div class="my-4 mx-auto text-center relative preview w-24 h-24">
                                    <img src="<?= __avatar(json_decode($item->description)->avatar) ?>" alt="" class="w-24 h-24 object-contain">
                                </div>
                                <div class="flex justify-between mb-3">
                                    <div class="space-y-1">
                                        <p class="p-0.5 rounded-sm bg-neutral-500 text-white text-xs flex justify-between w-24">Força: <span><?= json_decode($item->description)->strength ?></span></p>
                                        <p class="p-0.5 rounded-sm bg-neutral-500 text-white text-xs flex justify-between w-24">Agilidade: <span><?= json_decode($item->description)->dexterity ?></span></p>
                                        <p class="p-0.5 rounded-sm bg-neutral-500 text-white text-xs flex justify-between w-24">Vitalidade: <span><?= json_decode($item->description)->vitality ?></span></p>
                                        <p class="p-0.5 rounded-sm bg-neutral-500 text-white text-xs flex justify-between w-24">Energia: <span><?= json_decode($item->description)->energy ?></span></p>
                                    </div>
                                    <div class="space-y-1">
                                        <p class="p-0.5 rounded-sm bg-neutral-500 text-white text-xs flex justify-between w-24">Resets: <span><?= json_decode($item->description)->resets ?></span></p>
                                        <p class="p-0.5 rounded-sm bg-neutral-500 text-white text-xs flex justify-between w-24">NResets: <span><?= json_decode($item->description)->mresets ?></span></p>
                                        <p class="p-0.5 rounded-sm bg-neutral-500 text-white text-xs flex justify-between w-24">Kills: <span><?= json_decode($item->description)->killer ?></span></p>
                                        <p class="p-0.5 rounded-sm bg-neutral-500 text-white text-xs flex justify-between w-24">Hero: <span><?= json_decode($item->description)->hero ?></span></p>
                                    </div>
                                </div>
                                <p class="p-1 bg-neutral-600 rounded-full text-white"><?= $item->price ?> <?= market['coin_name'] ?></p>
                                <div>
                                    <a class="rounded-full py-1 px-4 bg-orange-500 text-white block mt-4 mx-auto text-sm border-2 border-orange-400 hover:bg-orange-700 transition ease-in-out duration-500" href="<?= __redirect("market/view/character/{$item->name}/details")?>">+ Detalhes</a>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php else : ?>
                    <div class="p-1 bg-yellow-300 text-sm rounded-full text-black text-center w-full">Não há personagens no mercado no momento</div>
                <?php endif; ?>
            <?php else : ?>
                <div class="p-1 bg-yellow-300 text-sm rounded-full text-black text-center w-full">Função desabilitada pela administração</div>
            <?php endif; ?>
        </div>
    </div>
</div>