{
  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`
    })
  }
  
  let newPostSubscription = null;
  
  function hideNotification() {
    const notification = document.getElementById('new-post-notification');
    notification.classList.add('hidden');
  }
  
  function showNewPostNotification(url) {
    const notification = document.getElementById("new-post-notification");
    
    notification.classList.remove("hidden");
    
    document.getElementById("dismiss-new-post-button").onclick = () => {
      hideNotification();
      reconnectSSE();
    }
    
    document.getElementById("go-to-new-post-button").href = url;
    
    document.getElementById("unsub-new-post-button").onclick = () => {
      hideNotification()
    }
  }
  
  function reconnectSSE() {
    if (newPostSubscription) newPostSubscription.close();
    
    const threadEndpoint = document.getElementById("thread-subscribe-endpoint").value;
    newPostSubscription = new EventSource(threadEndpoint);
    newPostSubscription.onerror = (e) => {
      console.error(e);
    };
    newPostSubscription.addEventListener("new_post_url", (e) => {
      showNewPostNotification(e.data);
      newPostSubscription.close();
    })
  }
  window.addEventListener('beforeunload', () => {
    if(newPostSubscription)
    {
      newPostSubscription.close();
    }
  });
  reconnectSSE();
}