{# Plan tab toolbar — sort dropdown (left) + Add target button (right).
   Inputs: plan_view, selected_accounts.
#}
<div class="flex items-center justify-between mb-3 flex-wrap gap-2">
  <form method="get" action="/positions" class="flex items-center gap-2">
    <input type="hidden" name="view" value="plan">
    {% for a in selected_accounts %}<input type="hidden" name="account" value="{{ a }}">{% endfor %}
    {% if plan_view.selected_tag %}<input type="hidden" name="tag" value="{{ plan_view.selected_tag }}">{% endif %}
    {# Preserve pagination across sort changes — without this, switching sort
       resets page_size to the default. Page is intentionally not preserved
       because changing sort order makes the old page index meaningless. #}
    {% if pagination is defined and pagination.page_size %}<input type="hidden" name="page_size" value="{{ pagination.page_size }}">{% endif %}
    <label class="text-[11px] text-label-2">Sort:</label>
    <select name="sort"
            class="text-[12px] px-2 py-[4px] rounded-md"
            style="background:var(--color-surface); border:0.5px solid var(--color-hairline); color:var(--color-text);"
            onchange="this.form.submit()">
      <option value="alpha"  {% if plan_view.sort_key == 'alpha' %}selected{% endif %}>Alphabetical</option>
      <option value="gap"    {% if plan_view.sort_key == 'gap' %}selected{% endif %}>Largest gap</option>
      <option value="filled" {% if plan_view.sort_key == 'filled' %}selected{% endif %}>Lowest % filled</option>
      <option value="target" {% if plan_view.sort_key == 'target' %}selected{% endif %}>Highest target $</option>
      <option value="manual" {% if plan_view.sort_key == 'manual' %}selected{% endif %}>Manual (drag to reorder)</option>
    </select>
  </form>
  <div class="flex items-center gap-2">
    <button
      type="button"
      hx-post="/positions/plan/mark-seen"
      hx-swap="none"
      hx-on::after-request="if (event.detail.successful) window.location.reload()"
      class="text-xs text-label-2 hover:text-text px-2 py-1 border border-hairline rounded">
      Mark as seen
    </button>
    <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>
</div>