<?= $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 Vault</span>
        </div>

        <div class="_links">
            <a class="button" href="<?= __redirect("market/my/ads") ?>">My ads</a>
        </div>

        <?php if (plugin()->market) : ?>
            <div class="vault">
                <?php foreach ($vault as $view) : ?>
                    <div class="box">
                        <?php if (isset($view['x'])) : ?>
                            <a href="<?= __redirect('market/advertise/item/' . $view['hex']) ?>" style="width: <?= $view['width'] ?>px;height:<?= $view['height'] ?>px;">
                                <div class="image-view">
                                    <img src="<?= __resources("items/{$view['image']}"); ?>" alt="">
                                    <div class="preview">
                                        <?= $view['description'] ?>
                                    </div>
                                </div>
                            </a>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else : ?>
            <div class="message_warning">Função desabilitada pela administração</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>