{% extends "base.html" %}
{% block title %}Goals · Superior Finance{% endblock %}
{% block content %}
  <h1>Goals</h1>
  {% if not goals %}
    <p class="empty">No goals yet. <a href="{{ url_for('new_goal') }}">Create your first goal</a>.</p>
  {% else %}
    {% for goal in goals %}
      <div class="card">
        <h2><a href="{{ url_for('view_goal', slug=goal.slug) }}">{{ goal.title }}</a></h2>
        <p class="muted">{{ goal.description }}</p>
        <div class="meter-label">
          <span>${{ goal.saved_amount }} of ${{ goal.goal_amount }}</span>
          <span>{{ goal.progress_percent }}%</span>
        </div>
        <div class="meter">
          <div class="meter-fill {% if goal.completed %}complete{% endif %}" style="width: {{ goal.progress_percent }}%"></div>
        </div>
      </div>
    {% endfor %}
  {% endif %}
{% endblock %}