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

<div class="flex items-baseline justify-between mb-5">
  <p class="font-display text-2xl font-semibold" style="color:var(--ink);">Historique</p>
  <a href="/entries/new" class="text-xs font-semibold" style="color:var(--amber); letter-spacing:0.05em;">+ Saisir</a>
</div>

{% if not entries %}
  <div class="card card-mist text-center py-8">
    <p style="color:#9A9288; font-size:0.875rem;">Aucune entrée pour le moment.</p>
  </div>
{% endif %}

<div class="space-y-2">
{% for entry in entries %}

{% set dot_color =
  '#4A7A54' if entry.day_type == 'WORK' else
  '#3A6AAA' if entry.day_type == 'TT' else
  '#C8842A' if entry.day_type in ('GARDE', 'ASTREINTE') else
  '#7A4AAA' if entry.day_type in ('RTT', 'FORMATION') else
  '#B85035' if entry.day_type == 'MALADE' else
  '#8A8278'
%}

<div class="card" style="border-left-color: {{ dot_color }}; padding: 0.75rem 1rem;">
  <div class="flex items-start justify-between gap-2">
    <div class="flex-1 min-w-0">
      <p class="font-semibold text-sm" style="color:var(--ink);">{{ entry.date | date_fr }}</p>
      <div class="flex items-center gap-2 mt-0.5">
        <span class="text-xs font-semibold" style="color:{{ dot_color }}; letter-spacing:0.06em;">{{ entry.day_type }}</span>
        {% if entry.time_slots %}
        <span class="font-data text-xs" style="color:#8A8278;">{{ entry.total_hours_str() }}</span>
        {% endif %}
        {% if entry.motor_vehicle_id %}
        <span class="text-xs" style="color:#9A9288;">· {{ entry.motor_vehicle_id }}</span>
        {% elif entry.journey_profile_id %}
        <span class="text-xs" style="color:#9A9288;">· {{ entry.journey_profile_id }}</span>
        {% endif %}
      </div>
      {% if entry.comment %}
      <p class="text-xs italic mt-1 truncate" style="color:#9A9288;">{{ entry.comment }}</p>
      {% endif %}
    </div>
    <div class="flex items-center gap-3 flex-shrink-0">
      <a href="/entries/{{ entry.id }}/edit"
         class="text-xs font-semibold" style="color:var(--amber);">Éditer</a>
      <form method="POST" action="/entries/{{ entry.id }}/delete"
            onsubmit="return confirm('Supprimer cette entrée ?')">
        <button class="text-xs" style="color:var(--mist);"
                onmouseover="this.style.color='var(--rust)'" onmouseout="this.style.color='var(--mist)'">✕</button>
      </form>
    </div>
  </div>
</div>
{% endfor %}
</div>

{% endblock %}