{% extends "base.html" %}
{% block content %}
<div style="max-width:720px;">
  <h1>📒 What's New</h1>
  <p style="color:#7A6E68;margin-bottom:1.25rem;">Current version: <strong>v{{ app_version }}</strong></p>

  {% for rel in changelog %}
  <div style="border:1px solid #EDE8E2;border-radius:10px;padding:1rem 1.25rem;margin-bottom:1rem;">
    <div style="display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;">
      <h2 style="margin:0;font-size:1.1rem;">v{{ rel.version }}</h2>
      <span style="color:#B0A89E;font-size:.85rem;">{{ rel.date }}{% if rel.title %} · {{ rel.title }}{% endif %}</span>
    </div>
    <ul style="margin:.6rem 0 0;padding-left:1.2rem;">
      {% for c in rel.changes %}<li style="margin:.3rem 0;">{{ c }}</li>{% endfor %}
    </ul>
  </div>
  {% endfor %}
</div>
{% endblock %}