<section class="panel borderless center margin pad">
  <h1>All tags</h1>
  <ul class="txt-align-start">
    <% @tags.each do |tag| %>
      <li class="flex align-start justify-space-between gap pad" style="border-block-end: 1px solid var(--color-ink-lighter)">
        <span>
          <strong class="txt-nowrap"><%= tag.title %></strong>
        </span>

        <span>
          <%= tag.cards.pluck(:title).to_sentence %>
        </span>

        <%= button_to tag_path(tag), class: "btn txt-small", method: :delete, data: { turbo_confirm: "Are you sure?" } do %>
          <%= icon_tag "remove" %>
          <span class="for-screen-reader">Delete</span>
        <% end %>
      </li>
    <% end %>
  </ul>
</section>
