{% extends 'base.html.twig' %}
{% block title %}Intervenants{% endblock %}
{% block breadcrumb %}
<i class="ti ti-chevron-right text-[10px] text-line mx-1 shrink-0"></i>
<span class="font-medium text-ink">Intervenants</span>
{% endblock %}
{% block body %}
<div class="-mt-5">
<div class="sticky top-12 z-10 -mx-6 px-6 py-3 bg-surface/90 backdrop-blur-sm border-b border-line mb-4">
  <form method="get" class="flex flex-wrap gap-2 items-center">
    <input type="hidden" name="sort" value="{{ filters.sort }}">
    <select name="type" class="h-8 px-3 py-0 text-sm bg-surface-2 border-line rounded-lg w-auto" onchange="this.form.submit()">
      <option value="">Tous les types</option>
      {% for cat in categories %}
        <option value="{{ cat.id }}" {{ filters.type == cat.id ? 'selected' }}>{{ cat.name }}</option>
      {% endfor %}
    </select>
    {% if filters.type %}
    <a href="{{ path('app_contractor_index', {sort: filters.sort}) }}" class="h-8 px-3 text-xs text-muted hover:text-ink flex items-center rounded-lg border border-line bg-surface-2 transition-colors">
      Réinitialiser
    </a>
    {% endif %}
  </form>
</div>

<table class="data-table text-sm">
  <thead>
    <tr class="border-b border-line">
      {% set cols = [
        {key: 'name', label: 'Nom',  cls: 'md:w-72'},
        {key: 'type', label: 'Type', cls: 'hidden md:table-cell w-44'},
        {key: 'lot',  label: 'Lot',  cls: 'hidden md:table-cell w-64'},
      ] %}
      {% for col in cols %}
        {% set active = filters.sort == col.key %}
        {% set next_dir = (active and filters.dir == 'asc') ? 'desc' : 'asc' %}
        <th class="text-left text-xs font-medium text-muted py-2 px-3 md:px-4 {{ col.cls }}">
          <a href="{{ path('app_contractor_index', filters|merge({sort: col.key, dir: next_dir})) }}"
             class="flex items-center gap-1 select-none {{ active ? 'text-ink' : 'hover:text-ink' }}">
            {{ col.label }}
            {% if active %}
              <i class="ti ti-chevron-{{ filters.dir == 'asc' ? 'up' : 'down' }} text-[10px]"></i>
            {% else %}
              <i class="ti ti-arrows-sort text-[10px] opacity-40"></i>
            {% endif %}
          </a>
        </th>
      {% endfor %}
      <th class="hidden md:table-cell" aria-hidden="true"></th>
    </tr>
  </thead>
  <tbody class="divide-y divide-line">
    {% for c in contractors %}
    <tr class="hover:bg-surface-2 transition-colors cursor-pointer" onclick="location.href='{{ path('app_contractor_show', {id: c.id}) }}'">
      <td class="py-2 px-3 md:px-4 cell-truncate font-medium">
        <a href="{{ path('app_contractor_show', {id: c.id}) }}" class="hover:underline">{{ c.name }}</a>
      </td>
      <td class="hidden md:table-cell py-2 px-3 md:px-4 cell-truncate text-muted text-sm">{{ c.type ? c.type.name : '' }}</td>
      <td class="hidden md:table-cell py-2 px-3 md:px-4 cell-truncate text-muted text-sm">{{ c.lot ? c.lot.name : '' }}</td>
      <td class="hidden md:table-cell" aria-hidden="true"></td>
    </tr>
    {% else %}
      <tr><td colspan="4" class="py-4 px-3 text-sm text-muted">Aucun intervenant.</td></tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% endblock %}