<%# locals: (form:) %>

<%= render TabsComponent.new(
  variant: :unstyled,
  active_tab: get_default_transaction_search_filter[:key],
  active_btn_classes: "bg-surface text-primary",
  inactive_btn_classes: "text-secondary hover:bg-container-inset"
) do |tabs| %>
  <div id="transaction-filters-menu" class="flex flex-col md:flex-row h-[50vh] lg:max-h-auto z-10 md:h-80 w-full md:w-[540px] top-12 right-0 overflow-hidden">
    <%= tabs.with_nav(classes: "shrink-0 flex w-full md:w-44 flex-row md:flex-col items-start p-3 text-sm font-medium text-secondary border-b md:border-b-0 md:border-r border-secondary overflow-x-auto md:overflow-x-visible") do |nav| %>
      <% transaction_search_filters.each do |filter| %>
        <%= nav.with_btn(id: filter[:key], label: filter[:label], classes: "w-full px-3 py-2 flex gap-2 items-center rounded-md") do %>
          <%= icon(filter[:icon]) %>
          <%= tag.span(filter[:label], class: "text-sm font-medium") %>
        <% end %>
      <% end %>
    <% end %>

    <div class="flex flex-col grow overflow-y-auto">
      <div class="grow p-3 border-b border-secondary overflow-y-auto">
        <% transaction_search_filters.each do |filter| %>
          <%= tabs.with_panel(tab_id: filter[:key]) do %>
            <%= render partial: get_transaction_search_filter_partial_path(filter), locals: { form: form } %>
          <% end %>
        <% end %>
      </div>

      <div class="flex justify-between items-center gap-2 bg-container p-3 shrink-0">
        <div>
          <% if @q.present? %>
            <%= render LinkComponent.new(
            text: t(".clear_filters"),
            variant: "ghost",
            href: transactions_path(clear_filters: true),
          ) %>
          <% end %>
        </div>

        <div>
          <%= render ButtonComponent.new(text: t(".cancel"), type: "button", variant: "ghost", data: { action: "menu#close" }) %>
          <%= render ButtonComponent.new(text: t(".apply")) %>
        </div>
      </div>
    </div>
  </div>
<% end %>
