document.addEventListener('DOMContentLoaded', function() {
  var modal = document.getElementById("user_actions_modal");
  var modal_content = document.getElementById("modal_content");
  var buttons = document.getElementsByClassName("modal_button");
  var spans = document.getElementsByClassName("modal_close");

  for (let i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
      switch (i) {
        case 0:
          openModal("reset_pw_form");
          break;
        case 1:
          openModal("update_email_form");
          break;
        case 2:
          openModal("update_username_form");
          break;
        case 3:
          openModal("delete_account_form");
          break;
        // case 3:
        //   openModal("request_role_form");
        //   break;
        default:
          break;
      }
    }
  }

  // Open modal function
  function openModal(formId) {
    modal_content.innerHTML = document.getElementById(formId).innerHTML;
    modal.style.display = "block";
  }

  modal_content.addEventListener('click', function(event) {
    if (event.target.classList.contains('modal_close')) {
      closeModal();
    }
  });

  window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
      closeModal();
    }
  };

  // Close modal function
  function closeModal() {
    modal_content.innerHTML = ""; // Clear content when closing
    modal.style.display = "none";
  }

});