<%# locals: (transfer:) %>

<%= turbo_frame_tag dom_id(transfer) do %>
  <div class="grid grid-cols-12 items-center text-gray-900 text-sm font-medium p-4">
    <div class="pr-10 flex items-center gap-4 col-span-8">
      <%= check_box_tag dom_id(transfer),
                        disabled: true,
                        class: "maybe-checkbox maybe-checkbox--light" %>

      <div class="max-w-full">
        <%= content_tag :div, class: ["flex items-center gap-2"] do %>
          <%= render "shared/circle_logo", name: transfer.name, size: "sm" %>

          <div class="truncate">
            <div class="space-y-0.5">

              <div class="flex items-center gap-2">
                <%= link_to transfer.name,
                        transfer_path(transfer),
                        data: { turbo_frame: "drawer", turbo_prefetch: false },
                        class: "hover:underline hover:text-gray-800" %>

                <% if transfer.status == "confirmed" %>
                  <span title="<%= transfer.payment? ? "Payment" : "Transfer" %> is confirmed">
                    <%= lucide_icon "link-2", class: "w-4 h-4 text-indigo-600" %>
                  </span>
                <% else %>
                  <span class="inline-flex items-center rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700">
                    Auto-matched
                  </span>

                  <%= button_to transfer_path(transfer, transfer: { status: "confirmed" }),
                    method: :patch,
                    class: "text-gray-500 hover:text-gray-800 flex items-center justify-center",
                    title: "Confirm match" do %>
                    <%= lucide_icon "check", class: "w-4 h-4 text-indigo-400 hover:text-indigo-600" %>
                  <% end %>

                  <%= button_to transfer_path(transfer, transfer: { status: "rejected" }),
                    method: :patch,
                    data: { turbo: false },
                    class: "text-gray-500 hover:text-gray-800 flex items-center justify-center",
                    title: "Reject match" do %>
                    <%= lucide_icon "x", class: "w-4 h-4 text-gray-400 hover:text-gray-600" %>
                  <% end %>
                <% end %>
              </div>

              <div class="text-gray-500 text-xs font-normal">
                <div class="flex items-center gap-1">
                  <%= link_to transfer.from_account.name, transfer.from_account, class: "hover:underline", data: { turbo_frame: "_top" } %>
                  <% if transfer.payment? %>
                    <%= lucide_icon "arrow-right", class: "w-4 h-4" %>
                  <% else %>
                    <%= lucide_icon "arrow-left-right", class: "w-4 h-4" %>
                  <% end %>
                  <%= link_to transfer.to_account.name, transfer.to_account, class: "hover:underline", data: { turbo_frame: "_top" } %>
                </div>
              </div>
            </div>
          </div>
        <% end %>
      </div>
    </div>

    <div class="flex items-center gap-1 col-span-2">
      <% if transfer.categorizable? %>
        <%= render "account/transactions/transaction_category", entry: transfer.outflow_transaction.entry %>
      <% else %>
        <%= render "categories/badge", category: transfer.payment? ? payment_category : transfer_category %>
      <% end %>
    </div>

    <div class="col-span-2 ml-auto">
      <p class="flex items-center gap-1">
        <span>
          +/- <%= format_money(transfer.amount_abs) %>
        </span>
      </p>
    </div>
  </div>
<% end %>
