{% extends 'base.html.twig' %}
{% block title %}Abonnements{% endblock %}
{% block breadcrumb %}
<i class="ti ti-chevron-right text-[10px] text-line mx-1 shrink-0"></i>
<a href="{{ path('app_expense_index') }}" class="hover:text-ink transition-colors shrink-0">Dépenses</a>
<i class="ti ti-chevron-right text-[10px] text-line mx-1 shrink-0"></i>
<span class="font-medium text-ink">Abonnements</span>
{% endblock %}
{% block body %}
<div class="text-xs text-muted mb-3">Total mensuel : <span class="amount font-medium text-ink">{{ total_monthly|number_format(2, ',', ' ') }} €</span></div>
<div class="divide-y divide-line rounded-xl bg-surface border border-line overflow-hidden">
  {% for s in subscriptions %}
  <div class="flex items-center gap-4 md:gap-5 px-4 md:px-5 py-2.5 hover:bg-surface-2 transition-colors {{ s.active ? '' : 'opacity-50' }}">
    <a href="{{ path('app_subscription_edit', {id: s.id}) }}" class="list-row-label text-sm font-medium hover:underline">{{ s.label }}</a>
    <span class="flex-1" aria-hidden="true"></span>
    <span class="text-xs text-muted shrink-0">{{ s.frequency.label }}</span>
    <span class="text-xs text-muted shrink-0">{{ s.paidBy ? s.paidBy.name : '' }}</span>
    <span class="amount text-sm font-medium whitespace-nowrap shrink-0">{{ s.amount|number_format(2, ',', ' ') }} €</span>
    <a href="{{ path('app_expense_new', {prefillLabel: s.label, prefillAmount: s.amount, prefillCategory: 'Abonnement'}) }}"
       class="text-xs text-accent hover:underline shrink-0" title="Enregistrer une échéance de cet abonnement">+ échéance</a>
  </div>
  {% else %}
  <div class="px-4 py-3 text-sm text-muted">Aucun abonnement.</div>
  {% endfor %}
</div>
{% endblock %}