{% extends 'base.html' %}
{% from 'components/page_header.html' import render_page_header %}
{% from 'components/empty_state.html' import render_empty_state %}
{% from 'components/confirm_modal.html' import render_confirm_modal, render_confirm_trigger %}

{% block title %}Paydown Planner — Financials{% endblock %}

{% block content %}
{{ render_page_header('Paydown Planner',
    'Track your credit card debt payoff strategies.',
    'Add Credit Card',
    url_for('paydown.create_card')) }}

{% if active_plan %}
  <div style="padding: 12px 16px; background: #eafaf1; border: 1px solid #1a7f37;
              border-radius: 6px; margin-bottom: 20px; font-size: 14px;">
    Active plan: <strong>{{ active_plan.strategy | replace('_', ' ') | title }}</strong>
    · Extra payment: ${{ '%.2f'|format(active_plan.extra_monthly|float) }}/mo
    &nbsp;·&nbsp;
    <a href="{{ url_for('paydown.monitor') }}" style="color: #0969da; text-decoration: none;">
      View Monitor →
    </a>
  </div>
{% endif %}

{% if not cards %}
  {{ render_empty_state(
      'No credit cards yet',
      'Add your credit cards to start planning your debt payoff.',
      'Add Credit Card',
      url_for('paydown.create_card')
  ) }}
{% else %}
  <div style="margin-bottom: 20px;">
    <a href="{{ url_for('paydown.compare') }}"
       style="display: inline-block; padding: 8px 20px; background: #0969da; color: #fff;
              text-decoration: none; border-radius: 6px; font-weight: 500; font-size: 14px;">
      Compare Strategies →
    </a>
    <a href="{{ url_for('paydown.extra_payment') }}"
       style="margin-left: 12px; font-size: 13px; color: #0969da; text-decoration: none;">
      {% if extra %}Set extra payment (${{ '%.2f'|format(extra|float) }}/mo){% else %}Set extra monthly payment{% endif %}
    </a>
  </div>

  <div style="max-width: 720px;">
    {% for card in cards %}
      <div style="padding: 14px 16px; border: 1px solid #d0d7de; border-radius: 6px;
                  background: #fff; margin-bottom: 10px;">
        <div style="display: flex; justify-content: space-between; align-items: flex-start;">
          <div>
            <div style="font-weight: 600; font-size: 15px; color: #1f2328; margin-bottom: 4px;">
              {{ card.name }}
              {% if card.institution_name %}
                <span style="font-size: 12px; color: #636c76; font-weight: 400;">
                  ({{ card.institution_name }})
                </span>
              {% endif %}
            </div>
            <div style="font-size: 13px; color: #636c76;">
              Balance: ${{ '%.2f'|format(card.current_balance|float) }}
              · APR: {{ card.apr }}%
              · Min: ${{ '%.2f'|format(card.min_payment|float) }}
              {% if card.credit_limit %}
                · Limit: ${{ '%.2f'|format(card.credit_limit|float) }}
              {% endif %}
            </div>
          </div>
          <a href="{{ url_for('paydown.edit_card', card_id=card.id) }}"
             style="font-size: 13px; color: #0969da; text-decoration: none; flex-shrink: 0;">
            Edit
          </a>
        </div>
      </div>
    {% endfor %}
  </div>
{% endif %}
{% endblock %}