<div id="comment_tabs" class="border-b border-slate-200">
  <nav class="-mb-px flex space-x-6" aria-label="Tabs">
    <% grouped_comments = entry.comments.group_by(&:language) %>
    <% language_groups = supported_languages.map { |language| [language, grouped_comments[language] || []] } %>
    <% language_groups.unshift([:all, entry.comments]) %>
    <% language_groups.each do |language, comments| %>
      <% language_label = language == :all ? "All languages" : language&.name %>
      <% language_code = language == :all ? "all" : language&.code %>
      <a href="#"
         class="comment-tab border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
         data-lang="<%= language_code %>">
        <%= language_label %> <span class="bg-slate-100 text-slate-600 ml-2 py-0.5 px-2.5 rounded-full text-xs font-medium"><%= comments.count %></span>
      </a>
    <% end %>
  </nav>
</div>

<div class="mt-4">
  <% if entry.comments.empty? %>
    <p class="text-slate-500">No comments yet. Be the first to add one!</p>
  <% end %>
  <% language_groups.each do |language, comments| %>
    <% language_code = language == :all ? "all" : language&.code %>
    <div id="comments-<%= language_code %>" class="comment-group space-y-4 hidden">
      <% comments.each do |comment| %>
        <%= render "entries/comment", comment: comment %>
      <% end %>
    </div>
  <% end %>
</div>
