{% extends "tracker/base.html" %}{% load fmt static %}
{% block title %}{{ a.name }}{% endblock %}
{% block head %}
{% if a.has_gps %}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>{% endif %}
{% endblock %}
{% block content %}
<h1>{{ a.name }} <span class="tag {{ a.sport }}">{{ a.get_sport_display }}</span></h1>
<p class="muted">{{ a.start|date:"l j F Y, H:i" }} UTC{% if a.device %} - {{ a.device }}{% endif %}{% if a.source_file %} - {{ a.source_file }}{% endif %}</p>
<div class="grid3" style="margin-bottom:18px">
  <div class="stat"><div class="v">{{ a.distance|km:2 }} km</div><div class="l">Distance</div></div>
  <div class="stat"><div class="v">{{ a.moving_time|duration }}</div><div class="l">Moving ({{ a.elapsed_time|duration }} elapsed)</div></div>
  {% if a.sport == "run" %}<div class="stat"><div class="v">{{ a.avg_pace|pace }} /km</div><div class="l">Avg pace</div></div>
  {% if a.avg_gap_pace %}<div class="stat"><div class="v">{{ a.avg_gap_pace|pace }} /km</div><div class="l">Grade-adjusted pace</div></div>{% endif %}
  {% else %}<div class="stat"><div class="v">{{ a.avg_speed|kmh }} km/h</div><div class="l">Avg speed</div></div>{% endif %}
  <div class="stat"><div class="v">+{{ a.elevation_gain|num:0 }} m</div><div class="l">Elevation gain (-{{ a.elevation_loss|num:0 }} m)</div></div>
  {% if a.avg_hr %}<div class="stat"><div class="v">{{ a.avg_hr|num:0 }} / {{ a.max_hr|num:0 }}</div><div class="l">Avg / max HR</div></div>{% endif %}
  {% if a.normalized_power %}<div class="stat"><div class="v">{{ a.normalized_power|num:0 }} W</div><div class="l">Normalized power (avg {{ a.avg_power|num:0 }})</div></div>
  <div class="stat"><div class="v">{{ a.intensity_factor|num:2 }}</div><div class="l">Intensity factor</div></div>{% endif %}
  <div class="stat"><div class="v">{{ a.tss|num:0 }}</div><div class="l">TSS ({{ a.tss_method|default:"n/a" }})</div></div>
  {% if a.trimp %}<div class="stat"><div class="v">{{ a.trimp|num:0 }}</div><div class="l">TRIMP</div></div>{% endif %}
  {% if a.decoupling is not None %}<div class="stat"><div class="v">{{ a.decoupling|num:1 }}%</div><div class="l">Cardiac drift (Pa:HR)</div></div>{% endif %}
</div>
<div class="grid2">
  {% if a.has_gps %}<div class="card"><h2>Route</h2><div id="map"></div></div>{% endif %}
  <div class="card" {% if not a.has_gps %}style="grid-column:1/-1"{% endif %}><h2>Analysis</h2><div id="charts"></div></div>
</div>
{{ stream|json_script:"stream-data" }}
<script type="module" src="{% static 'tracker/activity.js' %}"></script>

<div class="grid2">
  <div class="card"><h2>Splits <span class="muted"><a href="?unit=km">km</a> | <a href="?unit=mi">mi</a></span></h2>
    <table><tr><th>#</th><th class="r">Dist</th><th class="r">Time</th><th class="r">{% if a.sport == "run" %}Pace{% else %}Speed{% endif %}</th><th class="r">HR</th>{% if a.avg_power %}<th class="r">W</th>{% endif %}<th class="r">Elev</th></tr>
    {% for s in splits %}<tr><td>{{ s.index }}</td><td class="r">{{ s.distance|km:2 }} km</td><td class="r">{{ s.time|duration }}</td>
    <td class="r">{% if a.sport == "run" %}{{ s.pace|pace:unit }} /{{ unit }}{% else %}{{ s.speed|kmh }} km/h{% endif %}</td>
    <td class="r">{{ s.avg_hr|num:0 }}</td>{% if a.avg_power %}<td class="r">{{ s.avg_power|num:0 }}</td>{% endif %}<td class="r">{{ s.elev_change|num:0 }} m</td></tr>{% endfor %}</table>
  </div>
  <div>
    {% if zones %}<div class="card"><h2>Heart-rate zones</h2>
      {% for z in zones %}<div class="zrow"><span>{{ z.name }}</span><div class="bar-zone"><span style="width:{{ z.share|floatformat:1 }}%"></span></div><span class="muted">{{ z.seconds|duration }} ({{ z.low }}-{{ z.high }})</span></div>{% endfor %}
    </div>{% endif %}
    {% if efforts %}<div class="card"><h2>Best efforts</h2><table>
      {% for e in efforts %}<tr><td>{{ e.label }}{% if e.label in pr_labels %} <span class="tag pr">PR</span>{% endif %}</td><td class="r">{{ e.time|duration }}</td><td class="r">{{ e.pace|pace }} /km</td></tr>{% endfor %}</table></div>{% endif %}
    {% if curve %}<div class="card"><h2>Best power</h2><table>
      {% for c in curve %}<tr><td>{{ c.label }}</td><td class="r">{{ c.watts|num:0 }} W</td></tr>{% endfor %}</table></div>{% endif %}
    {% if laps %}<div class="card"><h2>Device laps</h2><table><tr><th>#</th><th class="r">Dist</th><th class="r">Time</th>{% if a.sport == "run" %}<th class="r">Pace</th>{% endif %}<th class="r">HR</th></tr>
      {% for l in laps %}<tr><td>{{ l.index }}</td><td class="r">{{ l.distance|km:2 }} km</td><td class="r">{{ l.elapsed|duration }}</td>{% if a.sport == "run" %}<td class="r">{{ l.pace|pace }}</td>{% endif %}<td class="r">{{ l.avg_hr|num:0 }}</td></tr>{% endfor %}</table></div>{% endif %}
  </div>
</div>
<div class="card"><form method="post" class="row-actions">{% csrf_token %}
  <input name="name" value="{{ a.name }}" aria-label="Name">
  <select name="gear" aria-label="Gear"><option value="">No gear</option>{% for g in gear_options %}<option value="{{ g.pk }}" {% if g.pk == a.gear_id %}selected{% endif %}>{{ g.name }}</option>{% endfor %}</select>
  <button>Save</button></form>
  <form method="post" action="{% url 'activity_delete' a.pk %}" onsubmit="return confirm('Delete this activity?')" style="margin-top:10px">{% csrf_token %}<button class="danger">Delete activity</button></form></div>
{% endblock %}