{% extends "base.html" %}
{% set HELP = "https://help.backupwatch.app" %}
{% block title %}What's changed — BackupWatch{% endblock %}
{% block content %}
<style>
  .cg-head { margin-bottom:22px; }
  .cg-head .eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:#7c8ba3; }
  .cg-head h1 { margin:6px 0 8px; font-size:31px; font-weight:700; letter-spacing:-.02em; color:#182a4a; }
  .cg-head p { margin:0; font-size:14.5px; color:#4a5c78; }
  .cg-rel { background:#fff; border:1px solid #e6ebf3; border-radius:14px; padding:22px 26px;
    margin-bottom:16px; box-shadow:0 1px 2px rgba(24,42,74,.04); }
  .cg-rel .v { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
  .cg-rel h2 { margin:0; font-size:20px; font-weight:700; color:#182a4a; }
  .cg-rel .when { font-family:var(--mono); font-size:12px; color:#8595ad; }
  .cg-rel .now { font-size:11.5px; font-weight:600; letter-spacing:.04em; color:#0d7a3d;
    background:#e3f4ea; border-radius:999px; padding:3px 10px; }
  .cg-sec { margin-top:16px; }
  .cg-sec h3 { margin:0 0 7px; font-family:var(--mono); font-size:11px; font-weight:600;
    letter-spacing:.09em; color:#5c6b84; text-transform:uppercase; }
  .cg-sec ul { margin:0; padding-left:20px; }
  .cg-sec li { font-size:14px; line-height:1.65; color:#22304a; margin-bottom:6px; }
  .cg-sec li code { font-family:var(--mono); font-size:12.5px; background:#f2f5fa;
    border-radius:5px; padding:1px 5px; }
  .cg-empty { background:#fff; border:1px solid #e6ebf3; border-radius:14px; padding:26px;
    font-size:14.5px; color:#4a5c78; }
</style>

<div class="cg-head">
  <div class="eyebrow">RELEASE NOTES</div>
  <h1>What's changed</h1>
  <p>Every BackupWatch release, newest first. You're running <strong>v{{ APP_VERSION }}</strong>.
     <a href="/help">Back to Help</a></p>
</div>

{% for r in releases %}
<div class="cg-rel">
  <div class="v">
    <h2>{{ r.version }}</h2>
    {% if r.date %}<span class="when">{{ r.date }}</span>{% endif %}
    {% if r.version == APP_VERSION %}<span class="now">You're on this version</span>{% endif %}
  </div>
  {% for s in r.sections %}
  <div class="cg-sec">
    {% if s.title %}<h3>{{ s.title }}</h3>{% endif %}
    <ul>{% for item in s['items'] %}<li>{{ item|md_inline }}</li>{% endfor %}</ul>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="cg-empty">No release notes shipped with this build. The full history is on
  <a href="{{ HELP }}" target="_blank" rel="noopener">help.backupwatch.app</a>.</div>
{% endfor %}
{% endblock %}