{# Plan tab toolbar — sort dropdown (left) + Add target button (right).
   Inputs: plan_view, selected_account.
#}
<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">
    {% if selected_account %}<input type="hidden" name="account" value="{{ selected_account }}">{% endif %}
    {% if plan_view.selected_tag %}<input type="hidden" name="tag" value="{{ plan_view.selected_tag }}">{% 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>
  <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>