<%= turbo_frame_tag "category_dropdown" do %>
  <div class="flex flex-col relative" data-controller="list-filter">
    <div class="grow p-1.5">
      <div class="relative flex items-center bg-white border border-gray-200 rounded-lg">
        <input placeholder="<%= t(".search_placeholder") %>" autocomplete="nope" type="search" class="placeholder:text-sm placeholder:text-gray-500 font-normal h-10 relative pl-10 w-full border-none rounded-lg" data-list-filter-target="input" data-action="list-filter#filter">
        <%= lucide_icon("search", class: "w-5 h-5 text-gray-500 ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
      </div>
    </div>
    <div data-list-filter-target="list" class="flex flex-col gap-0.5 p-1.5 mt-0.5 mr-2 max-h-64 overflow-y-scroll scrollbar">
      <div class="pb-2 pl-4 mr-2 text-gray-500 hidden" data-list-filter-target="emptyMessage">
        <%= t(".no_categories") %>
      </div>
      <% @categories.each do |category| %>
        <%= render partial: "category/dropdowns/row", locals: { category:, origin: params[:origin] } %>
      <% end %>
    </div>
    <hr>
    <div class="relative p-1.5 w-full">
      <%= link_to new_category_path(transaction_id: @transaction),
                  class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100",
                  data: { turbo_frame: "modal" } do %>
        <%= lucide_icon "plus", class: "w-5 h-5" %>

        <%= t(".add_new") %>
      <% end %>

      <% if @transaction.category %>
        <%= button_to account_transaction_path(@transaction.entry.account, @transaction.entry),
                      method: :patch,
                      data: { turbo_frame: dom_id(@transaction.entry) },
                      params: { account_entry: { entryable_type: "Account::Transaction", entryable_attributes: { id: @transaction.id, category_id: nil } } },
                      class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100" do %>
          <%= lucide_icon "minus", class: "w-5 h-5" %>

          <%= t(".clear") %>
        <% end %>
      <% end %>
    </div>
  </div>
<% end %>
