{# Plan tab tag summary strip. Inputs: plan_view (uses plan_view.tag_summaries
   and plan_view.selected_tag). Each tile is a clickable filter; clicking the
   "All" tile clears the filter. #}
{% set selected = plan_view.selected_tag %}
{% set palette = ['#3b82f6','#10b981','#f59e0b','#ef4444','#8b5cf6','#06b6d4','#f97316','#84cc16'] %}
<div class="flex items-center gap-1 mb-3 overflow-x-auto"
     style="scrollbar-width: thin;"
     title="A target with multiple tags is counted in each tile. Tag totals don't sum to the portfolio total.">
  <a href="/positions?view=plan{% if selected_account %}&account={{ selected_account }}{% endif %}"
     class="shrink-0 px-3 py-[6px] rounded-md text-[12px]"
     style="border:0.5px solid {% if selected is none %}var(--color-accent){% else %}var(--color-hairline){% endif %};
            color:{% if selected is none %}var(--color-accent){% else %}var(--color-label-2){% endif %};">
    All ({{ plan_view.planned_rows_total }})
  </a>
  {% for s in plan_view.tag_summaries %}
    {% set is_untagged = (s.tag == 'untagged') %}
    {% set idx = (s.tag|length + (s.tag[0]|ord if s.tag|length > 0 else 0)) % 8 %}
    {% set is_selected = (selected == s.tag) %}
    <a href="/positions?view=plan&tag={{ s.tag }}{% if selected_account %}&account={{ selected_account }}{% endif %}"
       class="shrink-0 inline-flex items-center gap-2 px-3 py-[6px] rounded-md text-[12px]"
       style="border:0.5px solid {% if is_selected %}var(--color-accent){% else %}var(--color-hairline){% endif %};">
      {% if not is_untagged %}
        <span style="width:8px; height:8px; border-radius:50%;
                     background:{{ palette[idx] }}; display:inline-block;"></span>
      {% endif %}
      <span style="color:{% if is_selected %}var(--color-accent){% else %}var(--color-text){% endif %};">
        {{ s.tag }}
      </span>
      <span class="text-label-3 text-[10px]">{{ s.target_count }}</span>
      {% if s.pct_filled is not none %}
        {% set pct = s.pct_filled|float %}
        {% if pct >= 100 %}{% set bar_color = 'var(--color-pos)' %}
        {% elif pct >= 50 %}{% set bar_color = 'var(--color-warn)' %}
        {% else %}{% set bar_color = 'var(--color-neg)' %}{% endif %}
        <span class="inline-block rounded-full overflow-hidden"
              style="width:42px; height:4px; background:var(--color-hairline);">
          <span style="display:block; height:100%; width:{{ [pct, 100]|min }}%; background:{{ bar_color }};"></span>
        </span>
      {% endif %}
      {% if s.gap_to_fill_dollar > 0 %}
        <span class="num text-[10px] text-label-2">+${{ "%.0f"|format(s.gap_to_fill_dollar|float) }}</span>
      {% endif %}
    </a>
  {% endfor %}
</div>