const captcha_span = document.getElementsByClassName("captcha")[0];
const captcha_img = captcha_span.children[1];

captcha_span.children[3].innerHTML
    = `<button id="refresh">Refresh</button>ed in <b><span id="remain">600</span></b> seconds.`;

const captcha_refresh = document.getElementById("refresh");
const captcha_remain = document.getElementById("remain");

const g_captcha_timeout_seconds = 600;
let g_captcha_timeout_remain = g_captcha_timeout_seconds;

async function newCaptcha() {
    const id = await fetch("/captcha/").then(r => r.text());
    setTimeout(() => { captcha_img.src = `/captcha/${id}/image` }, 400);
    g_captcha_timeout_remain = g_captcha_timeout_seconds;
}

captcha_span.classList.toggle("refresh");
captcha_refresh.classList.toggle("refresh");
captcha_refresh.addEventListener("click", async e => {
    e.preventDefault();
    await newCaptcha();
});

setInterval(async () => {
    captcha_remain.innerText = g_captcha_timeout_remain--;
    if (g_captcha_timeout_remain == 0)
        await newCaptcha();
}, 1000);