{% extends "base.html" %}
{% set active_page = 'wash_sales' %}
{% block title %}Wash sales · net-alpha{% endblock %}
{% block content %}
  <h1 class="text-2xl mb-4">Wash sales</h1>

  {# Unified filter bar — fields used by both views #}
  <form method="get" class="panel mb-4 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 rgba(255,255,255,0.08);"/>
      <datalist id="ticker-list">
        {% for t in tickers %}<option value="{{ t }}">{% endfor %}
      </datalist>
    </div>
    <div>
      <label class="block label-uc">Account</label>
      <input type="text" name="account" value="{{ filter_account }}" list="account-list"
             class="bg-surface text-text rounded-md px-2 py-1 text-[13px] w-40"
             style="border:0.5px solid rgba(255,255,255,0.08);"/>
      <datalist id="account-list">
        {% for a in accounts %}<option value="{{ a }}">{{ a }}</option>{% endfor %}
      </datalist>
    </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 rgba(255,255,255,0.08);">
          {% for y in years %}
            <option value="{{ y }}" {% if y == selected_year %}selected{% endif %}>{{ y }}</option>
          {% endfor %}
        </select>
      {% else %}
        <input type="number" name="year" value="{{ filter_year }}"
               class="bg-surface text-text rounded-md px-2 py-1 font-mono text-[13px] w-24"
               style="border:0.5px solid rgba(255,255,255,0.08);"/>
      {% 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 rgba(255,255,255,0.08);">
        <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="/wash-sales?view={{ view }}" class="btn-ghost">Reset</a>
  </form>

  {# View toggle — segmented control. Preserve filters when toggling. #}
  {% set qs_no_view %}ticker={{ filter_ticker|urlencode }}&account={{ filter_account|urlencode }}&year={{ filter_year }}&confidence={{ filter_confidence|urlencode }}{% endset %}
  <div class="seg mb-4 inline-flex">
    <a href="/wash-sales?view=table&{{ qs_no_view }}"
       class="px-3 py-1.5 text-sm {% if view == 'table' %}seg-active{% endif %}">Table</a>
    <a href="/wash-sales?view=calendar&{{ qs_no_view }}"
       class="px-3 py-1.5 text-sm {% if view == 'calendar' %}seg-active{% endif %}">Calendar</a>
  </div>

  {% if view == 'calendar' %}
    {% include "_calendar_ribbon.html" %}
    <div id="focus-strip" class="mt-6"></div>
  {% else %}
    {% 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 %}
{% endblock %}