{% extends 'base.html.twig' %}
{% block title %}Réglages{% endblock %}
{% block breadcrumb %}
<i class="ti ti-chevron-right text-[10px] text-line mx-1 shrink-0"></i>
<span class="font-medium text-ink">Réglages</span>
{% endblock %}
{% block body %}
{{ include('settings/_tabs.html.twig') }}
<div class="card p-4 mb-3">
  <div class="font-medium text-sm mb-3">Projet</div>
  {{ form_start(form) }}
  <div class="space-y-3">
    {{ form_row(form.projectName) }}
    <button class="w-full rounded-xl bg-accent text-on-accent py-2.5 text-sm">Enregistrer</button>
  </div>
  {{ form_end(form) }}
</div>

{% if active_profile is defined and active_profile %}
<div class="card p-4 mb-3">
  <div class="font-medium text-sm">Profil de saisie</div>
  <p class="text-xs text-muted mt-1 mb-3">Pré-remplit « payé par » quand tu enregistres une dépense. Tu peux toujours le changer dans le formulaire.</p>
  <div class="flex gap-2">
    {% for p in profiles %}
      <a href="{{ path('app_profile_switch', {id: p.id}) }}"
         class="flex-1 text-center rounded-xl py-2 text-sm {{ active_profile.id == p.id ? 'bg-accent text-on-accent' : 'bg-surface-2 text-muted' }}">{{ p.name }}</a>
    {% endfor %}
  </div>
</div>
{% endif %}

<div class="card p-4 mb-3">
  <div class="font-medium text-sm">Apparence</div>
  <div class="flex items-center justify-between mt-2">
    <span class="text-sm text-muted">Thème clair / sombre</span>
    <button type="button" data-theme-toggle aria-label="Basculer le thème"
            class="inline-flex items-center gap-2 rounded-xl bg-surface-2 px-3 py-2 text-sm">
      <i data-theme-icon class="ti ti-moon text-lg"></i> Basculer
    </button>
  </div>
  <p class="text-xs text-muted mt-2">Suit ton système par défaut ; ton choix est mémorisé sur cet appareil.</p>
</div>

<a href="{{ path('app_logout') }}" class="block text-center rounded-xl bg-danger-soft text-danger-ink py-2.5 text-sm">Se déconnecter</a>
{% endblock %}