{# Wash-sales tab content — inner body for the /tax wash-sales tab.
   Context variables expected: view, filter_ticker, filter_account, filter_year,
   filter_confidence, tickers, accounts, years, selected_year,
   selected_accounts, accounts_available, account_filter_active,
   plus table-view keys: violations, summary, groups, expand_default, lag_days, source_label, sort, order, next_lag_order
   or calendar-view keys: markers
#}
{% import "_account_multi_select.html" as macros_acc %}

{# Unified filter bar — fields used by both views #}
{% set _has_filters = filter_ticker or selected_accounts or filter_confidence or filter_year_explicit %}
<details class="mb-4" {% if _has_filters %}open{% endif %}>
  <summary class="cursor-pointer text-sm text-label-2 mb-2 select-none">
    <span class="text-label-1 font-medium">Filter</span>
    {% if _has_filters %}<span class="text-label-3">— {% if filter_ticker %}{{ filter_ticker }} · {% endif %}{% if selected_accounts %}{{ selected_accounts|join(', ') }} · {% endif %}{% if filter_year %}{{ filter_year }} · {% endif %}{% if filter_confidence %}{{ filter_confidence }}{% endif %}</span>{% endif %}
  </summary>
<form method="get" action="/tax" class="panel flex gap-3 flex-wrap items-end">
  <input type="hidden" name="view" value="{{ view }}"/>
  <div>
    <label class="block label-uc">Ticker</label>
    <input type="text" name="ticker" value="{{ filter_ticker }}" list="ticker-list"
           class="bg-surface text-text rounded-md px-2 py-1 font-mono text-[13px] w-32"
           style="border:0.5px solid var(--color-hairline);"/>
    <datalist id="ticker-list">
      {% for t in tickers %}<option value="{{ t }}">{% endfor %}
    </datalist>
  </div>
  <div>
    <label class="block label-uc">Account</label>
    {{ macros_acc.account_multi_select(accounts_available, selected_accounts) }}
  </div>
  <div>
    <label class="block label-uc">Year</label>
    {% if view == 'calendar' %}
      <select name="year" class="bg-surface text-text rounded-md px-2 py-1 text-[13px] font-mono"
              style="border:0.5px solid var(--color-hairline);">
        <option value="0" {% if all_years %}selected{% endif %}>All years</option>
        {% for y in years %}
          <option value="{{ y }}" {% if (not all_years) and y == selected_year %}selected{% endif %}>{{ y }}</option>
        {% endfor %}
      </select>
    {% else %}
      <select name="year" class="bg-surface text-text rounded-md px-2 py-1 text-[13px] font-mono"
              style="border:0.5px solid var(--color-hairline);">
        <option value="0" {% if all_years %}selected{% endif %}>All years</option>
        {% for y in years %}
          <option value="{{ y }}" {% if (not all_years) and y == selected_year %}selected{% endif %}>{{ y }}</option>
        {% endfor %}
      </select>
    {% endif %}
  </div>
  <div>
    <label class="block label-uc">Confidence</label>
    <select name="confidence" class="bg-surface text-text rounded-md px-2 py-1 text-[13px]"
            style="border:0.5px solid var(--color-hairline);">
      <option value="">All</option>
      <option value="confirmed" {% if filter_confidence=='confirmed' %}selected{% endif %}>Confirmed</option>
      <option value="probable" {% if filter_confidence=='probable' %}selected{% endif %}>Probable</option>
      <option value="unclear" {% if filter_confidence=='unclear' %}selected{% endif %}>Unclear</option>
    </select>
  </div>
  {% if sort %}<input type="hidden" name="sort" value="{{ sort }}"/>{% endif %}
  {% if order %}<input type="hidden" name="order" value="{{ order }}"/>{% endif %}
  <button type="submit" class="btn">Apply</button>
  <a href="/tax?view={{ view }}" class="btn-ghost">Reset</a>
</form>
</details>

{# W2: active-filter chip summary row with ⌫ reset link. Always rendered so
   the reset anchor (data-testid="filter-reset") is always in the DOM. #}
<div class="flex items-center gap-2 flex-wrap mb-3 text-[12px]">
  <span class="text-label-2">Filters:</span>
  {% if filter_ticker %}
    <span class="chip">ticker: {{ filter_ticker }}
      <button type="button" aria-label="Remove ticker filter"
              hx-get="{{ chips_clear_urls.ticker }}" hx-target="body" hx-push-url="true"
              class="ml-1 hover:text-text">&#10007;</button>
    </span>
  {% endif %}
  {% if selected_accounts %}
    <span class="chip">account: {{ selected_accounts|join(', ') }}
      <button type="button" aria-label="Remove account filter"
              hx-get="{{ chips_clear_urls.account }}" hx-target="body" hx-push-url="true"
              class="ml-1 hover:text-text">&#10007;</button>
    </span>
  {% endif %}
  {% if filter_confidence %}
    <span class="chip">confidence: {{ filter_confidence }}
      <button type="button" aria-label="Remove confidence filter"
              hx-get="{{ chips_clear_urls.confidence }}" hx-target="body" hx-push-url="true"
              class="ml-1 hover:text-text">&#10007;</button>
    </span>
  {% endif %}
  <a data-testid="filter-reset" href="/tax?view={{ view }}" class="ml-auto text-label-3 hover:text-text" title="Reset filters">&#10007; reset</a>
</div>

{# W3: compact calendar strip — always rendered so the testid is always in the DOM.
   On the table view this renders as a minimal month-header strip. The full
   ribbon (portfolio equity-curve page) keeps its own rich chart. #}
<div data-testid="calendar-strip" class="mb-4 flex items-center gap-2 text-[11px] text-label-3">
  {% for label in ["J","F","M","A","M","J","J","A","S","O","N","D"] %}
    <span class="flex-1 text-center">{{ label }}</span>
  {% endfor %}
</div>

{# T5: realized-P/L stacked mini-bar — losses left of midpoint, gains right.
   Uses realized_kpis (OffsetBudget) from the wash-sales context. #}
{% if realized_kpis is defined %}
  {% set _losses = realized_kpis.realized_losses_ytd|abs %}
  {% set _gains  = realized_kpis.realized_gains_ytd|abs %}
  {% set _max    = (_losses if _losses > _gains else _gains) %}
  {% if _max > 0 %}
    <div data-testid="realized-mini-bar" class="mb-4 flex items-center gap-2 text-[11px] text-label-2">
      <div class="flex-1 grid grid-cols-2 h-4 rounded overflow-hidden" style="background: var(--color-hairline);">
        <div class="flex justify-end">
          <div class="h-full" style="width: {{ ((_losses / _max) * 100)|int }}%; background: var(--color-neg);"
               title="Losses {{ fmt_currency(realized_kpis.realized_losses_ytd) }}"></div>
        </div>
        <div class="flex justify-start">
          <div class="h-full" style="width: {{ ((_gains / _max) * 100)|int }}%; background: var(--color-pos);"
               title="Gains {{ fmt_currency(realized_kpis.realized_gains_ytd) }}"></div>
        </div>
      </div>
      <span class="text-loss tabular-nums">{{ fmt_currency(realized_kpis.realized_losses_ytd) }}</span>
      <span class="text-label-3">/</span>
      <span class="text-pos tabular-nums">{{ fmt_currency(realized_kpis.realized_gains_ytd) }}</span>
    </div>
  {% else %}
    <div data-testid="realized-mini-bar" class="mb-4 text-[12px] text-label-2">No realized P/L this period.</div>
  {% endif %}
{% endif %}

{# View toggle — segmented control. Preserve filters when toggling. #}
{% set _year_qs = 0 if all_years else (filter_year or selected_year) %}
{% set qs_no_view %}ticker={{ filter_ticker|urlencode }}{% for a in selected_accounts %}&account={{ a|urlencode }}{% endfor %}&year={{ _year_qs }}&confidence={{ filter_confidence|urlencode }}{% endset %}
<div class="seg mb-4 inline-flex">
  <a href="/tax?view=table&{{ qs_no_view }}"
     class="px-3 py-1.5 text-sm {% if view == 'table' %}seg-active{% endif %}">Table</a>
  <a href="/tax?view=calendar&{{ qs_no_view }}"
     class="px-3 py-1.5 text-sm {% if view == 'calendar' %}seg-active{% endif %}">Calendar</a>
</div>

{# Wash-sale watch — recent loss closes you shouldn't buy back yet. Lives at
   the top of both views so it's always visible while reviewing wash sales. #}
  <p class="text-[12px] text-label-2 mb-2 leading-[1.55]">
    <span class="text-label-1 font-medium">Watch</span> — open positions where you closed a loss recently and a re-buy here would still trigger a wash sale.
    <span class="text-label-1 font-medium">Violations</span> — realized wash sales below.
  </p>
<div class="panel mb-4">
  {% include "_portfolio_wash_watch.html" %}
</div>

{% if view == 'calendar' %}
  {% include "_calendar_ribbon.html" %}
  <div id="focus-strip" class="mt-6"></div>
{% else %}
  {# W1: violations panel is explicitly labeled backward-looking. #}
  <div class="flex items-baseline gap-3 mb-2">
    <h4 class="m-0 text-[14px] font-semibold">Violations · backward-looking detected</h4>
  </div>
  {% if summary and summary.violation_count > 0 %}
    <div class="panel mb-4 text-sm flex gap-4 items-baseline">
      <div><span class="font-medium">{{ summary.violation_count }}</span> violations</div>
      <div><span class="font-medium text-confirmed num">${{ "%.2f"|format(summary.disallowed_total|float) }}</span> disallowed</div>
      <div><span class="chip-confirm">{{ summary.confirmed_count }} confirmed</span></div>
      <div><span class="chip-probable">{{ summary.probable_count }} probable</span></div>
      <div><span class="chip-unclear">{{ summary.unclear_count }} unclear</span></div>
    </div>
  {% endif %}
  {% include "_detail_table.html" %}
{% endif %}