<%# locals: (account:) %>

<div class="grid grid-cols-3 gap-2">
  <%= summary_card title: t(".market_value") do %>
    <%= format_money(account.balance_money) %>
  <% end %>

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

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

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

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

  <%= summary_card title: t(".living_area") do %>
    <%= account.property.area || t(".unknown") %>
  <% end %>
</div>

<div class="flex justify-center py-8">
  <%= render LinkComponent.new(
    text: "Edit account details",
    href: edit_property_path(account),
    variant: "ghost",
    frame: :modal
  ) %>
</div>
