{% load i18n %}
{% with c=total.currency %}
<div class="card bg-base-100 card-border shadow">
  <div class="card-body p-5 gap-1">
    <div class="text-sm text-base-content/50">{% translate 'Portfolio value' %}{% if totals|length > 1 %} · {{ c.name }}{% endif %}</div>
    <div class="text-3xl sm:text-4xl font-bold tabular-nums tracking-tight whitespace-nowrap">
      <c-amount.display :amount="total.market_value" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display>
    </div>
    <div class="text-sm tabular-nums flex flex-wrap items-baseline gap-x-2">
      <span class="whitespace-nowrap"><c-amount.display :amount="total.total_return" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" color="auto" divless></c-amount.display>
      {% include 'investments/fragments/_mwr.html' with mw=total.money_weighted %}</span>
      <span class="text-base-content/50">{% translate 'all time' %}</span>
    </div>

    {# Secondary figures stay out of sight until asked for #}
    <details class="group mt-3 text-sm">
      <summary class="cursor-pointer list-none text-base-content/50 hover:text-base-content transition-colors duration-150 w-fit select-none">
        {% translate 'Details' %} <i class="fa-solid fa-chevron-down text-xs transition-transform duration-150 group-open:rotate-180"></i>
      </summary>
      <dl class="mt-3 flex flex-col divide-y divide-base-content/10 tabular-nums">
        <div class="flex justify-between gap-4 py-2">
          <dt class="text-base-content/60 min-w-0">{% translate 'Invested' %}</dt>
          <dd class="text-end whitespace-nowrap"><c-amount.display :amount="total.cost_basis" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display></dd>
        </div>
        <div class="flex justify-between gap-4 py-2">
          <dt class="text-base-content/60 min-w-0">{% translate 'Income' %}</dt>
          <dd class="text-end whitespace-nowrap"><c-amount.display :amount="total.income" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display></dd>
        </div>
        {% if total.converted_from %}
          <div class="flex justify-between gap-4 py-2">
            <dt class="text-base-content/60 min-w-0">{% translate 'Currency effect' %}</dt>
            <dd class="text-end whitespace-nowrap">
              {% if total.has_rate_history %}
                <c-amount.display :amount="total.currency_effect" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" color="auto" divless></c-amount.display>
              {% else %}
                <span class="text-base-content/50 whitespace-normal">{% translate 'Needs historical exchange rates' %}</span>
              {% endif %}
            </dd>
          </div>
        {% endif %}
        {% for part in total.breakdown %}
          {% with p=part.currency %}
          <div class="flex justify-between gap-4 py-2">
            <dt class="text-base-content/60 min-w-0">{% blocktranslate with name=p.name %}In {{ name }}{% endblocktranslate %}</dt>
            <dd class="flex items-baseline gap-2 whitespace-nowrap">
              <c-amount.display :amount="part.market_value" :prefix="p.prefix" :suffix="p.suffix" :decimal_places="p.decimal_places" divless></c-amount.display>
              <span class="text-xs">{% include 'investments/fragments/_mwr.html' with mw=part.money_weighted %}</span>
            </dd>
          </div>
          {% endwith %}
        {% endfor %}
      </dl>
    </details>
  </div>
</div>
{% endwith %}