function loadErrors() {
    return fetch(
        `/dashboard/api/guild/${guildId()}/reminders?status=deleted,sent,failed`
    ).then((response) => response.json());
}

document.addEventListener("paneLoad", (ev) => {
    if (ev.detail.pane !== "errors") {
        return;
    }

    document.querySelectorAll(".reminderError").forEach((el) => el.remove());

    const template = document.getElementById("reminderError");
    const container = document.getElementById("reminderLog");

    loadErrors()
        .then((res) => {
            res = res
                .filter((r) => r.status_change_time !== null)
                .sort((a, b) => a.status_change_time < b.status_change_time);

            for (const reminder of res) {
                const newRow = template.content.cloneNode(true);

                newRow.querySelector(".reminderError").dataset["case"] = reminder.status;

                const statusTime = new luxon.DateTime.fromISO(
                    reminder.status_change_time,
                    { zone: "UTC" }
                );
                newRow.querySelector(".reminderName").textContent = reminder.name;
                newRow.querySelector(".reminderMessage").textContent =
                    reminder.status_message;
                newRow.querySelector(".reminderTime").textContent = statusTime
                    .toLocal()
                    .toLocaleString(luxon.DateTime.DATETIME_MED);

                container.appendChild(newRow);
            }
        })
        .finally(() => {
            $loader.classList.add("is-hidden");
        });
});