{{--
    One row of "Aujourd'hui" — same content as my-tasks-card.blade.php's row,
    except the project badge: a non-rangé element shows a red "À ranger"
    badge here instead of the neutral-gray one used everywhere else in the
    app. Kept as its own partial (not shared with my-tasks-card) precisely
    for that one difference — decision made explicit with the user before
    building this page, rather than adding a "$redUnfiledBadge" flag to the
    shared partial.

    $task — the ProjectElement to render.
--}}
@php
    $isDone = $task->status->category === 'done';
    $isOverdue = $task->due_date && ($task->due_date->toDateString() <= Carbon\Carbon::today()->subDay()->toDateString()) && ! in_array($task->status->category, ['done', 'cancelled'], true);
    $isMeeting = $task->type->code === 'meeting';
    $canToggleDone = ! $isMeeting || $task->meeting?->organizer_id === $this->currentPersonId();
    $projectColor = $task->projectColorOrNeutral();
@endphp
<div
    wire:key="today-task-{{ $task->id }}"
    class="flex items-start md:items-center gap-3 border-b border-gray-100 px-3 md:px-6 py-3 last:border-0 dark:border-white/5"
>
    @if ($canToggleDone)
        <button
            type="button"
            wire:click="toggleDone({{ $task->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

    @if ($isMeeting && $task->meeting->starts_at != null)
        <span class="shrink-0 rounded-md bg-gray-100 px-2.5 py-1 text-xs font-bold text-gray-500 dark:bg-white/5 dark:text-gray-400">
            {{ $task->meeting->starts_at->format('H:i') }}
        </span>
    @endif

    {{--
        `flex-col` by default so the badge/assign-button/date reflow onto
        their own line under the title below `md` (Todoist-style), and
        `md:flex-row` puts everything back inline once there's room.
        `md:contents` on the group just below is what makes that work
        without duplicating markup: on mobile it's a real flex row (the
        second line), on desktop the box itself disappears so its children
        become direct flex items of *this* row, right after the title —
        same DOM order as before, so desktop's appearance doesn't change.
    --}}
    <div class="min-w-0 flex-1 flex flex-col gap-1 md:flex-row md:items-center md:gap-3">
        <span
            wire:click="openApercuElement({{ $task->id }})"
            @class([
                'min-w-0 flex-1 truncate text-xs md:text-sm cursor-pointer hover:underline',
                'text-gray-400 line-through decoration-gray-300 dark:text-gray-600' => $isDone,
                'text-gray-700 dark:text-gray-200' => ! $isDone,
            ])
        >
            {{ $task->title }}
        </span>

        <div class="flex items-center gap-2 md:contents">
            @if (! $task->assignees->isNotEmpty())
                <x-filament::button
                    type="button"
                    outlined
                    wire:click="assignToMe({{ $task->id }})"
                    wire:loading.attr="disabled"
                    wire:target="assignToMe({{ $task->id }})"
                    class="shrink-0 justify-center w-min-0 fi-btn fi-size-sm text-xs border border-gray-200 bg-white dark:text-gray-400 text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/5"
                    size="sm"
                >
                    <span wire:loading.remove wire:target="assignToMe({{ $task->id }})">Me l'assigner</span>
                    <span wire:loading wire:target="assignToMe({{ $task->id }})" class="text-xs">En cours</span>
                </x-filament::button>
            @endif

            @if ($task->isUnfiled())
                <span class="shrink-0 rounded-md bg-danger-50 px-2.5 py-1 text-xs font-bold text-danger-600 dark:bg-danger-500/10 dark:text-danger-400">
                    À ranger
                </span>
            @elseif ($projectColor)
                <span
                    class="shrink-0 rounded-md px-2.5 py-1 text-xs font-bold"
                    style="background-color: {{ $projectColor }}1a; color: {{ $projectColor }}"
                >
                    {{ $task->projectCodeOrUnfiled() }}
                </span>
            @else
                <span class="shrink-0 rounded-md bg-gray-100 px-2.5 py-1 text-xs font-bold text-gray-500 dark:bg-white/5 dark:text-gray-400">
                    {{ $task->projectCodeOrUnfiled() }}
                </span>
            @endif

            <span
                @class([
                    'shrink-0 text-xs tabular-nums md:w-16 md:text-right md:text-sm',
                    'font-semibold text-danger-600 dark:text-danger-400' => $isOverdue,
                    'text-gray-400 dark:text-gray-500' => ! $isOverdue,
                ])
            >
                {{ $this->relativeDateLabel($task->due_date) ?? '—' }}
            </span>
        </div>
    </div>
</div>