{% extends "base.html" %}
{% block title %}{{ goal.name }} — History{% endblock %}
{% block page_title %}{{ goal.name }}{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('goals.contribute', id=goal.id) }}" class="btn btn-sm btn-primary" style="font-size:12px;"><i class="bi bi-plus-lg me-1"></i>Add Contribution</a>
{% endblock %}

{% block content %}
<!-- Goal summary -->
<div class="pcard mb-4" style="border-left:4px solid {{ goal.color }};">
    <div class="row align-items-center g-3">
        <div class="col-12 col-md-8">
            <div style="height:10px;background:#f1f5f9;border-radius:5px;overflow:hidden;">
                <div style="height:10px;border-radius:5px;background:{{ goal.color }};width:{{ goal.progress_percent }}%;transition:width .6s;"></div>
            </div>
            <div class="d-flex justify-content-between mt-2">
                <span class="mono" style="font-size:14px;font-weight:600;color:{{ goal.color }};">{{ goal.current_amount | currency }}</span>
                <span class="mono text-muted" style="font-size:13px;">{{ goal.target_amount | currency }}</span>
            </div>
            <small class="text-muted">{{ goal.progress_percent }}% complete</small>
        </div>
        <div class="col-12 col-md-4 text-md-end">
            {% if projection %}
            <div style="font-size:12px;color:var(--muted);">Projected completion</div>
            <div style="font-size:15px;font-weight:600;">{{ projection.strftime('%B %Y') }}</div>
            {% endif %}
            {% if goal.target_date %}
            <div style="font-size:12px;color:var(--muted);">Target: {{ goal.target_date.strftime('%b %d, %Y') }}</div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Contribution history -->
<div class="pcard p-0">
    <div class="d-flex justify-content-between align-items-center px-4 py-3" style="border-bottom:1px solid var(--border);">
        <span class="pcard-title mb-0">Contribution History</span>
        <span class="text-muted" style="font-size:12px;">{{ contribs|length }} contributions</span>
    </div>
    {% if contribs %}
    <table class="pfm-table">
        <thead><tr><th style="padding-left:20px;">Date</th><th>Amount</th><th>Notes</th><th class="text-end" style="padding-right:20px;">Actions</th></tr></thead>
        <tbody>
        {% for c in contribs %}
        <tr>
            <td style="padding-left:20px;font-size:12px;color:var(--muted);">{{ c.date.strftime('%b %d, %Y') }}</td>
            <td><span class="mono text-income" style="font-size:13px;font-weight:500;">+{{ c.amount | currency }}</span></td>
            <td style="font-size:12px;color:var(--muted);">{{ c.notes or '—' }}</td>
            <td class="text-end" style="padding-right:20px;">
                <form method="POST" action="{{ url_for('goals.delete_contribution', id=c.id) }}" onsubmit="return confirm('Remove this contribution?')">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:11px;padding:2px 8px;">Del</button>
                </form>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="text-center py-4">
        <p class="text-muted small mb-0">No contributions yet.</p>
    </div>
    {% endif %}
</div>
{% endblock %}