<% cache comment do %>
  <%# Helper Dependency Updated: avatar_image_tag 2025-12-15 %>
  <%= turbo_frame_tag comment, :container, class: { "comment-by-system": comment.creator.system? } do %>
    <%# Cache bump 2025-12-14: action text attachment rendering changed for lightbox -%>
    <div id="<%= dom_id(comment) %>" data-creator-id="<%= comment.creator_id %>" class="comment align-start full-width">
      <figure class="comment__avatar flex-item-no-shrink" aria-hidden="true">
        <%= avatar_tag comment.creator, hidden_for_screen_reader: true %>
      </figure>

      <div class="comment__content flex flex-column flex-item-grow full-width">
        <div class="comment__author flex align-center gap-half">
          <h3 class="font-weight-normal txt-normal flex-item-justify-start min-width overflow-ellipsis">
            <strong>
              <%= link_to comment.creator.name, comment.creator, class: "txt-ink btn btn--plain fill-transparent", data: { turbo_frame: "_top" } %>
            </strong>

            <%= link_to comment, class: "comment__permalink-title", data: { turbo_frame: "_top" } do %>
              <%= local_datetime_tag comment.created_at, style: :agoorweekday %>,
              <%= local_datetime_tag comment.created_at, style: :time %>
            <% end %>
          </h3>

          <button class="comment__history btn btn--circle-mobile borderless txt-x-small" data-action="toggle-class#toggle">
            <%= icon_tag "history", class: "icon--mobile-only" %>
            <span>Full history</span>
          </button>

          <%= link_to edit_card_comment_path(comment.card, comment),
                class: "comment__edit btn btn--circle borderless translucent", data: { only_visible_to_you: true } do %>
            <%= icon_tag "menu-dots-horizontal" %>
            <span class="for-screen-reader">Edit this comment</span>
          <% end %>
        </div>

        <div class="comment__body lexxy-content" data-controller="syntax-highlight retarget-links" data-turbo-permanent>
          <%= comment.body %>
        </div>

        <%= render "reactions/reactions", reactable: comment %>
      </div>
    </div>
  <% end %>
<% end %>
