<%# 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">
  <%= render DS::Link.new(
    text: "Edit account details",
    variant: "ghost",
    href: edit_vehicle_path(account),
    frame: :modal
  ) %>
</div>
