{% extends 'base.html.twig' %}
{% block title %}Lots{% endblock %}
{% block breadcrumb %}
<i class="ti ti-chevron-right text-[10px] text-line mx-1 shrink-0"></i>
<span class="font-medium text-ink">Lots</span>
{% endblock %}
{% block body %}
<table class="data-table text-sm">
  <thead>
    <tr class="border-b border-line">
      <th class="text-left text-xs font-medium text-muted py-2 px-3 md:px-4 md:w-56">Lot</th>
      <th class="hidden md:table-cell text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-48">Avancement</th>
      <th class="text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-28">Engagé</th>
      <th class="hidden md:table-cell" aria-hidden="true"></th>
    </tr>
  </thead>
  <tbody class="divide-y divide-line">
    {% for r in rows %}
    <tr class="hover:bg-surface-2 transition-colors cursor-pointer" onclick="location.href='{{ path('app_lot_show', {id: r.lot.id}) }}'">
      <td class="py-2.5 px-3 md:px-4 cell-truncate">
        <span class="block text-sm font-medium truncate">{{ r.lot.name }}</span>
        <div class="md:hidden h-1 bg-line rounded-full overflow-hidden mt-1.5 w-24">
          <div class="h-full bg-accent rounded-full" style="width: {{ (r.pct * 100)|round }}%"></div>
        </div>
      </td>
      <td class="hidden md:table-cell py-2.5 px-3 md:px-4">
        <div class="flex items-center gap-2">
          <div class="h-1 bg-line rounded-full overflow-hidden w-32">
            <div class="h-full bg-accent rounded-full" style="width: {{ (r.pct * 100)|round }}%"></div>
          </div>
          <span class="text-xs text-muted w-8 text-right shrink-0">{{ (r.pct * 100)|round }} %</span>
        </div>
      </td>
      <td class="py-2.5 px-3 md:px-4 amount text-sm font-medium whitespace-nowrap">{{ r.committed|number_format(0, ',', ' ') }} €</td>
      <td class="hidden md:table-cell" aria-hidden="true"></td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endblock %}