<%# locals: (account:) %>

<div class="grid grid-cols-3 gap-2">
  <%= summary_card title: t(".make_model") do %>
    <%= [account.vehicle.make, account.vehicle.model].compact.join(" ").presence || t(".unknown") %>
  <% end %>

  <%= summary_card title: t(".year") do %>
    <%= account.vehicle.year || t(".unknown") %>
  <% end %>

  <%= summary_card title: t(".mileage") do %>
    <%= account.vehicle.mileage || t(".unknown") %>
  <% end %>

  <%= summary_card title: t(".purchase_price") do %>
    <%= format_money account.vehicle.purchase_price %>
  <% end %>

  <%= summary_card title: t(".current_price") do %>
    <%= format_money account.balance_money %>
  <% end %>

  <%= summary_card title: t(".trend") do %>
    <div class="flex items-center gap-1" style="color: <%= account.vehicle.trend.color %>">
      <p class="text-xl font-medium">
        <%= account.vehicle.trend.value %>
      </p>

      <p>(<%= account.vehicle.trend.percent %>%)</p>
    </div>
  <% end %>
</div>

<div class="flex justify-center py-8">
  <%= link_to "Edit account details", edit_vehicle_path(account), class: "btn btn--ghost", data: { turbo_frame: :modal } %>
</div>
