{% extends "base.html" %}
{% block title %}{{ babystep.title }} · Superior Finance{% endblock %}
{% block content %}
  <h1>{{ babystep.title }}</h1>
  <p class="muted">{{ babystep.description }}</p>
  <p class="muted">Toward goal: <a href="{{ url_for('view_goal', slug=babystep.goal.slug) }}">{{ babystep.goal.title }}</a></p>

  <div class="card">
    <div class="meter-label">
      <span>${{ babystep.saved_amount }} of ${{ babystep.monthly_amount }} / mo</span>
      <span>{{ babystep.progress_percent }}%</span>
    </div>
    <div class="meter">
      <div class="meter-fill {% if babystep.completed %}complete{% endif %}" style="width: {{ babystep.progress_percent }}%"></div>
    </div>
  </div>

  <h2 style="margin-top:2rem;">Payments applied here</h2>
  <p><a href="{{ url_for('new_payment') }}">+ Add a payment</a></p>
  {% if not babystep.payments %}
    <p class="empty">No payments logged yet.</p>
  {% else %}
    <ul class="plain">
      {% for payment in babystep.payments|sort(attribute='id', reverse=True) %}
        <li>{{ payment.description }} — ${{ payment.amount }} <span class="muted">({{ payment.received_at }})</span></li>
      {% endfor %}
    </ul>
  {% endif %}
{% endblock %}