{% extends "base.html" %}
{% block title %}{{ client.nom }} {{ client.prenom }} — GarageManager{% endblock %}
{% block content %}

<a href="/clients" class="back-link"><i class="fas fa-arrow-left"></i> Retour aux clients</a>

<!-- Header -->
<div class="flex justify-between items-start mb-8">
    <div>
        <h1 class="page-title">{{ client.nom }} {{ client.prenom }}</h1>
        <div class="flex gap-4 mt-2" style="flex-wrap:wrap">
            {% if client.telephone %}
            <span class="text-sm text-secondary"><i class="fas fa-phone mr-1 text-electric"></i>{{ client.telephone }}</span>
            {% endif %}
            {% if client.email %}
            <span class="text-sm text-secondary"><i class="fas fa-envelope mr-1 text-electric"></i>{{ client.email }}</span>
            {% endif %}
            {% if client.adresse %}
            <span class="text-sm text-secondary"><i class="fas fa-map-marker-alt mr-1 text-electric"></i>{{ client.adresse }}</span>
            {% endif %}
        </div>
    </div>
    <div class="flex gap-2">
        <a href="/clients/{{ client.id }}/edit" class="btn-secondary btn-sm">
            <i class="fas fa-edit"></i> Modifier
        </a>
        <form method="post" action="/clients/{{ client.id }}/delete" onsubmit="return confirm('Supprimer ce client et tous ses véhicules ?')">
            <button class="btn-danger btn-sm">
                <i class="fas fa-trash"></i> Supprimer
            </button>
        </form>
    </div>
</div>

<!-- Véhicules du client -->
<div class="card" style="padding:0">
    <div class="card-header">
        <span class="card-title">
            <i class="fas fa-car text-electric" style="margin-right:0.4rem"></i>
            Véhicules
            <span class="badge badge-info ml-2">{{ vehicules|length }}</span>
        </span>
        <a href="/vehicules/new" class="btn-primary btn-sm">
            <i class="fas fa-plus"></i> Ajouter
        </a>
    </div>

    {% if vehicules %}
    <div>
        {% for v in vehicules %}
        <div style="padding:1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;transition:background 0.15s" onmouseover="this.style.background='rgba(0,212,255,0.03)'" onmouseout="this.style.background=''">
            <div>
                <span class="font-semibold mono" style="color:var(--accent-electric)">{{ v.immatriculation }}</span>
                <span class="text-secondary ml-2">{{ v.marque }} {{ v.modele }}</span>
                {% if v.annee %}<span class="text-muted text-xs ml-2">({{ v.annee }})</span>{% endif %}
                {% if v.kilometrage %}<span class="text-muted text-xs ml-2 mono">— {{ v.kilometrage }} km</span>{% endif %}
            </div>
            <div class="flex items-center gap-3">
                <span class="badge badge-info">{{ v.nb_interventions }} intervention(s)</span>
                <a href="/vehicules/{{ v.id }}" class="link-action text-sm">Voir →</a>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <i class="fas fa-car"></i>
        <p>Aucun véhicule enregistré pour ce client</p>
        <a href="/vehicules/new" class="link-action">Ajouter un véhicule →</a>
    </div>
    {% endif %}
</div>

{% endblock %}