{% extends "base.html" %}
{% block title %}{{ goal.title }} · Superior Finance{% endblock %}
{% block content %}
  <h1>{{ goal.title }}</h1>
  <p class="muted">{{ goal.description }}</p>

  {% if goal.image_list %}
    <div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1rem;">
      {% for image in goal.image_list %}
        <img src="{{ url_for('static', filename='uploads/' ~ image) }}" alt="" style="width:120px; height:120px; object-fit:cover; border-radius:8px; border:1px solid var(--border);">
      {% endfor %}
    </div>
  {% endif %}

  <div class="card">
    <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>

  <h2 style="margin-top:2rem;">Babysteps toward this goal</h2>
  <p><a href="{{ url_for('new_babystep') }}">+ Add a babystep</a></p>
  {% if not goal.babysteps %}
    <p class="empty">No babysteps yet.</p>
  {% else %}
    {% for step in goal.babysteps %}
      <div class="card">
        <h2><a href="{{ url_for('view_babystep', slug=step.slug) }}">{{ step.title }}</a></h2>
        <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 %}