<div class="card__meta" id="<%= dom_id(card, :meta) %>">
  <%= avatar_preview_tag card.creator %>

  <div class="card__meta-grid">
    <span class="card__meta-item card__meta-item--added overflow-ellipsis">
      Added <%= local_datetime_tag(card.created_at, style: :daysago) %>
      <% if card.drafted? %>
        <strong>(Draft)</strong>
      <% end %>
    </span>
    <span class="card__meta-item card__meta-item--updated overflow-ellipsis">
      Updated
      <%= local_datetime_tag(card.last_active_at, style: :daysago) %>
    </span>
    <span class="card__meta-item card__meta-item--reported overflow-ellipsis">
      By <strong><%= card.creator.familiar_name %></strong>
    </span>
    <span class="card__meta-item card__meta-item--assigned overflow-ellipsis">
      <%= card.assignees.any? ? "Assigned to" : "Not assigned" %>
      <%= card.assignees.map { |assignee| "<strong>#{assignee.familiar_name}</strong>" }.to_sentence.html_safe %>
    </span>
  </div>

  <div class="margin-inline-start flex-item-no-shrink">
    <div class="flex" id="<%= dom_id(card, :assignees) %>">
      <% card.assignees.each do |assignee| %>
        <%= avatar_preview_tag assignee, class: "avatar" %>
      <% end %>

      <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
        <button class="btn card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
          <%= icon_tag "person-add" %>
          <span class="for-screen-reader">Assign</span>
        </button>
      </div>
    </div>
  </div>
</div>
