<%= turbo_frame_tag @card, :columns do %>
  <div class="card__stages" role="radiogroup" data-controller="scroll-to">
    <legend class="for-screen-reader">Choose a column for this card</legend>

    <%= button_to "Not now", card_not_now_path(@card),
        class: [ "card__column-name btn", { "card__column-name--current": @card.postponed? } ],
        style: "--column-color: var(--color-card-complete)",
        disabled: @card.postponed?,
        role: "radio",
        aria: { checked: @card.postponed? },
        data: { scroll_to_target: @card.postponed? ? "target" : nil },
        form_class: "flex gap-half" %>

    <%= button_to "Maybe?", card_triage_path(@card), method: :delete,
        class: [ "card__column-name card__column-name--stream btn", { "card__column-name--current": @card.awaiting_triage? } ],
        style: "--column-color: var(--color-card-default)",
        disabled: @card.awaiting_triage?,
        role: "radio",
        aria: { checked: @card.awaiting_triage? },
        data: { scroll_to_target: @card.awaiting_triage? ? "target" : nil },
        form_class: "flex gap-half" %>

    <% @columns.each do |column| %>
      <%= button_to_set_column @card, column %>
    <% end %>

    <%= button_to card_closure_path(@card),
        class: [ "card__column-name btn", { "card__column-name--current": @card.closed? } ],
        style: "--column-color: var(--color-card-complete)",
        disabled: @card.closed?,
        role: "radio",
        aria: { checked: @card.closed? },
        data: { scroll_to_target: @card.closed? ? "target" : nil },
        form_class: "flex gap-half" do %>
          <%= icon_tag "check", class: "icon--mobile-only" %>
          Done
    <% end %>
  </div>
<% end %>
