<section id="<%= dom_id(card, :card_container) %>" class="card-perma" style="--card-color: <%= card.color %>;" data-controller="dialog-manager bridge--form">
  <% cache card do %>
    <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/board", card: card %>
          <%= render "cards/display/perma/tags", card: card %>
        </header>

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

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

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

        <footer class="card__footer">
          <%= render "cards/display/perma/meta", card: card %>
          <%= render "cards/display/perma/background", card: card %>
          <%= render "reactions/reactions", reactable: card %>
        </footer>
      <% end %>

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

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