<div id="<%= dom_id(card, :assignees) %>" class="position-relative"
    data-controller="dialog"
    data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside mouseenter->dialog#loadLazyFrames" <%= "hidden" if card.closed? %>>
  <button class="card__assignees-trigger" data-action="click->dialog#open:stop keydown.a@document->hotkey#click" data-controller="tooltip hotkey" tabindex=<%= (local_assigns.key?(:preview) && local_assigns[:preview]) ? -1 : 0 %>>
    <% card.assignees.each do |assignee| %>
      <%= avatar_preview_tag assignee, tabindex: (local_assigns.key?(:preview) && local_assigns[:preview]) ? -1 : 0 %>
    <% end %>

    <span class="btn card__hide-on-index" style="--btn-background: var(--card-bg-color);">
      <%= icon_tag "person-add" %>
      <span class="for-screen-reader">Assign</span>
    </span>
  </button>

  <% if Current.user && !local_assigns[:preview] %>
    <%= button_to "Assign to me", card_assignments_path(card, params: { assignee_id: Current.user.id }), method: :post, data: {controller: "hotkey", action: "keydown.m@document->hotkey#click" }, hidden: true %>
  <% end %>

  <dialog class="popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-morph-attribute->dialog#preventCloseOnMorphing turbo:submit-end->dialog#close">
    <%= yield %>
  </dialog>
</div>
