{{--
    Pre-filtered element list — see ElementList.php for the "why" (caller
    supplies $elementIds + optional $title, this component only knows how to
    display/mutate them). $compact only changes spacing/density below, never
    which actions are available.

    Row title opens the element's Aperçu detail with pushHistory: true, so
    ApercuPanel stacks this list underneath it — the "back" button (see
    apercu-panel.blade.php) returns here rather than closing the panel.
--}}
<div>
    @if ($title)
        <h3 @class(['font-semibold text-gray-950 dark:text-white', 'text-sm' => $compact, 'text-base' => ! $compact])>
            {{ $title }}
        </h3>
    @endif

    <div @class(['divide-y divide-gray-100 dark:divide-white/5', '-mx-2 mt-2' => $compact, 'mt-4' => ! $compact])>
        @forelse ($this->elements() as $element)
            @php
                $isDone = $element->status->category === 'done';
                $isMeeting = $element->type->code === 'meeting';    
                $isToday = $element->due_date && ($element->due_date->toDateString() == Carbon\Carbon::today()->toDateString());
                $isOverdue = $element->due_date && ($element->due_date->toDateString() <= Carbon\Carbon::today()->subDay()->toDateString()) && ! in_array($element->status->category, ['done', 'cancelled'], true);
                $statuses = $this->statusesFor($element->project_id);
            @endphp
            <div @class(['flex items-center gap-3', 'px-2 py-2.5' => $compact, 'px-1 py-3.5' => ! $compact])>
                {{-- Compléter --}}
                @php
                    $isMeeting = $element->type->code === 'meeting';
                    $canToggleDone = ! $isMeeting || $element->meeting?->organizer_id === $this->currentPersonId();
                @endphp
                @if ($canToggleDone)
                    <button
                        type="button"
                        wire:click="toggleDone({{ $element->id }})"
                        @class([
                            'flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-[1.5px]',
                            'border-success-500 bg-success-500 text-white' => $isDone,
                            'border-gray-300 dark:border-gray-600' => ! $isDone,
                        ])
                    >
                        @if ($isDone)
                            <x-filament::icon icon="heroicon-o-check" class="h-3 w-3" />
                        @endif
                    </button>
                @else
                    <span class="h-5 w-5 shrink-0"></span>
                @endif

                {{-- Titre --}}
                <div class="min-w-0 flex-1">
                    <button
                        type="button"
                        wire:click="openApercuElement({{ $element->id }}, true)" 
                        x-tooltip="{ content: @js($element->title), theme: $store.theme, delay: 400, placement: 'bottom' }"
                        @class([
                            'block w-full truncate text-left text-sm hover:underline',
                            'text-gray-400 line-through decoration-gray-300 dark:text-gray-600' => $isDone,
                            'text-gray-700 dark:text-gray-200' => ! $isDone,
                        ])
                    >
                        {{ $element->title }}
                    </button>
                    @if ($element->type->code === 'milestone')
                    <span class="el-type-badge el-type-{{ $element->type->code }}">{{ $this->milestoneKindLabel($element->milestone->milestone_kind) }}</span>
                    @else
                    <span class="el-type-badge el-type-{{ $element->type->code }}">{{ $element->type->label }}</span>    
                    @endif
                    @unless ($compact)
                        <p class="mt-0.5 truncate text-xs text-gray-400 dark:text-gray-500">
                            {{ $element->projectCodeOrUnfiled() }}
                        </p>
                    @endunless
                </div>
                @if ($element->type->code === 'meeting')
                @php $color = $element->meeting->organizer->avatar_color ?? '#9CA3AF'; @endphp
                <span @class([
                    'flex h-9 w-9 items-center justify-center rounded-full border-2 border-white text-xs font-bold dark:border-gray-900 text-white',
                ])
                style="background-color: {{ $color }}; color: #fff"
                x-tooltip="{ content: @js('Organisateur : '.$element->meeting->organizer->full_name), theme: $store.theme }">
                    {{ $element->meeting->organizer->initials ?? '?' }}
                </span>
                @endif

                {{-- Pastille de rattachement : le code du projet, ou « À ranger »
                     dans le gris neutre réservé à ce qui n'a pas encore trouvé
                     sa place. `projectColorOrNeutral()` retourne toujours une
                     couleur, ce qui a permis de supprimer la branche sans
                     couleur — elle rendait deux `class` sur le même élément,
                     dont seule la première comptait. --}}
                @if ($compact)
                    <span
                        class="shrink-0 rounded-md px-2 py-1 text-xs font-bold"
                        style="background-color: {{ $element->projectColorOrNeutral() }}1a; color: {{ $element->projectColorOrNeutral() }}"
                    >
                        {{ $element->projectCodeOrUnfiled() }}
                    </span>
                @endif

                {{-- Échéance : verrouillée pour les réunions (pilotée par Outlook) --}}
                @if ($isMeeting)
                    <span
                        class="w-[110px] shrink-0 text-right text-xs text-gray-400 dark:text-gray-500"
                        title="Fixée par la réunion — non modifiable ici"
                    >
                        {{ $this->relativeDateLabel($element->due_date) ?? '—' }}
                    </span>
                @else
                    <input
                        type="date"
                        value="{{ $element->due_date?->toDateString() }}"
                        wire:change="updateDueDate({{ $element->id }}, $event.target.value)"
                        @class([
                            'w-[130px] shrink-0 rounded-md border-0 bg-transparent text-right text-xs tabular-nums focus:ring-1 focus:ring-primary-500',
                            'font-semibold text-danger-600 dark:text-danger-400' => $isOverdue,
                            'text-gray-500 dark:text-gray-400' => ! $isOverdue,
                        ])
                    />
                @endif

                {{-- Statut --}}
                <x-filament::dropdown placement="bottom-end" width="44">
                    <x-slot name="trigger">
                        <button
                            type="button"
                            class="flex w-[92px] shrink-0 items-center gap-1.5 text-xs font-semibold"
                            style="color: var(--{{ $this->statusColor($element->status->category) }}-600)"
                        >
                            <span class="h-1.5 w-1.5 shrink-0 rounded-full" style="background-color: var(--{{ $this->statusColor($element->status->category) }}-500)"></span>
                            {{ $element->status->label }}
                        </button>
                    </x-slot>
                    <x-filament::dropdown.list>
                        @foreach ($statuses as $status)
                            <x-filament::dropdown.list.item
                                wire:click="setStatus({{ $element->id }}, {{ $status->id }})"
                                :icon="$this->statusIcon($status->category)"
                                :color="$this->statusColor($status->category)"
                            >
                                {{ $status->label }}
                            </x-filament::dropdown.list.item>
                        @endforeach
                    </x-filament::dropdown.list>
                </x-filament::dropdown>
            </div>
        @empty
            <div class="px-2 py-10 text-center text-sm text-gray-400 dark:text-gray-500">
                Aucun élément.
            </div>
        @endforelse
    </div>
</div>