{% extends "base.html" %}
{% block title %}Tableau de bord{% endblock %}
{% block content %}

<div class="bg-white rounded-xl shadow p-4 mb-4">
  <h2 class="font-semibold text-gray-700 mb-2">
    Aujourd'hui — {{ today.strftime('%A %d %B %Y') }}
  </h2>
  {% if today_entry %}
    <p class="text-green-700 font-medium">{{ today_entry.day_type }} — {{ today_entry.total_hours_str() }}</p>
    <a href="/entries/{{ today_entry.id }}/edit"
       class="mt-2 inline-block text-sm text-blue-600 hover:underline">Modifier</a>
  {% else %}
    <a href="/entries/new"
       class="block w-full text-center bg-blue-600 text-white py-3 rounded-lg font-semibold text-lg hover:bg-blue-700 active:bg-blue-800 transition">
      + Saisir ma journée
    </a>
  {% endif %}
</div>

<div class="bg-white rounded-xl shadow p-4 mb-4">
  <h2 class="font-semibold text-gray-700 mb-3">Semaine courante</h2>
  <div class="flex justify-between items-center">
    <span class="text-gray-600">Total</span>
    <span class="font-bold text-xl">{{ week_actual_str }}</span>
  </div>
  <div class="flex justify-between items-center mt-1">
    <span class="text-gray-600">Écart vs 38h45</span>
    <span class="font-medium {% if week_balance >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
      {{ '+' if week_balance >= 0 else '-' }}{{ week_balance_str }}
    </span>
  </div>
</div>

<div class="bg-white rounded-xl shadow p-4 mb-4">
  <h2 class="font-semibold text-gray-700 mb-3">Ce mois</h2>
  {% for vehicle_id, km in month_km.items() %}
  <div class="flex justify-between text-sm text-gray-600 mb-1">
    <span>{{ vehicle_id | capitalize }}</span>
    <span>{{ km }} km</span>
  </div>
  {% endfor %}
  <div class="flex justify-between text-sm text-gray-600 mt-2">
    <span>CO₂</span>
    <span>{{ month_co2_kg }} kg</span>
  </div>
</div>

<div class="bg-white rounded-xl shadow p-4">
  <h2 class="font-semibold text-gray-700 mb-3">Congés / RTT</h2>
  <div class="mb-3">
    <div class="flex justify-between text-sm mb-1">
      <span>Congés</span>
      <span>{{ used.conges }} / {{ balance.conges_total }} j</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2">
      <div class="bg-blue-500 h-2 rounded-full"
           style="width: {{ [[used.conges / balance.conges_total * 100, 100] | min, 0] | max }}%"></div>
    </div>
  </div>
  <div>
    <div class="flex justify-between text-sm mb-1">
      <span>RTT</span>
      <span>{{ used.rtt }} / {{ balance.rtt_total }} j</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2">
      <div class="bg-purple-500 h-2 rounded-full"
           style="width: {{ [[used.rtt / balance.rtt_total * 100, 100] | min, 0] | max }}%"></div>
    </div>
  </div>
</div>

{% endblock %}