<div id="<%= dom_id(card, :tags) %>" class="card__tags">
  <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
    <button class="tag-picker__button btn card__hide-on-index" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);" data-controller="tooltip">
      <%= icon_tag "tag" %>
      <span class="for-screen-reader">Add a tag</span>
    </button>

    <dialog class="popup panel flex-column align-start justify-start fill-white shadow txt-small" data-dialog-target="dialog">
      <%= turbo_frame_tag card, :tagging, src: new_card_tagging_path(card) %>
    </dialog>
  </div>

  <% if card.tags.any? || card.creating? %>
    <div class="min-width overflow-ellipsis">
      <% card.tags.each_with_index do |tag, index| %>
        <%= link_to cards_path(collection_ids: [ card.collection ], tag_ids: [ tag.id ]),
              class: "card__tag btn btn--plain min-width txt-uppercase fill-transparent" do %>
          <%= tag.title %>
        <% end %><%= "," unless index == card.tags.size - 1 %>
      <% end %>
    </div>
  <% end %>
</div>
