{% extends "strava/pages/base.html" %}
{% load static %}

{% block title %}Compare{% endblock %}

{% block content %}
<main class="cmp-page" data-screen-label="Compare">

  <div class="cmp-hero">
    <div>
      <p class="cmp-hero-eyebrow">Year over year</p>
      <h1>Compare</h1>
      <p class="cmp-hero-sub">Every season side by side — one metric per row, one year per column.</p>
    </div>
    <div class="cmp-controls">
      <span class="cmp-legend"><span class="swatch"></span> Best year in each row</span>
    </div>
  </div>

  <div id="cmp-body">
    {% include "strava/hx/compare_body.html" %}
  </div>

  {% comment %}
  Centered overlay for an activity's card, opened by clicking an effort-row title.
  The card HTML is fetched lazily from ActivityCardView (the same endpoint the
  dashboard uses) into .act-modal-host.
  {% endcomment %}
  <div id="activity-modal" class="act-modal" data-card-url="{% url 'strava:activity_card' 0 %}" hidden>
    <div class="act-modal-backdrop"></div>
    <div class="act-modal-host"></div>
  </div>

  <footer class="foot" data-screen-label="Footer">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-4.35-9.5-9C1 9 2.5 5 6 5c2 0 3.2 1.2 4 2.5C10.8 6.2 12 5 14 5c3.5 0 5 4 3.5 7-2.5 4.65-9.5 9-9.5 9z"></path></svg>
    Built with django-stravakit
  </footer>
</main>
{% endblock %}

{% block extra_js %}
<script src="{% static 'strava/js/charts.js' %}"></script>
<script src="{% static 'strava/js/compare.js' %}"></script>
{% endblock %}