<div class="quick-reaction" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
  <%= yield %>

  <dialog class="quick-reaction__popup popup panel fill-white shadow" data-dialog-target="dialog">
    <div class="quick-reaction__emojis">
      <% EmojiHelper::REACTIONS.each do |character, title| %>
        <%= form_with model: [ comment.card, comment, Reaction.new ], data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close"} do |form| %>
          <%= hidden_field_tag "reaction[content]", character %>
          <%= form.button type: "submit", title: title, class: "reaction__quick-emoji-btn btn btn--circle", data: { emoji: character } do %>
            <span><%= character %></span>
            <span class="for-screen-reader"><%= title %></span>
          <% end %>
        <% end %>
      <% end %>

      <div class="flex-inline" data-controller="soft-keyboard">
        <%= link_to new_card_comment_reaction_path(comment.card, comment), role: "button",
              class: "btn btn--circle", action: "soft-keyboard#open",
              data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close" } do %>
          <%= icon_tag "reaction" %> <span class="for-screen-reader">Add a reaction</span>
        <% end %>
      </div>
    </div>
  </dialog>
</div>
