<%= turbo_frame_tag dom_id(@account, "holdings") do %>
  <div class="bg-container space-y-4 px-3 py-4 lg:p-4 rounded-xl shadow-border-xs">
    <div class="flex items-center justify-between">
      <%= tag.h2 t(".holdings"), class: "font-medium text-lg" %>
      <%= link_to new_trade_path(account_id: @account.id),
                  id: dom_id(@account, "new_trade"),
                  data: { turbo_frame: :modal },
                  class: "flex gap-1 font-medium items-center bg-gray-50 theme-dark:bg-gray-700 hover:bg-gray-100 theme-dark:hover:bg-gray-600 text-primary p-2 rounded-lg" do %>
        <span class="text-primary">
          <%= icon("plus", color: "current") %>
        </span>
        <%= tag.span t(".new_holding"), class: "text-sm" %>
      <% end %>
    </div>

    <div class="bg-container-inset rounded-xl p-1 overflow-x-auto">
      <div class="w-max lg:w-full">
        <div class="grid grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-4 py-2">
          <%= tag.p t(".name"), class: "col-span-4" %>
          <%= tag.p t(".weight"), class: "col-span-2 justify-self-end" %>
          <%= tag.p t(".average_cost"), class: "col-span-2 justify-self-end" %>
          <%= tag.p t(".holdings"), class: "col-span-2 justify-self-end" %>
          <%= tag.p t(".return"), class: "col-span-2 justify-self-end" %>
        </div>

        <div class="bg-container rounded-lg shadow-border-xs">
          <% if @account.cash_balance.to_d > 0 %>
            <%= render "holdings/cash", account: @account %>
            <%= render "shared/ruler" %>
          <% end %>

          <% if @account.current_holdings.any? %>
            <%= render partial: "holdings/holding",
                      collection: @account.current_holdings,
                      spacer_template: "shared/ruler" %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
<% end %>
