{% load humanize %}
<div class="row fun-stats-row" id="dash-numbers" hx-swap-oob="true" data-screen-label="Fun stats row">
  <section class="card" data-screen-label="Fun stats">
    <div class="card-head">
      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"></circle><circle cx="9" cy="10" r="0.6"></circle><circle cx="15" cy="10" r="0.6"></circle><path d="M8.5 14a4 4 0 0 0 7 0"></path></svg>
      <h2 class="card-title">Fun Stats</h2>
    </div>
    <div class="fun-list">
      <div class="fun-row">
        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"></circle><line x1="3.5" y1="12" x2="20.5" y2="12"></line><path d="M12 3.5a13 13 0 0 1 0 17"></path><path d="M12 3.5a13 13 0 0 0 0 17"></path></svg>
        <span class="k">Around Earth</span><span class="v">{{ fun_stats.around_earth }}</span>
      </div>
      <div class="fun-row">
        <svg viewBox="0 0 24 24"><polyline points="3 20 10 7 14 13 17 9 21 20"></polyline></svg>
        <span class="k">Everest Climbed</span><span class="v">{{ fun_stats.everest }}</span>
      </div>
      <div class="fun-row">
        <svg viewBox="0 0 24 24"><circle cx="12" cy="9" r="5.5"></circle><line x1="12" y1="14.5" x2="12" y2="21"></line></svg>
        <span class="k">CO₂ Saved (cycling)</span><span class="v">{{ fun_stats.co2_saved }}</span>
      </div>
      <div class="fun-row">
        <svg viewBox="0 0 24 24"><line x1="6" y1="3.5" x2="6" y2="21"></line><polyline points="6 4.5 18 4.5 14.5 9 18 13.5 6 13.5"></polyline></svg>
        <span class="k">Marathons Covered</span><span class="v">{{ fun_stats.marathons }}</span>
      </div>
    </div>
  </section>

  <section class="card" data-screen-label="Summary">
    <div class="card-head">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polyline></svg>
      <h2 class="card-title">Summary</h2>
    </div>
    <div class="fun-list">
      <div class="fun-row">
        <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="13" rx="2"></rect><polyline points="8 7 9.5 4.5 14.5 4.5 16 7"></polyline><circle cx="12" cy="13" r="3.4"></circle></svg>
        <span class="k">Photos Taken</span><span class="v">{{ summary.photos|intcomma }}</span>
      </div>
      <div class="fun-row">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2c0 0-5 5-5 10a5 5 0 0 0 10 0c0-2-.8-3.8-2-5 0 2.5-1.5 4-3 4.5 .5-3-1-6 0-9.5z"></path></svg>
        <span class="k">Calories Burned</span><span class="v">{{ summary.calories|intcomma }} <small>kcal</small></span>
      </div>
      <div class="fun-row">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
        <span class="k">Kudos Received</span><span class="v">{{ summary.kudos|intcomma }}</span>
      </div>
      <div class="fun-row">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
        <span class="k">Avg Heart Rate</span><span class="v">{% if summary.avg_hr %}{{ summary.avg_hr }} <small>bpm</small>{% else %}—{% endif %}</span>
      </div>
      <div class="fun-row">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><circle cx="12" cy="9" r="5.5"></circle><polyline points="9 13.5 7 21 12 18.5 17 21 15 13.5"></polyline></svg>
        <span class="k">Achievements</span><span class="v">{{ summary.achievements|intcomma }}</span>
      </div>
      <div class="fun-row">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17a7 7 0 0 0 7-7V3H5v7a7 7 0 0 0 7 7z"></path><path d="M5 7H2v2a3 3 0 0 0 3 3m14-5h3v2a3 3 0 0 1-3 3"></path><path d="M8 21h8m-4-4v4"></path></svg>
        <span class="k">PRs Set</span><span class="v">{{ summary.prs|intcomma }}</span>
      </div>
    </div>
  </section>
</div>