<div id="<%= dom_id(reaction) %>"
      class="reaction"
      data-controller="reaction-delete"
      data-reaction-delete-reacter-id-value="<%= reaction.reacter.id %>"
      data-controller="reaction-delete"
      data-reaction-delete-perform-class="reaction--deleting"
      data-reaction-delete-reveal-class="expanded"
      data-reaction-delete-deleteable-class="reaction--deleteable"
      data-reaction-delete-reacter-id-value="<%= reaction.reacter.id %>">
  <figure class="reaction__avatar margin-none flex-item-no-shrink">
    <%= avatar_tag reaction.reacter, aria: { label: "#{reaction.reacter.name} reacted #{reaction.content}" } %>
  </figure>

  <%= tag.span reaction.content, role: "button",
        class: [ "txt-small", { "txt-medium": reaction.all_emoji? } ],
        data: { action: "click->reaction-delete#reveal keydown.enter->reaction-delete#reveal:prevent", reaction_delete_target: "content" } %>

  <%= button_to card_comment_reaction_path(reaction.comment.card, reaction.comment, reaction),
        method: :delete,
        class: "btn btn--negative flex-item-justify-end reaction__delete",
        data: { action: "reaction-delete#perform", reaction_delete_target: "button" } do %>
    <%= icon_tag "minus" %>
    <span class="for-screen-reader">Delete this reaction</span>
  <% end %>
</div>

<span id="delete_reaction_accessible_label" class="for-screen-reader">Press enter to delete this reaction</span>
