<% cache cacheable_preview_parts_for(card) do %>
  <%= card_article_tag card, class: "card" do %>
    <div class="flex gap">
      <div class="flex flex-column flex-item-grow">
        <header class="card__header">

          <div class="card__collection flex align-start">
            <span class="card__id"><%= card.id %></span>
            <span class="card__collection-name">
              <span class="overflow-ellipsis"><%= card.collection.name %></span>
            </span>
          </div>

          <%= render "cards/display/preview/tags", card: card %>
        </header>

        <div class="card__body justify-space-between">
          <div class="card__content">
            <h1 class="card__title overflow-line-clamp">
              <%= card.title %>
            </h1>

            <span class="for-screen-reader"><%= card.title %></span>
          </div>
        </div>
      </div>

      <%= render "cards/display/public_preview/stages", card: card if card.doing? %>
    </div>

    <footer class="card__footer">
      <%= render "cards/display/public_preview/meta", card: card %>
    </footer>

    <%= render "cards/display/common/background", card: card %>

    <% if card.entropic? %>
      <%= render "cards/display/preview/bubble", card: card %>
    <% end %>
  <% end %>
<% end %>
