{% extends 'base_app.html.twig' %}

{% block title %}Candidat - {{ candidate.firstName }} {{ candidate.lastName }}{% endblock %}

{% block body %}
<div class="max-w-3xl mx-auto p-8">
    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-2xl font-bold text-slate-900">Détails du candidat</h1>
        <a href="{{ path('app_candidate_index') }}" class="text-sm text-slate-600 hover:text-slate-900 flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
            Retour
        </a>
    </div>

    <div class="bg-white shadow overflow-hidden sm:rounded-lg border border-slate-200">
        <div class="px-4 py-5 sm:px-6">
            <h3 class="text-lg leading-6 font-medium text-slate-900">Informations personnelles</h3>
            <p class="mt-1 max-w-2xl text-sm text-slate-500">Détails et matching.</p>
        </div>
        <div class="border-t border-slate-200">
            <dl>
                <div class="bg-slate-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-slate-500">Nom complet</dt>
                    <dd class="mt-1 text-sm text-slate-900 sm:mt-0 sm:col-span-2">{{ candidate.firstName }} {{ candidate.lastName }}</dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-slate-500">Poste recherché</dt>
                    <dd class="mt-1 text-sm text-slate-900 sm:mt-0 sm:col-span-2">{{ candidate.jobTitle }}</dd>
                </div>
                <div class="bg-slate-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-slate-500">Statut</dt>
                    <dd class="mt-1 text-sm text-slate-900 sm:mt-0 sm:col-span-2">
                        <span class="inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800">
                            {{ candidate.status }}
                        </span>
                    </dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-slate-500">Score de matching</dt>
                    <dd class="mt-1 text-sm text-slate-900 sm:mt-0 sm:col-span-2">{{ candidate.matchingScore }}%</dd>
                </div>
            </dl>
        </div>
    </div>
</div>
{% endblock %}