<%= turbo_frame_tag dom_id(@account, "entries") do %>
  <div class="bg-white p-5 border border-alpha-black-25 rounded-xl shadow-xs">
    <div class="flex items-center justify-between mb-4">
      <%= tag.h2 t(".title"), class: "font-medium text-lg" %>
      <div data-controller="menu" data-testid="activity-menu">
        <button class="btn btn--secondary flex items-center gap-2" data-menu-target="button">
          <%= lucide_icon("plus", class: "w-4 h-4") %>
          <%= tag.span t(".new") %>
        </button>
        <div data-menu-target="content" class="z-10 hidden bg-white rounded-lg border border-alpha-black-25 shadow-xs p-1">
          <%= link_to new_account_valuation_path(@account), data: { turbo_frame: :modal }, class: "block p-2 rounded-lg hover:bg-gray-50 flex items-center gap-2" do %>
            <%= lucide_icon("circle-dollar-sign", class: "text-gray-500 w-5 h-5") %>
            <%= tag.span t(".new_balance"), class: "text-sm" %>
          <% end %>

          <%= link_to @account.investment? ? new_account_trade_path(@account) : new_transaction_path(account_id: @account.id), data: { turbo_frame: :modal }, class: "block p-2 rounded-lg hover:bg-gray-50 flex items-center gap-2" do %>
            <%= lucide_icon("credit-card", class: "text-gray-500 w-5 h-5") %>
            <%= tag.span t(".new_transaction"), class: "text-sm" %>
          <% end %>
        </div>
      </div>
    </div>

    <% if @entries.empty? %>
      <p class="text-gray-500 text-sm p-4"><%= t(".no_entries") %></p>
    <% else %>

      <div>
        <%= form_with url: account_entries_path(@account),
              id: "entries-search",
              scope: :q,
              method: :get,
              data: { controller: "auto-submit-form" } do |form| %>
          <div class="flex gap-2 mb-4">
            <div class="grow">
              <div class="flex items-center px-3 py-2 gap-2 border border-gray-200 rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
                <%= lucide_icon("search", class: "w-5 h-5 text-gray-500") %>
                <%= form.search_field :search,
                            placeholder: "Search entries by name",
                            value: @q[:search],
                            class: "form-field__input placeholder:text-sm placeholder:text-gray-500",
                            "data-auto-submit-form-target": "auto" %>
              </div>
            </div>
          </div>
        <% end %>
      </div>

      <%= tag.div id: dom_id(@account, "entries_bulk_select"),
                data: {
                  controller: "bulk-select",
                  bulk_select_singular_label_value: t(".entry"),
                  bulk_select_plural_label_value: t(".entries")
                } do %>
        <div id="entry-selection-bar" data-bulk-select-target="selectionBar" class="flex justify-center hidden">
          <%= render "account/entries/selection_bar" %>
        </div>

        <div class="grid bg-gray-25 rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-gray-500 px-5 py-3 mb-4">
          <div class="pl-0.5 col-span-8 flex items-center gap-4">
            <%= check_box_tag "selection_entry",
                              class: "maybe-checkbox maybe-checkbox--light",
                              data: { action: "bulk-select#togglePageSelection" } %>
            <p><%= t(".date") %></p>
          </div>
          <%= tag.p t(".amount"), class: "col-span-2 justify-self-end" %>
          <%= tag.p t(".balance"), class: "col-span-2 justify-self-end" %>
        </div>

        <div>
          <div class="rounded-tl-lg rounded-tr-lg bg-white border-alpha-black-25 shadow-xs">

            <div class="space-y-4">
              <%= entries_by_date(@entries) do |entries| %>
                <%= render entries, show_balance: true, origin: "account" %>
              <% end %>
            </div>

          </div>

          <div class="p-4 bg-white rounded-bl-lg rounded-br-lg">
            <%= render "pagination", pagy: @pagy %>
          </div>
        </div>
      <% end %>
    <% end %>
  </div>
<% end %>
