<% cache card do %>
  <section id="<%= dom_id(card, :card_container) %>" class="card-perma" style="--card-color: <%= card.color %>;">
    <%= render "cards/container/status", card: card %>

    <div class="card-perma__actions card-perma__actions--left">
      <%= render "cards/container/gild", card: card if card.published? && !card.closed? %>
      <%= render "cards/container/image", card: card %>
    </div>

    <div class="card-perma__bg">
      <%= card_article_tag card, class: "card" do %>
        <header class="card__header">
          <%= render "cards/display/perma/collection", card: card %>
          <%= render "cards/display/perma/tags", card: card %>
        </header>

        <div class="card__body justify-space-between">
          <div class="card__content">
            <%= render "cards/container/title", card: card %>
            <%= render "cards/display/perma/steps", card: card %>
          </div>

          <% if card.published? %>
            <%= render "cards/triage/columns", card: card %>
          <% end %>
        </div>

        <footer class="card__footer full-width flex align-start gap">
          <%= render "cards/display/perma/meta", card: card %>
          <%= render "cards/display/perma/background", card: card %>
        </footer>
      <% end %>

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

    <% if card.published? %>
      <%= render "cards/container/footer/published", card: card %>
    <% elsif card.creating? %>
      <%= render "cards/container/footer/draft", card: card %>
    <% end %>
  </section>
<% end %>
