{# Plan tab — pooled targets across all accounts, alphabetical sort. #}
<div id="plan-body">
  {% if plan_view is defined and plan_view and plan_view.rows %}
    <div class="panel">
      <div class="flex items-end justify-between mb-3">
        <div>
          <h4 class="text-[14px] font-semibold">Position targets</h4>
          <div class="text-[11px] text-label-2">Pooled across accounts · alphabetical · {{ pagination.total_rows if (pagination is defined) else plan_view.rows|length }} target{% if (pagination.total_rows if (pagination is defined) else plan_view.rows|length) != 1 %}s{% endif %}</div>
        </div>
        <button type="button"
                class="text-[12px] px-3 py-[5px] rounded-md"
                style="background: var(--color-accent); color: white;"
                hx-get="/positions/plan/modal" hx-target="body" hx-swap="beforeend">+ Add target</button>
      </div>

      <table class="net-table w-full" style="font-size:12px;">
        <thead class="sticky top-0 z-10 bg-bg">
          <tr style="border-bottom: 0.5px solid var(--color-hairline); color: var(--color-label-2);">
            <th class="text-left p-[7px]">Symbol</th>
            <th class="r p-[7px]">Target</th>
            <th class="r p-[7px]">Current</th>
            <th class="r p-[7px]">Gap to fill</th>
            <th class="text-left p-[7px] w-[180px]">% Filled</th>
            <th class="r p-[7px]">Last</th>
            <th class="r p-[7px]"></th>
          </tr>
        </thead>
        <tbody>
          {% for r in plan_view.rows %}
            <tr data-symbol="{{ r.symbol|upper }}" style="border-bottom: 0.5px solid var(--color-hairline);">
              <td class="p-[7px] font-semibold">{{ r.symbol }}</td>
              <td class="r p-[7px] num">
                <strong>
                  {% if r.target_unit.value == 'usd' %}${{ "%.2f"|format(r.target_amount|float) }}
                  {% else %}{{ "%.2f"|format(r.target_amount|float) }} sh{% endif %}
                </strong>
                <div class="text-[10px] text-label-2">
                  {% if r.target_unit.value == 'usd' %}
                    {% if r.target_share_equiv %}≈ {{ "%.2f"|format(r.target_share_equiv|float) }} sh{% else %}—{% endif %}
                  {% else %}
                    {% if r.target_dollar_equiv %}≈ ${{ "%.2f"|format(r.target_dollar_equiv|float) }}{% else %}—{% endif %}
                  {% endif %}
                </div>
              </td>
              <td class="r p-[7px] num">
                {% if r.is_held %}
                  ${{ "%.2f"|format(r.current_dollar|float) }}
                  <div class="text-[10px] text-label-2">{{ "%.2f"|format(r.current_shares|float) }} sh</div>
                {% else %}
                  <span class="text-label-3">—</span>
                  <div class="text-[10px] text-label-3">not held</div>
                {% endif %}
              </td>
              <td class="r p-[7px] num">
                <strong class="{% if r.gap_dollar > 0 %}text-pos{% elif r.gap_dollar < 0 %}text-neg{% endif %}">
                  {% if r.gap_dollar > 0 %}+{% endif %}${{ "%.2f"|format(r.gap_dollar|float) }}
                </strong>
                {% if r.gap_shares is not none %}
                  <div class="text-[10px] text-label-2">
                    {% if r.gap_shares > 0 %}+{% endif %}{{ "%.2f"|format(r.gap_shares|float) }} sh{% if r.gap_dollar < 0 %} (over){% endif %}
                  </div>
                {% endif %}
              </td>
              <td class="p-[7px]">
                {% if r.pct_filled is not none %}
                  {% set pct = r.pct_filled|float %}
                  {% set color = 'var(--color-info)' if pct == 0 else ('var(--color-warn)' if pct < 95 else ('var(--color-pos)' if pct <= 105 else 'var(--color-neg)')) %}
                  <div class="flex items-center gap-2">
                    <div class="flex-1 flex rounded-full overflow-hidden" style="height:6px; background:var(--color-hairline); max-width:140px;">
                      {% if pct > 100 %}
                        {# Fully filled bar split into a 'target met' segment + an 'over' segment. The split mark sits at the proportional 100% boundary so the red sliver visually conveys how much past target you are. #}
                        <div style="width:{{ (100 / pct * 100) }}%; height:100%; background:var(--color-pos);"></div>
                        <div style="width:{{ ((pct - 100) / pct * 100) }}%; height:100%; background:var(--color-neg);"></div>
                      {% else %}
                        <div style="width:{{ pct }}%; height:100%; background:{{ color }};"></div>
                      {% endif %}
                    </div>
                    <span class="num text-[11px] font-semibold" style="color:{{ color }};">{{ "%.0f"|format(pct) }}%</span>
                  </div>
                {% else %}
                  <span class="text-label-3">—</span>
                {% endif %}
              </td>
              <td class="r p-[7px] num">
                {% if r.last_price %}${{ "%.2f"|format(r.last_price|float) }}{% else %}<span class="text-label-3">—</span>{% endif %}
              </td>
              <td class="r p-[7px] text-[11px]">
                <button type="button" class="text-label-2 hover:text-text"
                        hx-get="/positions/plan/modal?symbol={{ r.symbol }}"
                        hx-target="body" hx-swap="beforeend">edit</button>
                <button type="button" class="text-label-2 hover:text-neg ml-2"
                        hx-delete="/positions/plan/target/{{ r.symbol }}"
                        hx-target="#plan-body" hx-swap="outerHTML"
                        hx-confirm="Delete target for {{ r.symbol }}?">×</button>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>

      {# Footer summary #}
      <div class="mt-3 pt-3 flex justify-between flex-wrap gap-x-4 gap-y-1 text-[12px]" style="border-top:0.5px solid var(--color-hairline);">
        <span class="text-label-2">
          Total planned:
          <strong class="num text-text">${{ "%.2f"|format(plan_view.total_planned_dollar|float) }}</strong>
          {% if plan_view.planned_rows_with_quote < plan_view.planned_rows_total %}
            <span class="text-label-3" title="{{ plan_view.planned_rows_total - plan_view.planned_rows_with_quote }} target(s) excluded — no quote available to convert to USD.">({{ plan_view.planned_rows_with_quote }}/{{ plan_view.planned_rows_total }} priced)</span>
          {% endif %}
        </span>
        {% if plan_view.total_to_fill_dollar > 0 %}
          <span class="text-label-2">Total to fill: <strong class="num text-text">+${{ "%.2f"|format(plan_view.total_to_fill_dollar|float) }}</strong></span>
          <span class="text-label-2">Free cash: <strong class="num text-text">${{ "%.2f"|format(plan_view.free_cash|float) }}</strong></span>
          {% set cov = plan_view.coverage_pct|float if plan_view.coverage_pct is not none else 0 %}
          {% set cov_color = 'text-pos' if cov >= 100 else ('text-warn' if cov >= 50 else 'text-neg') %}
          <span class="{{ cov_color }}">Coverage: <strong>{{ "%.0f"|format(cov) }}%</strong>{% if cov < 100 %} — short by ${{ "%.2f"|format((plan_view.total_to_fill_dollar - plan_view.free_cash)|float) }}{% endif %}</span>
        {% else %}
          <span class="text-pos">All targets met</span>
        {% endif %}
      </div>

      {# Pagination footer #}
      {% if pagination is defined and pagination.total_rows > 0 %}
      <div class="flex items-center justify-between mt-3 text-[12px]">
        <div class="text-label-2">
          Showing {{ ((pagination.page - 1) * pagination.page_size) + 1 }}–{{ [pagination.page * pagination.page_size, pagination.total_rows]|min }} of {{ pagination.total_rows }}
        </div>
        <div class="flex items-center gap-3">
          {% if pagination.page > 1 %}
            <a class="text-label-1 hover:underline cursor-pointer"
               hx-get="/positions?view=plan&page={{ pagination.page - 1 }}&page_size={{ pagination.page_size }}{% if selected_account %}&account={{ selected_account }}{% endif %}"
               hx-target="#positions-tab-content"
               hx-swap="outerHTML">← Prev</a>
          {% else %}
            <span class="text-label-3">← Prev</span>
          {% endif %}
          <span class="text-label-2">Page {{ pagination.page }} / {{ pagination.total_pages }}</span>
          {% if pagination.page < pagination.total_pages %}
            <a class="text-label-1 hover:underline cursor-pointer"
               hx-get="/positions?view=plan&page={{ pagination.page + 1 }}&page_size={{ pagination.page_size }}{% if selected_account %}&account={{ selected_account }}{% endif %}"
               hx-target="#positions-tab-content"
               hx-swap="outerHTML">Next →</a>
          {% else %}
            <span class="text-label-3">Next →</span>
          {% endif %}
          <select class="text-label-2 bg-bg border border-hairline rounded px-1"
                  hx-get="/positions?view=plan&page=1{% if selected_account %}&account={{ selected_account }}{% endif %}"
                  hx-include="this"
                  hx-target="#positions-tab-content"
                  hx-swap="outerHTML"
                  name="page_size">
            {% for size in pagination.page_size_options %}
              <option value="{{ size }}" {% if size == pagination.page_size %}selected{% endif %}>{{ size }} / page</option>
            {% endfor %}
          </select>
        </div>
      </div>
      {% endif %}
    </div>
  {% else %}
    <div class="panel py-12 text-center">
      <div class="text-label-2 text-[14px] mb-3">No targets yet.</div>
      <button type="button"
              class="text-[13px] px-3 py-1.5 rounded-md"
              style="background: var(--color-accent); color: white;"
              hx-get="/positions/plan/modal"
              hx-target="body"
              hx-swap="beforeend">+ Add target</button>
    </div>
  {% endif %}
</div>