{% extends "base.html" %}
{% set active_page = 'holdings' %}
{% block title %}Holdings · net-alpha{% endblock %}
{% block topbar_right %}
  {% if accounts %}<span class="pill">{{ accounts|length }} account{% if accounts|length != 1 %}s{% endif %}</span>{% endif %}
  <span class="pill">{{ selected_period|default('YTD')|upper }}</span>
{% endblock %}
{% block content %}
  <div class="flex items-end justify-between flex-wrap gap-3 mb-4">
    <div>
      <h1>Holdings</h1>
      <div class="text-[13px] text-label-2 mt-[3px]">
        {% if selected_account %}{{ selected_account }}{% else %}All accounts{% endif %} ·
        {{ selected_period|default('YTD')|upper }}
      </div>
      {% include "_density_toggle.html" with context %}
    </div>
    {% if imports %}{% include "_portfolio_toolbar.html" %}{% endif %}
  </div>

  {# Emit column markers so tests / density.js can read extra_columns regardless
     of whether imports exist (empty-state path never reaches _portfolio_table). #}
  {% if extra_columns %}
    <span hidden class="cols-meta"
      {% for col in extra_columns %}data-col="{{ col }}" {% endfor %}></span>
  {% endif %}

  {% if not imports %}
    {% include "_portfolio_empty_state.html" %}
  {% else %}
    <div id="holdings-positions"
         hx-get="/portfolio/positions?period={{ selected_period }}&account={{ selected_account }}&group_options={{ group_options }}&show=open&page=1"
         hx-trigger="load" hx-swap="innerHTML"></div>

    <div id="holdings-short-options" class="panel mt-4"
         hx-get="/holdings/short-options?account={{ selected_account }}"
         hx-trigger="load" hx-swap="innerHTML"></div>
  {% endif %}
{% endblock %}