<div id="message"></div>

<script>
  function displayMessage(message, afColor) {
    var top_message_box = document.createElement("div");
    top_message_box.className = "message";
    top_message_box.innerHTML = message;
    top_message_box.style.display = "block";
    top_message_box.style.backgroundColor = afColor;
    document.body.appendChild(top_message_box);
    top_message_box.classList.add("slideIn");
    setTimeout(function () {
      top_message_box.remove();
    }, 2500);
  }

  // e.g. color_name: "--af-red"
  function getAfColor(color_name) {
    const rootStyle = getComputedStyle(document.documentElement);
    return rootStyle.getPropertyValue(color_name).trim();
  }

  function displayHttpStatusAndPayload(response) {
    response.text().then((text) => {
      displayFail(`
      <b>${response.status}: ${response.statusText}</b>
      <br>${text}`);
    });
  }

  function displayHttpFail(statusCode, statusText, responseText) {
    displayFail(`
      <b>${statusCode}: ${statusText}</b>
      <br>${responseText}`);
  }

  function displaySuccess(message) {
    displayMessage(message, getAfColor("--af-dark-cyan"));
  }

  function displayFail(message) {
    displayMessage(message, getAfColor("--af-dark-red"));
  }
</script>
