{% extends "base.html" %}
{% block title %}Rapports{% endblock %}
{% block content %}

<div class="flex items-center justify-between mb-4">
  <h1 class="text-xl font-bold">Rapports {{ year }}</h1>
  <form method="GET">
    <select name="year" onchange="this.form.submit()"
            class="border rounded-lg px-2 py-1 text-sm">
      {% for y in range(2024, year + 2) %}
      <option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>
      {% endfor %}
    </select>
  </form>
</div>

<div class="bg-white rounded-xl shadow p-4 mb-4">
  <h2 class="font-semibold text-gray-700 mb-3">Kilométrage annuel</h2>
  {% for vehicle_id, km in total_km.items() %}
  <div class="flex justify-between py-1 border-b border-gray-100 last:border-0">
    <span class="text-sm text-gray-600">{{ vehicles.get(vehicle_id, {}).get('name', vehicle_id) }}</span>
    <span class="font-medium text-sm">{{ km }} km</span>
  </div>
  {% endfor %}
  <div class="flex justify-between pt-2 mt-1">
    <span class="text-sm text-gray-500">CO₂ total</span>
    <span class="font-medium text-sm">{{ total_co2_kg }} kg</span>
  </div>
</div>

<div class="bg-white rounded-xl shadow p-4 mb-4">
  <h2 class="font-semibold text-gray-700 mb-1">Frais réels (barème {{ year }})</h2>
  <p class="text-xs text-gray-400 mb-3">Déduction fiscale estimée — véhicules motorisés uniquement</p>
  {% for vehicle_id, montant in frais_reels.items() %}
  <div class="flex justify-between py-1 border-b border-gray-100 last:border-0">
    <span class="text-sm text-gray-600">{{ vehicles.get(vehicle_id, {}).get('name', vehicle_id) }}</span>
    <span class="font-bold text-green-700">{{ montant }} €</span>
  </div>
  {% endfor %}
  {% if not frais_reels %}
  <p class="text-sm text-gray-400">Aucune donnée pour {{ year }}.</p>
  {% endif %}
</div>

{% endblock %}