{# Inputs: allocation: AllocationView from portfolio.allocation.build_allocation() #}
{% set rank_palette = [
  '#0A84FF', '#FFD60A', '#30D158', '#FF375F', '#5E5CE6',
  '#64D2FF', '#5AC8FA', '#BF5AF2', 'rgba(181,181,255,0.65)', 'rgba(255,255,255,0.40)'
] %}
{% set rest_color = 'rgba(255,255,255,0.14)' %}
{% set cash_color = 'rgba(142,142,147,0.6)' %}  {# neutral gray; matches Apple's systemGray — free cash #}
{% set cash_pledged_color = 'rgba(255,159,10,0.65)' %}  {# orange (matches Cash KPI's pledged bar) — distinct from free cash + rest #}

{% if allocation.symbol_count == 0 %}
  <div class="text-label-2 text-[12px] py-4 text-center">
    No priced open positions in scope.
  </div>
{% else %}
  <div class="flex gap-5 items-center">
    {# Donut — click opens full allocation details modal #}
    <button type="button" class="relative shrink-0 cursor-pointer p-0 m-0 bg-transparent border-0
                                  hover:scale-[1.02] transition-transform"
            title="Click for full allocation breakdown"
            onclick="document.getElementById('allocation-details-modal').classList.remove('hidden')">
      <svg viewBox="0 0 100 100" width="148" height="148"
           style="filter: drop-shadow(0 0 18px rgba(10,132,255,0.14));">
        <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="11"/>
        {% set ns = namespace(offset=0) %}
        {% set circumference = 251.327 %}
        {% for s in allocation.slices %}
          {% set seg_len = circumference * (s.pct|float) / 100.0 %}
          {% if s.is_rest %}
            {% set color = rest_color %}
          {% elif s.is_pledged_cash %}
            {% set color = cash_pledged_color %}
          {% elif s.is_cash %}
            {% set color = cash_color %}
          {% else %}
            {% set color = rank_palette[s.rank - 1] %}
          {% endif %}
          <circle cx="50" cy="50" r="40" fill="none" stroke="{{ color }}" stroke-width="11"
                  stroke-dasharray="{{ '%.3f'|format(seg_len) }} {{ '%.3f'|format(circumference) }}"
                  stroke-dashoffset="{{ '%.3f'|format(-ns.offset) }}"
                  transform="rotate(-90 50 50)"/>
          {% set ns.offset = ns.offset + seg_len %}
        {% endfor %}
      </svg>
      <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
        <div class="text-[10px] text-label-2 font-medium">Total</div>
        <div class="num text-[19px] font-bold tracking-tight mt-[2px]">
          ${{ "%.1f"|format(allocation.total_market_value|float / 1000) }}k
        </div>
        <div class="text-[10px] text-label-2 mt-[2px]">{{ allocation.symbol_count }} symbol{% if allocation.symbol_count != 1 %}s{% endif %}</div>
      </div>
    </button>

    {# Concentration stats #}
    <div class="flex-1 flex flex-col">
      <div class="flex justify-between py-[6px] text-[12px]" style="border-bottom: 0.5px solid rgba(255,255,255,0.08);">
        <span class="text-label-2">Top holding</span>
        <span class="text-text num font-medium">
          {% set top = allocation.slices[0] %}{{ top.symbol }} · {{ "%.1f"|format(top.pct|float) }}%
        </span>
      </div>
      <div class="flex justify-between py-[6px] text-[12px]" style="border-bottom: 0.5px solid rgba(255,255,255,0.08);">
        <span class="text-label-2">Top 3 share</span>
        <span class="text-text num font-medium">{{ "%.1f"|format(allocation.top3_pct|float) }}%</span>
      </div>
      <div class="flex justify-between py-[6px] text-[12px]" style="border-bottom: 0.5px solid rgba(255,255,255,0.08);">
        <span class="text-label-2">Top 5 share</span>
        <span class="text-text num font-medium">{{ "%.1f"|format(allocation.top5_pct|float) }}%</span>
      </div>
      <div class="flex justify-between py-[6px] text-[12px]">
        <span class="text-label-2">Top 10 share</span>
        <span class="text-text num font-medium">{{ "%.1f"|format(allocation.top10_pct|float) }}%</span>
      </div>
    </div>
  </div>

  {# Chip leaderboard #}
  <div class="mt-[14px]">
    <div class="label-uc mb-2">Top {{ allocation.slices|rejectattr('is_rest')|rejectattr('is_cash')|list|length }} holdings</div>
    <div class="flex flex-wrap gap-x-[7px] gap-y-[5px]">
      {% for s in allocation.slices %}
        {% if s.is_rest %}
          <span class="inline-flex items-center gap-[6px] py-1 pl-1 pr-1 text-[11px] text-label-3">
            <span class="text-label-3">+{{ allocation.symbol_count - allocation.slices|rejectattr('is_rest')|rejectattr('is_cash')|list|length }} more</span>
            <span class="num">${{ "%.1f"|format(s.market_value|float / 1000) }}k</span>
            <span class="num">{{ "%.1f"|format(s.pct|float) }}%</span>
          </span>
        {% elif s.is_cash %}
          {% set _color = cash_pledged_color if s.is_pledged_cash else cash_color %}
          {% set _label = 'Cash · pledged' if s.is_pledged_cash else 'Cash · free' %}
          {% set _title = 'Cash currently securing open short puts (CSP collateral). Cannot be deployed elsewhere until the puts close, expire, or are bought back.' if s.is_pledged_cash else 'Cash not pledged to any open option position.' %}
          <span class="inline-flex items-center gap-[7px] py-[4px] pl-2 pr-[10px] rounded-full text-[11px]"
                style="background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08);"
                title="{{ _title }}">
            <span style="width:6px; height:6px; border-radius:50%; background:{{ _color }};"></span>
            <span class="font-semibold tracking-tightish text-text">{{ _label }}</span>
            <span class="num text-label-2">${{ "%.1f"|format(s.market_value|float / 1000) }}k</span>
            <span class="num font-semibold">{{ "%.1f"|format(s.pct|float) }}%</span>
          </span>
        {% else %}
          {% set color = rank_palette[s.rank - 1] %}
          {% set glow = s.rank <= 6 %}
          <span class="inline-flex items-center gap-[7px] py-[4px] pl-2 pr-[10px] rounded-full text-[11px]"
                style="background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08);">
            <span style="width:6px; height:6px; border-radius:50%; background:{{ color }};{% if glow %} box-shadow: 0 0 5px {{ color }};{% endif %}"></span>
            <span class="font-semibold tracking-tightish text-text">{{ s.symbol }}</span>
            <span class="num text-label-2">${{ "%.1f"|format(s.market_value|float / 1000) }}k</span>
            <span class="num font-semibold">{{ "%.1f"|format(s.pct|float) }}%</span>
          </span>
        {% endif %}
      {% endfor %}
    </div>
  </div>

  {# Click-through details modal — full ranked breakdown including small
     positions normally rolled into the 'rest' aggregate.

     UX: with 50+ holdings the bare table was an undifferentiated wall.
     Now the modal has a typeahead filter, sticky table header, and a
     compact row density so the user can find a symbol in two seconds. #}
  <div id="allocation-details-modal"
       x-data="{ q: '' }"
       class="hidden fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
       onclick="if (event.target === this) { this.classList.add('hidden'); }">
    <div class="bg-surface rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col"
         style="border:0.5px solid rgba(255,255,255,0.08);">
      <div class="px-4 pt-4 pb-3 flex items-start justify-between gap-3"
           style="border-bottom:0.5px solid rgba(255,255,255,0.08);">
        <div class="min-w-0">
          <h2 class="text-lg font-semibold tracking-tightish">Allocation breakdown</h2>
          <div class="text-[11px] text-label-2 mt-1">
            {{ allocation.symbol_count }} priced symbol{% if allocation.symbol_count != 1 %}s{% endif %}
            · ${{ "{:,.2f}".format(allocation.total_market_value|float) }} total
          </div>
        </div>
        <div class="flex items-center gap-2 shrink-0">
          <input type="text"
                 x-model="q"
                 placeholder="Filter symbol…"
                 class="bg-surface text-text rounded-md px-2 py-1 text-[12px] font-mono w-36"
                 style="border:0.5px solid rgba(255,255,255,0.12);"/>
          <button type="button"
                  onclick="document.getElementById('allocation-details-modal').classList.add('hidden')"
                  class="text-label-2 hover:text-text text-2xl leading-none px-1">&times;</button>
        </div>
      </div>
      <div class="overflow-y-auto flex-1">
        <table class="net-table w-full" style="font-size:12px;">
          <thead class="sticky top-0 z-10" style="background:var(--surface, #0b0d10);">
            <tr style="border-bottom:0.5px solid rgba(255,255,255,0.08);">
              <th class="r" style="width:42px; padding:6px 8px;">#</th>
              <th style="padding:6px 8px;">Symbol</th>
              <th style="padding:6px 8px;">Type</th>
              <th class="r" style="padding:6px 8px;">Market $</th>
              <th class="r" style="padding:6px 8px;">% of total</th>
            </tr>
          </thead>
          <tbody>
            {% for s in allocation.all_slices %}
              {% if s.is_pledged_cash %}
                {% set _color = cash_pledged_color %}
                {% set _type = 'Cash · pledged' %}
              {% elif s.is_cash %}
                {% set _color = cash_color %}
                {% set _type = 'Cash · free' %}
              {% else %}
                {% set _color = rank_palette[s.rank - 1] if s.rank <= rank_palette|length else 'rgba(255,255,255,0.4)' %}
                {% set _type = 'Equity' %}
              {% endif %}
              <tr data-symbol="{{ s.symbol|lower }}"
                  x-show="q === '' || '{{ s.symbol|lower }}'.includes(q.toLowerCase())"
                  style="border-bottom:0.5px solid rgba(255,255,255,0.04);">
                <td class="r num text-label-3" style="padding:4px 8px;">{{ s.rank if s.rank > 0 else '—' }}</td>
                <td style="padding:4px 8px;">
                  <div class="flex items-center gap-2">
                    <span style="width:7px; height:7px; border-radius:50%; background:{{ _color }};"></span>
                    <span class="font-semibold">{{ s.symbol }}</span>
                  </div>
                </td>
                <td class="text-[11px] text-label-2" style="padding:4px 8px;">{{ _type }}</td>
                <td class="r num" style="padding:4px 8px;">${{ "{:,.2f}".format(s.market_value|float) }}</td>
                <td class="r num font-semibold" style="padding:4px 8px;">{{ "%.2f"|format(s.pct|float) }}%</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="px-4 py-2 text-[11px] text-label-3 flex items-center justify-between"
           style="border-top:0.5px solid rgba(255,255,255,0.08);">
        <span>Type to filter · click outside or × to close.</span>
        <span x-show="q !== ''" x-cloak>
          <button type="button" @click="q = ''" class="underline hover:text-text">clear filter</button>
        </span>
      </div>
    </div>
  </div>
{% endif %}