{# 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 }}"
      hx-swap="innerHTML"
      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] bg-indigo text-white inline-flex items-center"
            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. #}
    <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"
            onclick="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('—') }}
    </button>

    {# Overflow menu — admin-grade actions live behind a kebab to keep the
       primary toolbar focused on Period/Account + freshness. Pattern mirrors
       _row_actions.html. #}
    <div class="relative" x-data="{ open: false }" data-testid="toolbar-overflow">
      <button type="button"
              class="inline-flex items-center justify-center w-7 h-7 rounded-md text-label-2 hover:text-text hover:bg-surface-2"
              aria-label="More actions"
              aria-haspopup="menu"
              :aria-expanded="open"
              @click.stop="open = !open"
              @keydown.escape.stop="open = false">
        <img src="/static/icons/ellipsis.svg?v={{ asset_v }}" class="w-4 h-4 icon-mono" alt="">
      </button>
      <div x-show="open"
           x-cloak
           @click.outside="open = false"
           class="absolute right-0 mt-1 w-56 bg-bg border rounded shadow-lg z-10"
           style="box-shadow: var(--shadow-pane); border-color: var(--color-hairline);"
           role="menu">
        <button type="button"
                class="w-full text-left flex items-center justify-between px-3 py-2 text-[13px] hover:bg-surface-2"
                role="menuitem"
                hx-post="/splits/sync?symbols=ALL"
                hx-target="body"
                hx-swap="none"
                onclick="window.location.reload()"
                @click="open = false">
          <span>Sync splits</span>
          <span class="text-label-3 text-[11px]">↕</span>
        </button>
      </div>
    </div>
  </div>
</form>