<% if current_user %>
<div class="mt-8">
  <div class="flex items-center justify-between mb-4">
    <h3 class="text-lg font-bold text-slate-900">Discussion</h3>
    <button data-action="click->comments#open" class="bg-indigo-600 text-white px-4 py-2 rounded-full shadow hover:bg-indigo-700 transition text-sm font-semibold">
      Add Comment
    </button>
  </div>

  <%= render "entries/comment_tabs", entry: entry %>

  <div id="comment_form_modal" data-comments-target="modal" data-action="click->comments#close" class="hidden fixed inset-0 bg-slate-900 bg-opacity-50 z-40 flex items-center justify-center">
    <%= render "entries/comment_modal_content", entry: entry %>
  </div>
</div>

<script>
  function activateCommentTab(targetLanguageCode) {
    const commentGroups = document.querySelectorAll(".comment-group");
    commentGroups.forEach((group) => {
      const isTarget = group.id === `comments-${targetLanguageCode}`;
      group.classList.toggle("hidden", !isTarget);
    });

    const tabs = document.querySelectorAll(".comment-tab");
    tabs.forEach((tab) => {
      const isActive = tab.dataset.lang === targetLanguageCode;
      tab.classList.toggle("text-slate-900", isActive);
      tab.classList.toggle("border-indigo-600", isActive);
      tab.classList.toggle("text-slate-500", !isActive);
      tab.classList.toggle("border-transparent", !isActive);
    });
  }

  document.addEventListener("click", (event) => {
    const tab = event.target.closest(".comment-tab");
    if (!tab) {
      return;
    }

    event.preventDefault();
    activateCommentTab(tab.dataset.lang);
  });

  document.addEventListener("turbo:load", () => {
    activateCommentTab("all");
  });
</script>
<% end %>
