<%# Don't delete this file just yet, it's coming back soon. %>
<dialog class="dialog panel fill-white shadow" aria-label="Filter" aria-description="Filter" data-dialog-target="dialog">
  <div class="flex flex-column gap-half">
    <div class="flex align-center gap-half justify-space-between">
      <span class="btn btn--placeholder txt-small" aria-hidden="true"></span>

      <h2 class="txt-large flex align-center gap-half margin-none">
        <%= icon_tag "filter" %>
        <span>Filter</span>
      </h2>

      <form method="dialog">
        <button class="btn panel__close txt-small" title="Close (esc)">
          <%= icon_tag "remove" %>
          <span class="for-screen-reader">Close</span>
        </button>
      </form>
    </div>

    <div class="pad fill-shade border-radius margin-block-end">
      <%= form_tag cards_path, class: "flex align-center gap input input--actor txt-small fill-white border-radius", method: :get do %>
        <% @filter.as_params.each do |key, value| %>
          <%= filter_hidden_field_tag key, value %>
        <% end %>

        <%= search_field_tag "terms[]", nil, class: "input full-width", placeholder: "By keyword…", id: nil %>

        <button class="btn">
          <span class="for-screen-reader">Apply</span>
          <%= icon_tag "arrow-right" %>
        </button>
      <% end %>
    </div>

    <%= form_with url: cards_path, id: :filter_form, method: :get, class: "flex flex-column gap full-width", style: "--border-color: var(--color-ink-lighter)" do %>
      <% Array(params[:terms]).each do |term| %>
        <%= hidden_field_tag "terms[]", term, id: nil %>
      <% end %>

      <div class="filter__columns flex gap">
        <menu class="filter__menu">
          <li class="filter__label"><strong>In Collection</strong></li>

          <li>
            <%= button_tag type: :button, class: "btn filter__button", data: { action: "filter-form#clearCategory", filter_form_name_param: "collection_ids[]" } do %>
              <span>All Collections</span>
            <% end %>
          </li>

          <% Current.user.collections.order(:name).each do |collection| %>
            <li>
              <%= label_tag "collection_ids_#{collection.id}", class: "btn filter__button" do %>
                <%= check_box_tag "collection_ids[]", collection.id, filter.collections.include?(collection), id: "collection_ids_#{collection.id}", hidden: true %>
                <span><%= collection.name %></span>
                <%= icon_tag "close" %>
              <% end %>
            </li>
          <% end %>
        </menu>

        <menu class="filter__menu">
          <li class="filter__label"><strong>Sort by</strong></li>
          <li>
            <%= label_tag "indexed_by_#{filter.default_indexed_by}", class: "btn filter__button" do %>
              <%= radio_button_tag "indexed_by", filter.default_indexed_by, filter.default_indexed_by?, hidden: true %>
              <span>Most active</span>
              <%= icon_tag "close" %>
            <% end %>
          </li>

          <% Filter::INDEXES.each do |index| %>
            <li>
              <label class="btn filter__button">
                <%= radio_button_tag "indexed_by", index, filter.indexed_by == index, class: "visually-hidden" %>
                <span><%= index.humanize %></span>
                <%= icon_tag "close" %>
              </label>
            </li>
          <% end %>
        </menu>

        <% if workflow = Workflow.first %>
          <menu class="filter__menu">
            <li class="filter__label"><strong>In Stage</strong></li>
            <% workflow.stages.each do |stage| %>
              <li>
                <%= label_tag "stage_ids_#{stage.id}", class: "btn filter__button" do %>
                  <%= check_box_tag "stage_ids[]", stage.id, filter.stages.include?(stage), id: "stage_ids_#{stage.id}", hidden: true %>
                  <span><%= stage.name %></span>
                  <%= icon_tag "close" %>
                <% end %>
              </li>
            <% end %>
          </menu>
        <% end %>

        <% if (tags = Tag.all.order(:title)).any? %>
          <div class="filter__menu" role="group" aria-label="Tagged">
            <div class="filter__label"><strong>Tagged</strong></div>

            <% tags.each do |tag| %>
              <div>
                <label class="btn filter__button">
                  <%= check_box_tag "tag_ids[]", tag.id, filter.tags.include?(tag), class: "visually-hidden" %>
                  <span><%= tag.hashtag %></span>
                  <%= icon_tag "close" %>
                </label>
              </div>
            <% end %>
          </div>
        <% end %>

        <div class="filter__menu" role="group" aria-label="Assigned to…">
          <div class="filter__label"><strong>Assigned to…</strong></div>

          <div>
            <label class="btn filter__button">
              <%= check_box_tag "assignment_status", "unassigned", filter.assignment_status.unassigned?,
                    class: "visually-hidden", data: {
                      action: "filter-form#clearCategory",
                      filter_form_name_param: "assignee_ids[],assigner_ids[]" } %>
              <span>No one</span>
              <%= icon_tag "close" %>
            </label>
          </div>

          <div>
            <label class="btn filter__button">
              <%= check_box_tag "assignee_ids[]", Current.user.id, filter.assignees.include?(Current.user),
                    class: "visually-hidden",
                    data: { action: "filter-form#clearCategory", filter_form_name_param: "assignment_status" } %>
              <span>Me</span>
              <%= icon_tag "close" %>
            </label>
          </div>

          <% User.active.without(Current.user).order(:name).each do |user| %>
            <div>
              <label class="btn filter__button">
                <%= check_box_tag "assignee_ids[]", user.id, filter.assignees.include?(user), class: "visually-hidden",
                      data: { action: "filter-form#clearCategory", filter_form_name_param: "assignment_status" } %>
                <span><%= user.name %></span>
                <%= icon_tag "close" %>
              </label>
            </div>
          <% end %>
        </div>

        <div class="filter__menu" role="group" aria-label="Added by…">
          <div class="filter__label"><strong>Added by…</strong></div>

          <div>
            <label class="btn filter__button">
              <%= check_box_tag "creator_ids[]", Current.user.id, filter.creators.include?(Current.user),
                    class: "visually-hidden" %>
              <span>Me</span>
              <%= icon_tag "close" %>
            </label>
          </div>

          <% User.active.without(Current.user).order(:name).each do |user| %>
            <div>
              <label class="btn filter__button">
                <%= check_box_tag "creator_ids[]", user.id, filter.creators.include?(user), class: "visually-hidden" %>
                <span><%= user.name %></span>
                <%= icon_tag "close" %>
              </label>
            </div>
          <% end %>
        </menu>
      </div>
    <% end %>
  </div>

  <div class="flex align-center txt-align-center justify-space-between gap-half margin-block-start">
    <%= tag.button class: "btn", form: :filter_form, formaction: filters_path, formmethod: :post do %>
      <span>Save collection</span>
    <% end %>

    <button class="btn btn--reversed" form="filter_form">
      <span>Apply</span>
      <%= icon_tag "arrow-right" %>
    </button>
  </div>
</dialog>
