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

<!-- En-tête date -->
<div class="mb-5">
  <p class="font-display text-2xl font-semibold" style="color:var(--ink); letter-spacing:-0.01em;">
    {{ today | date_fr }}
  </p>
</div>

<!-- Carte aujourd'hui -->
<div class="card card-amber">
  <p class="card-label">Aujourd'hui</p>
  {% if today_entry %}
    <div class="flex items-baseline gap-3">
      <span class="stat-number">{{ today_entry.total_hours_str() }}</span>
      <span class="stat-sub">travaillées</span>
    </div>
    <div class="flex items-center justify-between mt-3">
      <span class="text-xs font-semibold px-2 py-0.5 rounded" style="background:var(--parchment); color:#6A6258; letter-spacing:0.06em;">
        {{ today_entry.day_type | day_type_fr }}{% if today_entry.motor_vehicle_id %} · {{ today_entry.motor_vehicle_id }}{% endif %}
      </span>
      <a href="/entries/{{ today_entry.id }}/edit"
         class="text-xs font-semibold" style="color:var(--amber);">Modifier →</a>
    </div>
    {% if today_entry.comment %}
    <p class="mt-2 text-xs italic" style="color:#9A9288;">{{ today_entry.comment }}</p>
    {% endif %}
  {% else %}
    <a href="/entries/new" class="btn-primary btn-amber mt-1" style="letter-spacing:0.06em;">
      + Saisir ma journée
    </a>
  {% endif %}
</div>

<!-- Carte semaine -->
<div class="card card-ink">
  <p class="card-label">Semaine en cours</p>
  <div class="flex items-end justify-between">
    <div>
      <span class="stat-number">{{ week_actual_str }}</span>
      <p class="stat-sub mt-1">objectif 38h45</p>
    </div>
    <span class="balance-badge {% if week_balance >= 0 %}balance-pos{% else %}balance-neg{% endif %}">
      {{ '+' if week_balance >= 0 else '−' }}{{ week_balance_str }}
    </span>
  </div>
</div>

<!-- Carte mois -->
{% if month_km %}
<div class="card card-mist">
  <p class="card-label">Ce mois — déplacements</p>
  <div class="space-y-2 mt-1">
    {% for vehicle_id, km in month_km.items() %}
    <div class="flex items-baseline justify-between">
      <span class="text-xs" style="color:#8A8278;">{{ vehicles[vehicle_id].name if vehicle_id in vehicles else vehicle_id | capitalize }}</span>
      <span class="font-data font-semibold text-sm" style="color:var(--ink);">{{ km }} <span class="font-normal text-xs" style="color:#9A9288;">km</span></span>
    </div>
    {% endfor %}
    <div class="flex items-baseline justify-between pt-1" style="border-top:1px solid var(--parchment);">
      <span class="text-xs" style="color:#8A8278;">CO₂</span>
      <span class="font-data font-semibold text-sm" style="color:var(--ink);">{{ month_co2_kg }} <span class="font-normal text-xs" style="color:#9A9288;">kg</span></span>
    </div>
  </div>
</div>
{% endif %}

<!-- Carte congés / RTT -->
<div class="card card-sage">
  <p class="card-label">Solde congés &amp; RTT</p>
  <div class="space-y-3 mt-1">
    <div>
      <div class="flex justify-between items-baseline">
        <span class="text-xs font-semibold" style="color:#8A8278; letter-spacing:0.06em;">CONGÉS</span>
        <span class="font-data text-sm font-semibold" style="color:var(--ink);">
          {{ used.conges }}<span class="font-normal text-xs" style="color:#9A9288;"> / {{ balance.conges_total }} j</span>
        </span>
      </div>
      <div class="progress-track">
        <div class="progress-fill" style="width:{{ [[used.conges / balance.conges_total * 100, 100] | min, 0] | max }}%; background:var(--sage);"></div>
      </div>
    </div>
    <div>
      <div class="flex justify-between items-baseline">
        <span class="text-xs font-semibold" style="color:#8A8278; letter-spacing:0.06em;">RTT</span>
        <span class="font-data text-sm font-semibold" style="color:var(--ink);">
          {{ used.rtt }}<span class="font-normal text-xs" style="color:#9A9288;"> / {{ balance.rtt_total }} j</span>
        </span>
      </div>
      <div class="progress-track">
        <div class="progress-fill" style="width:{{ [[used.rtt / balance.rtt_total * 100, 100] | min, 0] | max }}%; background:var(--amber);"></div>
      </div>
    </div>
  </div>
</div>

{% endblock %}