{
  const ta = document.getElementById("babycode-content");
  
  for (let button of document.querySelectorAll(".reply-button")) {
    button.addEventListener("click", (e) => {
      ta.value += button.value;
      ta.scrollIntoView()
    })
  }
  
  const deleteDialog = document.getElementById("delete-dialog");
  const deleteDialogCloseButton = document.getElementById("post-delete-dialog-close");
  let deletionTargetPostContainer;
  
  function closeDeleteDialog() {
    deletionTargetPostContainer.style.removeProperty("background-color");
    deleteDialog.close();
  }
  
  deleteDialogCloseButton.addEventListener("click", (e) => {
    closeDeleteDialog();
  })
  deleteDialog.addEventListener("click", (e) => {
    if (e.target === deleteDialog) {
      closeDeleteDialog();
    }
  })
  for (let button of document.querySelectorAll(".post-delete-button")) {
    button.addEventListener("click", (e) => {
      deleteDialog.showModal();
      const postId = button.value;
      deletionTargetPostContainer = document.getElementById("post-" + postId).querySelector(".post-content-container");
      deletionTargetPostContainer.style.setProperty("background-color", "#fff");
      const form = document.getElementById("post-delete-form");
      form.action = `/post/${postId}/delete`
    })
  }
}