{% extends "base.html" %}
{% block title %}Babysteps · Superior Finance{% endblock %}
{% block content %}
  <h1>Babysteps</h1>
  {% if not babysteps %}
    <p class="empty">No babysteps yet. <a href="{{ url_for('new_babystep') }}">Add one</a>.</p>
  {% else %}
    {% for step in babysteps %}
      <div class="card">
        <h2><a href="{{ url_for('view_babystep', slug=step.slug) }}">{{ step.title }}</a></h2>
        <p class="muted">Toward <a href="{{ url_for('view_goal', slug=step.goal.slug) }}">{{ step.goal.title }}</a></p>
        <div class="meter-label">
          <span>${{ step.saved_amount }} of ${{ step.monthly_amount }} / mo</span>
          <span>{{ step.progress_percent }}%</span>
        </div>
        <div class="meter">
          <div class="meter-fill {% if step.completed %}complete{% endif %}" style="width: {{ step.progress_percent }}%"></div>
        </div>
      </div>
    {% endfor %}
  {% endif %}
{% endblock %}