{% load strava_icons %}{% comment %}
Compare matrix body: the sport filter bar + the year-over-year table. Rendered in
place on full page load and swapped into #cmp-body on a sport-filter click (htmx).
{% endcomment %}
<div class="cmp-filterbar">
  <span class="cmp-filter-label">Sport</span>
  <div class="seg cmp-seg" role="tablist" aria-label="Filter by sport">
    {% for opt in sport_seg %}
    <button type="button" role="tab" aria-pressed="{% if opt.active %}true{% else %}false{% endif %}"
            hx-get="{% url 'strava:compare' %}?sport={{ opt.key }}&athlete={{ athlete_id }}"
            hx-target="#cmp-body" hx-swap="innerHTML">
      <span class="sport-glyph">{{ opt.icon|group_glyph }}</span>{{ opt.label }}
    </button>
    {% endfor %}
  </div>
  <button type="button" class="cmp-expand" aria-pressed="false" aria-label="Toggle full-width table">
    <span class="cmp-expand-in"><svg viewBox="0 0 24 24"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>Expand</span>
    <span class="cmp-expand-out"><svg viewBox="0 0 24 24"><polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>Collapse</span>
  </button>
</div>

<section class="card cmp-card" data-screen-label="Year comparison matrix">
  {% if years %}
  <div class="cmp-scroll">
    <div class="cmp-table">

      <div class="cmp-head">
        <div class="cmp-corner">Metric</div>
        {% for y in years %}
        <div class="cmp-yhead{% if y.current %} is-current{% endif %}">
          <div class="yr">{{ y.year }}</div>
          <div class="ytag">{{ y.tag }}</div>
        </div>
        {% endfor %}
      </div>

      {% for row in rows %}
      <div class="cmp-row">
        <div class="cmp-metric">
          <span class="mic">{% include "strava/widgets/compare_icon.html" with icon=row.icon %}</span>
          <span><span class="mname">{{ row.name }}</span><br><span class="munit">{{ row.unit }}</span></span>
        </div>
        {% for c in row.cells %}
        <div class="cmp-cell{% if c.best %} is-best{% endif %}{% if c.current %} is-current{% endif %}">
          {% if c.has %}
          <span class="cval">{{ c.display }}{% if c.small %}<small>{{ c.small }}</small>{% endif %}{% if c.best %}<svg class="crown" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8l4 4 5-8 5 8 4-4-2 12H5L3 8z"></path></svg>{% endif %}</span>
          <span class="cmp-bar"><i data-w="{{ c.w }}"></i></span>
          {% include "strava/widgets/compare_delta.html" with delta=c.delta %}
          {% else %}
          <span class="cval cval-empty">—</span>
          {% endif %}
        </div>
        {% endfor %}
      </div>
      {% endfor %}

      {% for row in aoty_rows %}
      <div class="cmp-row cmp-aoty{% if forloop.first %} cmp-effort-start{% endif %}">
        <div class="cmp-metric">
          <span class="mic">{% include "strava/widgets/compare_icon.html" with icon=row.icon %}</span>
          <span><span class="mname">{{ row.name }}</span><br><span class="munit">{{ row.unit }}</span></span>
        </div>
        {% for c in row.cells %}
        <div class="cmp-cell{% if c.current %} is-current{% endif %}">
          {% if c.title %}
          {% if c.photo %}<img class="cmp-aoty-photo aoty-link" src="{{ c.photo }}" alt="{{ c.title }}" loading="lazy" data-activity="{{ c.id }}">{% endif %}
          <span class="aoty-name aoty-link" role="button" tabindex="0" data-activity="{{ c.id }}">{{ c.title }}</span>
          <span class="aoty-stat">{% for s in c.segments %}{% if not forloop.first %} · {% endif %}{{ s.v }}<small>{{ s.u }}</small>{% endfor %}</span>
          {% else %}
          <span class="aoty-name aoty-empty">—</span>
          {% endif %}
        </div>
        {% endfor %}
      </div>
      {% endfor %}

    </div>
  </div>
  {% else %}
  <p class="cmp-empty">No activities to compare yet.</p>
  {% endif %}
</section>