@if(count($allTodo))
    <ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-0 me-1" aria-label="Todo list">
        @foreach($allTodo as $todo)
            <li class="border border-gray-200 rounded-lg p-3 space-y-1 d-flex flex-column justify-content-between"
                aria-label="{{ $todo->title }}">
                <div class="d-flex flex-column">
                <div class="d-flex justify-content-between mb-1">
                    <div>
                        @if($todo->is_assigned_to_me > 0 || ($todo->is_assign_to_someone == "No" && $todo->created_by == Auth::id()))
                            <button type="button" class="btn btn-primary complete-todo" style="max-height: 35px !important;"  data-id="{{ basicEncrypt($todo->id) }}" data-toggle="tooltip" data-placement="top" title="Mark as Completed">
                                {!! renderIconHtml('check') !!} {{ __('Complete') }}
                            </button>
                        @endif
                    </div>

                    <div>
                        @if($todo->created_by == Auth::id())
                            <a class="text-warning h4 editTodo" href="javascript:void(0)" data-id="{{basicEncrypt($todo->id)}}">{!! renderIconHtml('edit') !!}</a>
                            <a class="text-danger h4 deleteTodo" href="javascript:void(0)" data-id="{{basicEncrypt($todo->id)}}">{!! renderIconHtml('delete') !!}</a>
                        @endif
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <h3 class="font-semibold text-sm text-gray-900 m-0">{{ $todo->title }}</h3>

                    @if(\Carbon\Carbon::parse($todo->due_date)->lt(\Carbon\Carbon::today()))
                        <span class="bg-red-100 text-red-700 text-[10px] font-semibold rounded-full px-2 py-0.5">{{ __('Overdue') }}</span>
                    @else
                        <span class="bg-yellow-100 text-[#ca8a04] text-[10px] font-normal rounded-full p-1 px-2">{{ __('Pending') }}</span>
                    @endif
                </div>
                <p class="text-[11px] text-gray-700 my-2">
                {{ $todo->description }}
                </p>
                <div class="mt-1">
                    <div class="labels flex flex-wrap gap-1">
                        @foreach($todo->label as $label)
                            <span class="bg-primary text-white text-[10px] font-normal rounded-full p-1 px-2">{{ $label }}</span>
                        @endforeach
                    </div>
                </div>
                </div>
            <div class="d-flex flex-column mt-3">
                <div class="flex justify-between items-center text-[11px] text-gray-600"
                        aria-label="Assignee and due date">
                    <div class="flex items-center space-x-1">
                        <i class="fas fa-user text-sm text-black"></i>
                        @if($todo->created_by == Auth::id())
                            <span>{{ __('You') }}</span>
                        @else
                            <span>{{$todo->createdByUser->details->username}}</span>
                        @endif
                    </div>
                    <div class="flex items-center space-x-1">
                        <i class="fas fa-calendar-alt text-sm text-blue-600"></i>
                        <time datetime="{{$todo->due_date}}">{{ date('M j', strtotime($todo->due_date))}}</time>
                    </div>
                </div>
                </div>
            </li>
        @endforeach
    </ul>
@else
    <div class="text-center">
        <div class="alert alert-warning alert-important">{{ __('No records found')}}</div>
    </div>
@endif