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

<main class="main">
    <?= $this->insert('includes/aside_info') ?>
    <div class="content">
        <div class="h2-title h2-title-content flex-s-c">
            <span> My Chest (Convert Gems to Coins)</span>
        </div>

        <div class="my-4">
            <ul class="_links">
                <li><a class="button" href="<?= __redirect("jewels/converte/coin") ?>">Convert Coin</a></li>
            </ul>
        </div>

        <?php if (plugin()->jewels) : ?>
            <div class="vault flex flex-wrap m-auto border-2 border-neutral-400">
                <?php foreach ($vault as $view) : ?>
                    <div class="box">
                        <?php if (isset($view['x'])) : ?>
                            <a <?= $view['block'] == "active" ? 'href="javascript:void(0)"' : '' ?> class="<?= $view['block'] == "active" ? 'jewel-trade' : '' ?> " <?= $view['block'] == "active" ? 'data-url="' . __redirect('auth/jewels/convete/to/coin') . '"' : '' ?> <?= $view['block'] == "active" ? "data-hex=\"{$view['hex']}\"" : '' ?> style="width: <?= $view['width'] ?>px;height:<?= $view['height'] ?>px;">
                                <div class="image-view <?= $view['block'] == 'block' ? 'block' : 'active' ?>">
                                    <img src="<?= __resources("items/{$view['image']}"); ?>" alt="item">
                                    <div class="preview">
                                        <?= $view['description'] ?>
                                    </div>
                                </div>
                            </a>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else : ?>
            <div class="message_warning">Function disabled by administration</div>
        <?php endif; ?>
    </div>
</main>
<script>
    var images = document.querySelectorAll(".vault .image-view");
    images.forEach(e => {
        e.onmousemove = event => {
            var x = event.clientX,
                y = event.clientY;

            var preview = event.target.parentElement.querySelector(".preview");
            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('.preview');
            preview.style.top = '0px';
            preview.style.left = '0px';
            preview.style.display = "none";
        }
    });
</script>