{% extends 'layout/app.html.twig' %}

{% block title %}{{ client.fullName }}{% endblock %}
{% block page_title %}{{ client.fullName }}{% endblock %}

{% block page_actions %}
    <a href="{{ path('app_client_index') }}" class="btn btn-secondary">← Clients</a>
    <a href="{{ path('app_client_edit', {id: client.id}) }}" class="btn btn-primary">Modifier</a>
{% endblock %}

{% block content %}
    <div class="grid gap-6 lg:grid-cols-3">
        <section class="card p-6">
            <dl class="space-y-3 text-sm">
                <div class="flex justify-between gap-4"><dt class="text-slate-500">Passeport</dt><dd class="font-mono font-medium">{{ client.passportNumber }}</dd></div>
                <div class="flex justify-between gap-4"><dt class="text-slate-500">Expiration</dt><dd class="font-medium {{ client.passportExpiringSoon ? 'text-red-600' }}">{{ client.passportExpiresAt ? client.passportExpiresAt|date('d/m/Y') : '—' }}</dd></div>
                <div class="flex justify-between gap-4"><dt class="text-slate-500">Téléphone</dt><dd class="font-medium">{{ client.phone }}</dd></div>
                <div class="flex justify-between gap-4"><dt class="text-slate-500">Email</dt><dd class="break-all text-right font-medium">{{ client.email ?: '—' }}</dd></div>
                <div class="flex justify-between gap-4"><dt class="text-slate-500">Naissance</dt><dd class="font-medium">{{ client.birthDate ? client.birthDate|date('d/m/Y') : '—' }}</dd></div>
                <div class="flex justify-between gap-4"><dt class="text-slate-500">Nationalité</dt><dd class="font-medium">{{ client.nationality ?: '—' }}</dd></div>
                <div class="flex justify-between gap-4"><dt class="text-slate-500">Adresse</dt><dd class="text-right font-medium">{{ client.address ?: '—' }}</dd></div>
                <div class="flex justify-between gap-4"><dt class="text-slate-500">Client depuis</dt><dd class="font-medium">{{ client.createdAt|date('d/m/Y') }}</dd></div>
            </dl>
            {% if client.notes %}<p class="mt-4 whitespace-pre-line rounded-lg bg-amber-50 p-3 text-sm text-amber-900">{{ client.notes }}</p>{% endif %}
        </section>

        <section class="card lg:col-span-2">
            <div class="border-b border-slate-100 px-5 py-4"><h2 class="font-semibold text-slate-900">Dossiers ({{ client.dossiers|length }})</h2></div>
            <ul class="divide-y divide-slate-100">
                {% for dossier in client.dossiers %}
                    <li class="flex items-center justify-between gap-4 px-5 py-3 text-sm">
                        <div>
                            <a href="{{ path('app_dossier_show', {id: dossier.id}) }}" class="font-semibold text-brand-700 hover:underline">{{ dossier.reference }}</a>
                            <p class="text-xs text-slate-500">{{ dossier.embassy.name }} · {{ dossier.visaType.label }} · {{ dossier.createdAt|date('d/m/Y') }}</p>
                        </div>
                        <div class="text-right">
                            {{ include('dossier/_status.html.twig') }}
                            {% if dossier.decision %}<p class="mt-1"><span class="badge {{ dossier.decision.badgeClass }}">{{ dossier.decision.label }}</span></p>{% endif %}
                        </div>
                    </li>
                {% else %}
                    <li class="px-5 py-8 text-center text-sm text-slate-500">Aucun dossier.</li>
                {% endfor %}
            </ul>
        </section>
    </div>
{% endblock %}