<head>
    <link rel="stylesheet" href="./style.css" type="text/css" />

    <style>
        .wrapper {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
            min-height: 100%;
            padding: 1em;
        }

        h1 {
            text-align: center;
        }

        .buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5em;
            margin-top: 0.25em;
        }

        button {
            cursor: pointer;
            padding: 0.5em;
            color: var(--fg);
            border: none;
            border-radius: 3px;
            font-weight: bold;
            transition: filter 0.2 ease-in-out;
        }

        button:hover,
        button:active {
            filter: brightness(0.9);
        }

        .green {
            background-color: #248046;
        }

        .red {
            background-color: #ed4245;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <section>
            <h1>Update Available</h1>
            <p>There's a new update for Aerocord! Update now to get new fixes and features!</p>
            <p>
                Current: <span id="current"></span>
                <br />
                Latest: <span id="latest"></span>
            </p>

            <h2>Changelog</h2>
            <p id="changelog">Loading...</p>
        </section>

        <section>
            <label id="disable-remind">
                <input type="checkbox" />
                <span>Do not remind again for </span>
            </label>

            <div class="buttons">
                <button name="download" class="green">Download Update</button>
                <button name="close" class="red">Close</button>
            </div>
        </section>
    </div>
</body>

<script type="module">
    const data = await Updater.getData();
    document.getElementById("current").textContent = data.currentVersion;
    document.getElementById("latest").textContent = data.latestVersion;

    document.querySelector("#disable-remind > span").textContent += data.latestVersion;

    function checkDisableRemind() {
        const checkbox = document.querySelector("#disable-remind > input");
        if (checkbox.checked) {
            Updater.ignore();
        }
    }

    const onClicks = {
        download() {
            checkDisableRemind();
            Updater.download();
        },
        close() {
            checkDisableRemind();
            Updater.close();
        }
    };

    for (const name in onClicks) {
        document.querySelectorAll(`button[name="${name}"]`).forEach(button => {
            button.addEventListener("click", onClicks[name]);
        });
    }
</script>

<script type="module">
    import { micromark } from "https://esm.sh/micromark@3?bundle";
    import { gfm, gfmHtml } from "https://esm.sh/micromark-extension-gfm@2?bundle";

    const changelog = (await Updater.getData()).release.body;
    if (changelog)
        document.getElementById("changelog").innerHTML = micromark(changelog, {
            extensions: [gfm()],
            htmlExtensions: [gfmHtml()]
        })
            .replace(/h1>/g, "h3>")
            .replace(/<a /g, '<a target="_blank" ');
</script>