<%= form_with url: transactions_path,
              id: "transactions-search",
              scope: :q,
              method: :get,
              data: { controller: "auto-submit-form" } do |form| %>
  <%= hidden_field_tag :per_page, params[:per_page] %>

  <div class="flex gap-2 mb-4">
    <div class="grow">
      <div class="flex items-center px-3 py-2 gap-2 border border-secondary rounded-lg focus-within:ring-secondary focus-within:border-secondary">
        <%= icon("search") %>
        <%= form.text_field :search,
                            placeholder: "Search transactions ...",
                            value: @q[:search],
                            class: "form-field__input placeholder:text-sm placeholder:text-secondary",
                            "data-auto-submit-form-target": "auto" %>
      </div>
    </div>

    <%= render DS::Menu.new(variant: "button", no_padding: true) do |menu| %>
      <% menu.with_button(
        id: "transaction-filters-button",
        type: "button",
        text: "Filter",
        variant: "outline",
        icon: "list-filter"
      ) %>

      <% menu.with_custom_content do %>
        <%= render "transactions/searches/menu", form: form %>
      <% end %>
    <% end %>

    <%= button_tag type: "button",
        id: "toggle-checkboxes-button",
        aria: { label: t(".toggle_selection_checkboxes") },
        class: "lg:hidden font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary border border-secondary hover:bg-surface-hover",
        data: {
          action: "click->checkbox-toggle#toggle",
          checkbox_toggle_target: "toggleButton"
        } do %>
      <%= icon("list-todo") %>
    <% end %>
  </div>
<% end %>
