{# Caller may set toolbar_hx_target (e.g. "#portfolio-body") to enable
   HTMX-driven swaps. When absent, the toolbar falls back to a plain GET
   form whose period/account changes do a full page reload (preserving
   the prior behavior on pages like /positions that have no body
   fragment endpoint). #}
{% if toolbar_hx_target %}
{# hx-push-url is intentionally NOT "true": HTMX would push the fragment URL
   (toolbar_hx_get), which reload-breaks the page. /portfolio/body sets a
   canonical HX-Push-Url header so the address bar shows the parent URL. #}
<form method="get" action="{{ toolbar_action }}"
      hx-get="{{ toolbar_hx_get }}"
      hx-target="{{ toolbar_hx_target }}"
      {# swap/settle windows let the .htmx-swapping → .htmx-settling opacity
         cross-fade actually render (htmx defaults are swap:0/settle:20ms,
         which collapse the fade). Overview-only: this block is gated on
         toolbar_hx_target, which only portfolio.py sets. #}
      hx-swap="innerHTML swap:160ms settle:240ms"
      hx-trigger="change from:select, change from:input[type=checkbox]"
      hx-indicator="#portfolio-toolbar-spinner"
      class="kpi-card flex gap-3 flex-wrap items-end text-sm"
      x-data="{ editing: false }">
  <span id="portfolio-toolbar-spinner">{% include "_spinner.html" %}</span>
{% else %}
<form method="get" action="{{ toolbar_action }}"
      class="kpi-card flex gap-3 flex-wrap items-end text-sm"
      x-data="{ editing: false }">
{% endif %}
  <div>
    <label class="label-uc">Period:</label>
    <select name="period"{% if not toolbar_hx_target %} onchange="this.form.submit()"{% endif %}
            class="bg-surface text-text rounded-md px-2 py-1 text-[12px]"
            style="border:0.5px solid var(--color-hairline);">
      <option value="ytd" {% if selected_period == 'ytd' %}selected{% endif %}>YTD ({{ current_year }})</option>
      {% for y in available_years %}
        {% if y != current_year %}
          <option value="{{ y }}" {% if selected_period == y|string %}selected{% endif %}>{{ y }}</option>
        {% endif %}
      {% endfor %}
      <option value="lifetime" {% if selected_period == 'lifetime' %}selected{% endif %}>Lifetime</option>
    </select>
  </div>
  {% import "_account_multi_select.html" as macros_acc %}
  <div>
    <label class="label-uc">Account:</label>
    {{ macros_acc.account_multi_select(accounts_available, selected_accounts) }}
  </div>
  <div class="ml-auto flex items-center gap-2">
    {# Edit layout / Done / Reset controls — client-side Alpine; no form submission.
       Sized + line-height-matched to the Period/Account selects on the same
       row (px-2 py-1 text-[12px] leading-[18px]) so the toolbar reads as one
       row of equal-height controls instead of a button towering over selects. #}
    <button type="button"
            class="overview-edit-btn rounded-md px-2 py-1 text-[12px] leading-[18px] bg-surface text-text inline-flex items-center"
            style="border:0.5px solid var(--color-hairline);"
            x-show="!editing"
            @click="
              editing = true;
              const root = document.getElementById('overview-rows');
              if (root) root.dataset.editMode = 'on';
              document.body.dispatchEvent(new CustomEvent('overview:edit-mode-change'));
            ">
      Edit layout
    </button>
    <button type="button"
            class="overview-edit-btn rounded-md px-2 py-1 text-[12px] leading-[18px] text-white inline-flex items-center"
            style="background: var(--color-signature);"
            x-show="editing"
            @click="
              editing = false;
              const root = document.getElementById('overview-rows');
              if (root) root.dataset.editMode = 'off';
              document.body.dispatchEvent(new CustomEvent('overview:edit-mode-change'));
            ">
      Done
    </button>
    <button type="button"
            class="overview-edit-btn rounded-md px-2 py-1 text-[12px] leading-[18px] bg-surface text-label-2 inline-flex items-center"
            style="border:0.5px solid var(--color-hairline);"
            x-show="editing"
            @click="
              if (!confirm('Reset Overview layout to the default for this profile?')) return;
              fetch('/portfolio/layout/reset', { method: 'POST' }).then(() => window.location.reload());
            ">
      Reset to default
    </button>
    {# Freshness chip — absorbs the data-source disclaimer in its tooltip.
       Reload runs after the refresh POST completes so the chip + KPIs pick up
       fresh quotes; reloading via onclick would race-cancel the in-flight POST. #}
    <button type="button"
            data-testid="freshness-chip"
            class="freshness-chip inline-flex items-center gap-1 px-2 py-1 rounded text-[12px] {% if price_freshness == 'green' %}text-pos{% elif price_freshness == 'amber' %}text-warn{% elif price_freshness == 'red' %}text-neg{% else %}text-label-3{% endif %}"
            hx-post="/prices/refresh?symbols=ALL"
            hx-target="body"
            hx-swap="none"
            hx-on::after-request="if (event.detail.successful) window.location.reload()"
            title="Quotes via Yahoo Finance (~15 min delay). {% if price_freshness == 'green' %}Prices are fresh — click to force refresh.{% elif price_freshness == 'amber' %}Some prices are from cache — click to refresh.{% elif price_freshness == 'red' %}Prices are stale — click to refresh.{% else %}No price data yet — click to fetch.{% endif %}">
      <span class="rounded-full w-1.5 h-1.5 {% if price_freshness == 'green' %}bg-pos{% elif price_freshness == 'amber' %}bg-warn{% elif price_freshness == 'red' %}bg-neg{% else %}bg-label-3{% endif %}"></span>
      Prices {{ price_freshness_label|default('none yet') }}
    </button>

    {# Single direct action — was an overflow kebab when this slot held
       multiple admin-grade actions; collapsed back to a button while only
       "Sync splits" lives here. Keep data-testid="toolbar-overflow" so
       existing tests + screenreaders still find it. #}
    <button type="button"
            data-testid="toolbar-overflow"
            class="inline-flex items-center gap-1 px-2 py-1 rounded-md text-[12px] text-label-2 hover:text-text hover:bg-surface-2"
            title="Re-apply broker stock-split adjustments to lot quantities"
            hx-post="/splits/sync?symbols=ALL"
            hx-target="body"
            hx-swap="none"
            hx-on::after-request="if (event.detail.successful) window.location.reload()">
      <span aria-hidden="true" class="text-[11px]">↕</span>
      <span>Sync splits</span>
    </button>
  </div>
</form>