{% load i18n %}
<c-ui.fab-single-action
    url="{% url 'transactions_transfer' %}"
    hx_target="#generic-offcanvas">
</c-ui.fab-single-action>
<div class="container pb-20">
  <div class="text-3xl font-bold font-mono w-full mb-4">
    {% spaceless %}
      <div>{% translate 'Investments' %}</div>
    {% endspaceless %}
  </div>

  {% if groupings.0.1 %}
    <div class="grid grid-cols-1 {% if totals|length > 1 %}lg:grid-cols-2{% endif %} gap-3 mb-8">
      {% for total in totals %}
        {% include 'investments/fragments/_totals.html' %}
      {% endfor %}
    </div>

    <div role="tablist" class="tabs tabs-border">
      <input type="radio" name="investment_tabs" role="tab" class="tab" aria-label="{% translate 'Holdings' %}" checked="checked"/>
      <div role="tabpanel" class="tab-content pt-4">
    <div role="tablist" class="tabs tabs-box tabs-sm w-fit mb-4">
      <button type="button" role="tab" class="tab group-by-tab {% if group_by == 'group' %}tab-active{% endif %}"
              hx-get="{% url 'investments_group_by' %}?group_by=group" hx-swap="none"
              _="on click take .tab-active from .group-by-tab for me then add .hidden to .holdings-grouping then remove .hidden from #holdings-group">
        {% translate 'Account group' %}
      </button>
      <button type="button" role="tab" class="tab group-by-tab {% if group_by == 'investment_class' %}tab-active{% endif %}"
              hx-get="{% url 'investments_group_by' %}?group_by=investment_class" hx-swap="none"
              _="on click take .tab-active from .group-by-tab for me then add .hidden to .holdings-grouping then remove .hidden from #holdings-investment_class">
        {% translate 'Asset class' %}
      </button>
    </div>
    {% for attr, groups in groupings %}
    <div id="holdings-{{ attr }}" class="holdings-grouping card bg-base-100 card-border shadow {% if attr != group_by %}hidden{% endif %}">
      {% for item in groups %}
        <div class="flex flex-wrap justify-between items-baseline gap-x-4 gap-y-1 px-5 pt-5 pb-2 {% if not forloop.first %}border-t border-base-content/10 mt-2{% endif %}">
          <span class="text-xs font-semibold uppercase tracking-wide text-base-content/50 truncate min-w-0">{% if item.group %}{{ item.group.name }}{% elif attr == 'investment_class' %}{% translate 'Unclassified' %}{% else %}{% translate 'Ungrouped' %}{% endif %}</span>
          <div class="flex flex-wrap gap-x-4 text-sm text-base-content/60 tabular-nums whitespace-nowrap">
            {% for total in item.totals %}
              <c-amount.display :amount="total.market_value" :prefix="total.currency.prefix" :suffix="total.currency.suffix" :decimal_places="total.currency.decimal_places" custom_class="font-normal" divless></c-amount.display>
            {% endfor %}
          </div>
        </div>
        <ul>
          {% for perf in item.holdings %}
            {% with c=perf.currency a=perf.account.currency %}
            <li>
              <a href="{% url 'investment_detail_index' account_id=perf.account.id %}"
                 class="flex items-center justify-between gap-4 px-5 py-3 no-underline text-base-content transition-colors duration-150 hover:bg-base-200/60">
                <div class="min-w-0">
                  <div class="font-medium truncate">{{ perf.account.name }}</div>
                  <div class="text-xs text-base-content/50 tabular-nums truncate">
                    {% if perf.priced %}
                      <c-amount.display :amount="perf.quantity" :prefix="a.prefix" :suffix="a.suffix" :decimal_places="a.decimal_places" custom_class="font-normal" divless></c-amount.display>
                      {% if perf.price is None %}· <span class="text-error">{% translate 'No exchange rate available' %}</span>{% endif %}
                    {% else %}
                      {% translate 'Tracked by value' %}
                    {% endif %}
                  </div>
                </div>
                <div class="text-end tabular-nums whitespace-nowrap">
                  <div class="font-medium">{% if perf.market_value is not None %}<c-amount.display :amount="perf.market_value" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display>{% else %}-{% endif %}</div>
                  <div class="text-xs">{% include 'investments/fragments/_mwr.html' with mw=perf.money_weighted %}</div>
                </div>
              </a>
            </li>
            {% endwith %}
          {% endfor %}
        </ul>
      {% endfor %}
      <div class="pb-2"></div>
    </div>
    {% endfor %}
      </div>
      <input type="radio" name="investment_tabs" role="tab" class="tab" aria-label="{% translate 'Charts' %}"
             hx-get="{% url 'investments_charts' %}" hx-trigger="click once" hx-target="#investment-charts" hx-indicator="#investment-charts"/>
      <div role="tabpanel" class="tab-content pt-4">
        <div id="investment-charts" class="show-loading min-h-40"></div>
      </div>
      <input type="radio" name="investment_tabs" role="tab" class="tab" aria-label="{% translate 'Rebalance' %}"
             hx-get="{% url 'investments_rebalance' %}" hx-trigger="click once" hx-target="#investment-rebalance" hx-indicator="#investment-rebalance"/>
      <div role="tabpanel" class="tab-content pt-4">
        <div id="investment-rebalance" class="show-loading min-h-40"></div>
      </div>
    </div>
  {% else %}
    <c-msg.empty
        title="{% translate 'No investments yet' %}"
        subtitle="{% translate 'Mark an account as an investment in its settings to see it here' %}"></c-msg.empty>
  {% endif %}
</div>