{% extends "base.html" %}
{% block title %}{% if vehicule %}Modifier{% else %}Nouveau{% endif %} véhicule — GarageManager{% endblock %}
{% block content %}

<a href="/vehicules" class="back-link"><i class="fas fa-arrow-left"></i> Retour aux véhicules</a>

<div class="page-header">
    <h1 class="page-title">
        <i class="fas fa-{% if vehicule %}edit{% else %}plus-circle{% endif %} text-electric" style="margin-right:0.5rem"></i>
        {% if vehicule %}Modifier le véhicule{% else %}Nouveau véhicule{% endif %}
    </h1>
</div>

<div class="card" style="max-width:640px">
    <form method="post" class="space" style="display:flex;flex-direction:column;gap:1.25rem">

        <div>
            <label>Immatriculation *</label>
            <input name="immatriculation" value="{{ vehicule.immatriculation if vehicule else '' }}" required placeholder="AB-123-CD" style="text-transform:uppercase;font-family:'JetBrains Mono',monospace;font-size:1rem;letter-spacing:0.05em">
        </div>

        <div class="grid grid-2">
            <div>
                <label>Marque *</label>
                <input name="marque" value="{{ vehicule.marque if vehicule else '' }}" required placeholder="Renault, Peugeot…">
            </div>
            <div>
                <label>Modèle *</label>
                <input name="modele" value="{{ vehicule.modele if vehicule else '' }}" required placeholder="Clio, 308…">
            </div>
        </div>

        <div class="grid grid-2">
            <div>
                <label>Année</label>
                <input name="annee" type="number" value="{{ vehicule.annee if vehicule else '' }}" min="1900" max="2030" placeholder="2019">
            </div>
            <div>
                <label>Kilométrage (km)</label>
                <input name="kilometrage" type="number" value="{{ vehicule.kilometrage if vehicule else '' }}" placeholder="85000">
            </div>
        </div>

        <div>
            <label>VIN (numéro de châssis)</label>
            <input name="vin" value="{{ vehicule.vin if vehicule else '' }}" placeholder="17 caractères" maxlength="17" style="text-transform:uppercase;font-family:'JetBrains Mono',monospace;letter-spacing:0.08em">
            <span class="text-xs text-muted" style="margin-top:0.3rem;display:block">Format : 17 caractères alphanumériques</span>
        </div>

        <div style="display:flex;gap:0.75rem;padding-top:0.5rem;border-top:1px solid var(--border)">
            <button type="submit" class="btn-primary">
                <i class="fas fa-save"></i> Enregistrer
            </button>
            <a href="/vehicules" class="btn-secondary">Annuler</a>
        </div>
    </form>
</div>

{% endblock %}