<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Junk rare cube</title>
    <style>
        body {
            background: #eee;
        }

        main {
            background: white;
            max-width: 1220px;
            margin: 0 auto;
            padding: 20pt;
        }

        h1,
        h2,
        h3 {
            margin: 0;
            padding: 0;
        }

        h2 {
            font-weight: normal;
        }

        .columns {
            padding: 20pt 0;
            display: flex;
        }

        .color-section {
            flex: 1;
        }

        .color-section header {
            text-align: center;
            padding: 5px;
        }

        .color-W header.color-header {
            background-color: #fff6eb;
        }

        .color-U header.color-header {
            background-color: #49b0fd;
        }

        .color-B header.color-header {
            background-color: #666;
            color: white;
        }

        .color-R header.color-header {
            background-color: #ff6868;
        }

        .color-G header.color-header {
            background-color: #78ce59;
        }

        .color-MC header.color-header {
            background: linear-gradient(to left, #f3ff6b, #ffb019);
        }

        .color-CL header.color-header {
            background-color: #d2d2d2;
        }

        .color-L header.color-header {
            background-color: #eeb445;
        }

        .type-section {
            border: 1px solid #aaa;
            border-radius: 5px;
            font-size: 10pt;
            margin: 10px 5px;
        }

        .type-section header.type-header {
            font-size: 12pt;
            font-weight: bold;
            border-bottom: 1px solid #ccc;
            padding: 5px;
        }

        .cards {
            position: relative;
        }

        .cmc-index {
            position: absolute;
            opacity: 0.1;
            right: 5px;
            font-size: 15pt;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            border-bottom: 1px solid #ccc;
        }

        ul li {
            display: flex;
        }

        ul li a {
            padding: 5px;
            flex: 1;
            color: inherit;
            text-decoration: none;
        }

        ul li a:hover {
            background-color: #eee;
        }

        ul:last-child {
            border-bottom: none;
        }

        .img-overlay {
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none;
        }

        .img-overlay img {
            width: auto;
            height: 300px;
        }

        small {
            color: #aaa;
            display: block;
        }
    </style>
</head>

<body>
    <main>
        <header>
            <h1>Junk rare cube (<%=cards.length%> cards)</h1>
            <h2>Using cards from <a href="https://www.cardmarket.com/en/Magic/Users/<%=user%>"><b><%= user %></b></a>
            </h2>
            <h2>Est. price without shipping: € <%= cards.reduce((a, c) => a + c.price, 0).toFixed(2) %></h2>
        </header>
        <section class="columns">
            <% Object.entries(cubecards).forEach(([color, colorcards]) => { %>
            <section class="color-section color-<%=color%>">
                <header class="color-header">
                    <h3><%=utils.prettyColor(color)%> (<%=utils.deepSum(colorcards)%>)</h3>
                </header>
                <% Object.entries(colorcards).sort((a, b) => color == "MC" || color == "L" ? utils.abcSort(a[0], b[0]) : utils.typeSort(a[0], b[0])).forEach(([type, typecards]) => { %>
                <article class="type-section">
                    <header class="type-header"><%= color == "MC" || color == "L" ? utils.prettyColor(type) : type %>
                        (<%=utils.deepSum(typecards)%>)</header>
                    <section class="cards">
                        <% Object.entries(typecards).forEach(([cmc, finalcards]) => { %>
                        <div class="cmc-index"><%=cmc%></div>
                        <ul>
                            <% finalcards.forEach(card => { %>
                            <li data-set="<%=card.set%>" data-num="<%=card.number%>">
                                <a target="_blank" data-image="<%=card.scryfallImageUrl%>"
                                    href="<%= card.scryfallUrl %>">
                                    <%= card.name %><small>€ <%=card.price.toFixed(2)%> - #<%=card.edhrecRank%></small>
                                </a>
                            </li>
                            <% }); %>
                        </ul>
                        <% }); %>
                    </section>
                </article>
                <% }); %>
            </section>
            <% }); %>
        </section>
    </main>

    <script>
        const overlay = document.createElement("div");
        const img = document.createElement("img");
        overlay.appendChild(img);
        overlay.classList.add("img-overlay");
        document.body.appendChild(overlay);
        overlay.style.display = "none";
        Array.prototype.slice.call(document.querySelectorAll("li a[data-image]"), 0).forEach(el => {
            el.addEventListener("mouseenter", ev => {
                overlay.style.display = "block";
                img.src = el.dataset.image;
            });
            el.addEventListener("mouseleave", ev => {
                overlay.style.display = "none";
            });
            el.addEventListener("mousemove", ev => {
                overlay.style.left = `${ev.clientX}px`;
                overlay.style.top = `${ev.clientY - 320}px`;
                console.log(ev);
            });
        });
    </script>
</body>

</html>