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

  for (let i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
      switch (buttons[i].id) {
        case 'reset_pw_form_button':
          openModal('reset_pw_form');
          break;
        case 'update_email_form_button':
          openModal('update_email_form');
          break;
        case 'update_username_form_button':
          openModal('update_username_form');
          break;
        case 'request_role_form_button':
          openModal("request_role_change_form");
          break;
        case 'delete_account_form_button':
          openModal('delete_account_form');
          break;
        default:
          break;
      }
    }
  }

  // Open modal function
  function openModal(formId) {
    modal_content.innerHTML = document.getElementById(formId).innerHTML;
    user_actions_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
    user_actions_modal.style.display = "none";
  }

});