{% load humanize strava_icons %}
<div class="acts-table-wrap" id="feed-table">
  <table class="acts-table">
    <thead>
      <tr>
        <th class="at-icon-cell"></th>
        <th data-sort="name" onclick="setSort('name')"{% if sort == 'name' %} aria-sort="{% if dir == 'asc' %}ascending{% else %}descending{% endif %}"{% endif %}>Name</th>
        <th data-sort="date" onclick="setSort('date')"{% if sort == 'date' %} aria-sort="{% if dir == 'asc' %}ascending{% else %}descending{% endif %}"{% endif %}>Date</th>
        <th data-sort="dist" onclick="setSort('dist')"{% if sort == 'dist' %} aria-sort="{% if dir == 'asc' %}ascending{% else %}descending{% endif %}"{% endif %}>Distance</th>
        <th data-sort="time" onclick="setSort('time')"{% if sort == 'time' %} aria-sort="{% if dir == 'asc' %}ascending{% else %}descending{% endif %}"{% endif %}>Time</th>
        <th data-sort="pace" onclick="setSort('pace')"{% if sort == 'pace' %} aria-sort="{% if dir == 'asc' %}ascending{% else %}descending{% endif %}"{% endif %}>Pace</th>
        <th data-sort="elev" onclick="setSort('elev')"{% if sort == 'elev' %} aria-sort="{% if dir == 'asc' %}ascending{% else %}descending{% endif %}"{% endif %}>Elev.</th>
        <th data-sort="cal" onclick="setSort('cal')"{% if sort == 'cal' %} aria-sort="{% if dir == 'asc' %}ascending{% else %}descending{% endif %}"{% endif %}>Calories</th>
        <th>Gear</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for activity in activities %}
      <tr class="at-row" data-activity="{{ activity.id }}" tabindex="0" role="button" aria-label="Open {{ activity.name }}">
        <td class="at-icon-cell">
          <div class="at-type-icon">
            <span class="sport-glyph">{{ activity.sport_type|sport_glyph }}</span>
          </div>
        </td>
        <td class="at-name">
          {{ activity.name }}
          {% if activity.pb %}<span class="at-pr-pip" title="Personal Record"></span>{% endif %}
        </td>
        <td class="at-date">{{ activity.start_date|date:"M j, Y" }}</td>
        <td class="at-num">{{ activity.distance_km }} <small>km</small></td>
        <td class="at-num">{{ activity.duration }}</td>
        <td class="at-num">{{ activity.pace }}</td>
        <td class="at-num">{{ activity.elevation }} <small>m</small></td>
        <td class="at-num">{% if activity.calories %}{{ activity.calories|intcomma }} <small>kcal</small>{% else %}<span class="at-empty">–</span>{% endif %}</td>
        <td class="at-gear-cell">{{ activity.gear|default:'' }}</td>
        <td></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>