{% if not markers %}
  <div class="panel text-label-2 text-sm">No wash sales in this view.</div>
{% else %}
  <div class="panel">
    <div class="text-xs text-label-2 uppercase mb-2">{{ selected_year }} — {{ markers|length }} violation(s)</div>
    <div class="relative h-16 bg-surface-2 border-t border-b" style="border-color: var(--color-hairline);">
      <div class="absolute inset-0 flex justify-between pointer-events-none">
        {% for m in ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"] %}
          <span class="px-1 text-label-3 text-[10px]">{{ m }}</span>
        {% endfor %}
      </div>
      {% for m in markers %}
        <button
          hx-get="/wash-sales/focus/{{ m.id }}"
          hx-target="#focus-strip"
          hx-swap="innerHTML"
          class="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full hover:scale-150 transition-transform duration-200 cursor-pointer"
          style="left: {{ m.left_pct }}%; background-color: {% if m.confidence=='Confirmed' %}#FF453A{% elif m.confidence=='Probable' %}#FF9F0A{% else %}#64D2FF{% endif %}; box-shadow: 0 0 0 2.5px #2C2C2E, 0 0 12px currentColor;"
          title="{{ m.ticker }} · {{ m.loss_account }} · {{ m.date }} · ${{ '%.2f'|format(m.disallowed) }}">
          <span class="sr-only">{{ m.ticker }} {{ m.date }}</span>
        </button>
      {% endfor %}
    </div>
    <div class="text-xs text-label-2 mt-2">Click a dot to see the ±30-day focus strip.</div>
  </div>
{% endif %}