<div>
    <?php if (plugin()->market) : ?>
        <?php if ($items) :  ?>


            <div class="item-view flex-c-c">
                <?php foreach ($items as $item) : ?>
                    <div class="v-tier market-item <?= strtolower($item['tier']) ?>" id="<?= strtolower($item['tier']) ?>">
                        <p class="name"><?= $item['details']['name'] ?></p>
                        <div class="details preview">
                            <img src="<?= __resources("items/{$item['details']['image']}"); ?>" alt="<?= $item['details']['name'] ?>" class="image <?= strtolower($item['tier']) ?>">
                            <div class="informations">
                                <?= $item['details']['description'] ?>
                            </div>
                        </div>
                        <div class="flex-c-c">
                            <?php if ($item['price']) : ?>
                                <p class="price"><?= $item['price'] ?> HC</p>
                            <?php endif; ?>
                            <?php if ($item['zen']) : ?>
                                <p class="price"><?= $item['zen'] ?> Zen</p>
                            <?php endif; ?>
                            <?php if ($item['soul']) : ?>
                                <p class="price flex-c"><img src="<?= __files("images/jewels/soul.webp") ?>" alt=""><?= $item['soul'] ?> </p>
                            <?php endif; ?>
                            <?php if ($item['life']) : ?>
                                <p class="price flex-c"><img src="<?= __files("images/jewels/life.webp") ?>" alt=""><?= $item['life'] ?> </p>
                            <?php endif; ?>
                            <?php if ($item['chaos']) : ?>
                                <p class="price flex-c"><img src="<?= __files("images/jewels/chaos.webp") ?>" alt=""><?= $item['chaos'] ?> </p>
                            <?php endif; ?>
                            <?php if ($item['bless']) : ?>
                                <p class="price flex-c"><img src="<?= __files("images/jewels/bless.webp") ?>" alt=""><?= $item['bless'] ?> </p>
                            <?php endif; ?>
                            <?php if ($item['creation']) : ?>
                                <p class="price flex-c"><img src="<?= __files("images/jewels/creation.webp") ?>" alt=""><?= $item['creation'] ?> </p>
                            <?php endif; ?>
                            <?php if ($item['guardian']) : ?>
                                <p class="price flex-c"><img src="<?= __files("images/jewels/guardian.webp") ?>" alt=""><?= $item['guardian'] ?> </p>
                            <?php endif; ?>
                            <?php if ($item['harmony']) : ?>
                                <p class="price flex-c"><img src="<?= __files("images/jewels/harmony.webp") ?>" alt=""><?= $item['harmony'] ?> </p>
                            <?php endif; ?>
                        </div>
                        <div class="action">
                            <a class="button" href="javascript:void(0)" data-url="<?= __redirect('auth/market/buy/item/' . $item['id']) ?>" data-name="<?= $item['details']['name'] ?>">Comprar</a>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else : ?>
            <div class="warning">Não há itens no mercado no momento</div>
        <?php endif; ?>
    <?php endif; ?>
</div>

<script>
    var images = document.querySelectorAll(".preview .image");
    images.forEach(e => {
        e.onmousemove = event => {
            var x = event.clientX,
                y = event.clientY;

            var preview = event.target.parentElement.querySelector(".informations");
            preview.style.top = (y + 15) + 'px';
            preview.style.left = (x + 15) + 'px';
            preview.style.display = "block";
        }

        e.onmouseout = event => {
            var preview = event.target.parentElement.querySelector('.informations');
            preview.style.top = '0px';
            preview.style.left = '0px';
            preview.style.display = "none";
        }
    });
</script>