<%= turbo_frame_tag dom_id(@account, "valuations") do %>
  <div class="bg-container space-y-4 p-5 shadow-border-xs rounded-xl">
    <div class="flex items-center justify-between">
      <%= tag.h2 t(".valuations"), class: "font-medium text-lg" %>
      <%= link_to new_valuation_path(@account),
                  data:  { turbo_frame: dom_id(@account.entries.valuations.new) },
                  class: "flex gap-1 font-medium items-center bg-gray-50 text-primary p-2 rounded-lg" do %>
        <span class="text-primary">
          <%= icon("plus", color: "current") %>
        </span>
        <%= tag.span t(".new_entry"), class: "text-sm" %>
      <% end %>
    </div>

    <div class="rounded-xl bg-container-inset p-1">
      <div class="grid grid-cols-10 items-center uppercase text-xs font-medium text-secondary px-4 py-2">
        <%= tag.p t(".date"), class: "col-span-5" %>
        <%= tag.p t(".value"), class: "col-span-2 justify-self-end" %>
        <%= tag.p t(".change"), class: "col-span-2 justify-self-end" %>
        <%= tag.div class: "col-span-1" %>
      </div>

      <div class="rounded-lg bg-container shadow-border-xs">
        <%= turbo_frame_tag dom_id(@account.entries.valuations.new) %>

        <% if @entries.any? %>
          <%= render partial: "valuations/valuation",
                     collection:      @entries,
                     as:              :entry,
                     spacer_template: "shared/ruler" %>
        <% else %>
          <p class="text-secondary text-sm p-4"><%= t(".no_valuations") %></p>
        <% end %>
      </div>
    </div>
  </div>
<% end %>
