<div class="cards__heading cards__filter" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
  <button class="cards__filter input input--select borderless overflow-ellipsis" data-action="click->dialog#open:stop">
    <% if filter.stages.any? %>
      <%= filter.stages.map(&:name).to_sentence %>
    <% else %>
      Doing
    <% end %>
  </button>

  <dialog class="margin-block-start-half popup panel flex-column align-start gap-half fill-white shadow"
    aria-label="In stage…" aria-description="In stage…"
    data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
    <strong class="popup__title margin-block-start-half pad-inline-half">In stage(s)…</strong>
    <%= form_with url: cards_path, method: :get, class: "popup__list",
          data: { controller: "form" } do |form| %>
      <% filter.as_params.except(:stage_ids).each do |key, value| %>
        <%= filter_hidden_field_tag key, value %>
      <% end %>

      <%= link_to cards_path(filter.as_params.except(:stage_ids)), class: "btn popup__item" do %>
        <span class="overflow-ellipsis">All stages</span>
      <% end %>

      <% workflow.stages.each do |stage| %>
        <div class="btn popup__item">
          <%= form.check_box :stage_ids, {
                multiple: true,
                checked: filter.stages.include?(stage),
                data: { action: "change->form#submit" },
                include_hidden: false,
          }, stage.id %>

          <%= form.label :stage_ids, stage.name, for: form.field_id(:stage_ids, stage.id), class: "overflow-ellipsis" %>
          <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
        </div>
      <% end %>
    <% end %>
  </dialog>
</div>
