{% load humanize strava_icons %}
<!-- Summary bar -->
<div class="gear-summary">
  <div class="gear-summary-item">
    <span class="gear-summary-val">{{ summary.bikes }}</span>
    <span class="gear-summary-lbl">Bikes</span>
  </div>
  <div class="gear-summary-item">
    <span class="gear-summary-val">{{ summary.shoes }}</span>
    <span class="gear-summary-lbl">Shoes</span>
  </div>
  <div class="gear-summary-item">
    <span class="gear-summary-val">{{ summary.total_km|intcomma }}<span style="font-size:18px;font-weight:600;color:var(--ink-3)"> km</span></span>
    <span class="gear-summary-lbl">Total logged</span>
  </div>
  <div class="gear-summary-item">
    <span class="gear-summary-val">{{ summary.activities|intcomma }}</span>
    <span class="gear-summary-lbl">Activities</span>
  </div>
</div>

{% if bikes %}
<!-- ——— Bikes ——— -->
<section class="gear-section" data-screen-label="Bikes">
  <div class="gear-section-head">
    <div class="gear-section-icon">{{ 'ride'|group_glyph }}</div>
    <h2 class="gear-section-title">Bikes</h2>
    <span class="gear-section-count">{{ bikes|length }} bike{{ bikes|length|pluralize }}</span>
  </div>
  <div class="gear-grid">
    {% for gear in bikes %}{% include "strava/widgets/gear_card.html" %}{% endfor %}
  </div>
</section>
{% endif %}

{% if shoes %}
<!-- ——— Shoes ——— -->
<section class="gear-section" data-screen-label="Shoes">
  <div class="gear-section-head">
    <div class="gear-section-icon">{{ 'run'|group_glyph }}</div>
    <h2 class="gear-section-title">Shoes</h2>
    <span class="gear-section-count">{{ shoes|length }} pair{{ shoes|length|pluralize }}</span>
  </div>
  <div class="gear-grid">
    {% for gear in shoes %}{% include "strava/widgets/gear_card.html" %}{% endfor %}
  </div>
</section>
{% endif %}

{% if not gear_list %}
<p class="gear-empty">No gear matches your filters.</p>
{% endif %}

<!-- Out-of-band hero count update -->
<p class="gear-hero-sub" id="gear-hero-sub" hx-swap-oob="true">{{ total_items }} item{{ total_items|pluralize }} · {{ summary.total_km|intcomma }} km total</p>