{% extends 'base.html.twig' %}
{% import '_form_macros.html.twig' as f %}
{% block title %}Transferts{% endblock %}
{% block breadcrumb %}
<i class="ti ti-chevron-right text-[10px] text-line mx-1 shrink-0"></i>
<a href="{{ path('app_balance') }}" class="hover:text-ink transition-colors shrink-0">Équilibre</a>
<i class="ti ti-chevron-right text-[10px] text-line mx-1 shrink-0"></i>
<span class="text-ink font-medium">Transferts</span>
{% endblock %}
{% block body %}
{% include 'balance/_tabs.html.twig' %}
{{ form_start(form, {attr: {novalidate: 'novalidate', class: 'rounded-2xl bg-surface border border-line p-5 mb-4'}}) }}
{{ f.errors_summary(form) }}
{{ f.section(editing ? 'Modifier le transfert' : 'Nouveau transfert', "Un mouvement d'argent réel entre vous : remboursement, virement d'équilibrage…") }}
<div class="grid gap-4 sm:grid-cols-2 mt-3">
    {{ f.field(form.fromProfile) }}
    {{ f.field(form.toProfile) }}
    {{ f.field(form.amount) }}
    {{ f.field(form.date) }}
    {{ f.field(form.label, 2) }}
    {{ f.field(form.expense, 2) }}
</div>
{{ f.actions(path('app_balance_transfers'), editing ? 'Enregistrer' : 'Ajouter') }}
{{ form_end(form) }}

<div class="rounded-2xl bg-surface border border-line overflow-hidden">
  <table class="data-table text-sm w-full">
    <thead>
      <tr class="border-b border-line">
        <th class="text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-24">Date</th>
        <th class="text-left text-xs font-medium text-muted py-2 px-3 md:px-4 md:w-72">Motif</th>
        <th class="hidden md:table-cell text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-56">Mouvement</th>
        <th class="text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-28">Montant</th>
        <th class="hidden md:table-cell" aria-hidden="true"></th>
        <th class="w-20" aria-hidden="true"></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-line">
      {% for t in transfers %}
      <tr class="{{ editing and editing.id == t.id ? 'bg-surface-2' : 'hover:bg-surface-2' }} transition-colors">
        <td class="py-2.5 px-3 md:px-4 text-sm text-muted whitespace-nowrap">{{ t.date ? t.date|date('d/m/Y') : '—' }}</td>
        <td class="py-2.5 px-3 md:px-4 min-w-0">
          <span class="block text-sm font-medium truncate">{{ t.label }}</span>
          {% if t.expense %}<a href="{{ path('app_expense_show', {id: t.expense.id}) }}" class="block text-xs text-muted truncate hover:text-ink transition-colors"><i class="ti ti-link text-[10px]"></i> {{ t.expense.description }}</a>{% endif %}
          <span class="md:hidden block text-xs text-muted truncate">de {{ t.fromProfile.name }} vers {{ t.toProfile.name }}</span>
        </td>
        <td class="hidden md:table-cell py-2.5 px-3 md:px-4 cell-truncate text-sm text-muted">de {{ t.fromProfile.name }} vers {{ t.toProfile.name }}</td>
        <td class="py-2.5 px-3 md:px-4 amount text-sm font-medium whitespace-nowrap">{{ t.amount|number_format(2, ',', ' ') }} €</td>
        <td class="hidden md:table-cell" aria-hidden="true"></td>
        <td class="py-2.5 px-3 md:px-4">
          <span class="flex items-center justify-end gap-2">
            <a href="{{ path('app_transfer_edit', {id: t.id}) }}" class="text-muted hover:text-ink transition-colors" aria-label="Modifier"><i class="ti ti-pencil text-sm"></i></a>
            <form method="post" action="{{ path('app_transfer_delete', {id: t.id}) }}" onsubmit="return confirm('Supprimer ce transfert ?')">
              <input type="hidden" name="_token" value="{{ csrf_token('del' ~ t.id) }}">
              <button class="text-muted hover:text-danger transition-colors" aria-label="Supprimer"><i class="ti ti-x text-sm"></i></button>
            </form>
          </span>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="6" class="py-3 px-3 md:px-4 text-sm text-muted">Aucun transfert pour l'instant.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}