@php
    $completed = 100 * ($task->completed_checklists_total / ($task->checklists_count == 0 ? 1 : $task->checklists_count));

    if($task->isCompleted() && $task->completed_checklists_total == 0 && $task->checklists_count == 0) {
        $completed = 100;
    }
@endphp
<div id="task-{{ $task->id }}" data-id="{{ $task->id }}" class="w-full border p-5 rounded-lg flex flex-col-reverse gap-2 sm:flex-row justify-between relative overflow-hidden cursor-pointer {{ isset($isActive) && $isActive ? "active border-custom-orange-500 shadow-cstm" : "hover:border-custom-orange-500 hover:shadow-cstm"}} task">
    <div class="flex-1 flex flex-col gap-4 z-[10] task-content">
        <div>
            <h1 class="text-md-semibold text-custom-grey-900">
                {{ $task->title }}
            </h1>
            <div class="w-full flex flex-col lg:flex-row  gap-2">
                <p class="text-sm-regular text-custom-grey-600">
                    {{ trans('tables.due_date_title') }} : {{ $task->deadline ? App\Services\DateUtils::parseIsoDate($task->deadline)->format(config('settings.date_format')) : '-' }} |
                    {{ trans('tables.recent_change_title') }} : {{ App\Services\DateUtils::parseIsoDate($task->updated_at)->format(config('settings.date_format')) }}
                </p>
                <div class="flex gap-2">
                    @if ($task->users->count() == 1 && $task->users->contains(request()->user()->id) && $task->created_by == request()->user()->id)
                        <a class="task-edit" href="{{ url('tasks/'.$task->id)}}/edit">
                            <x-svg-icon icon="icon-edit"/>
                        </a>

                        <a href="javscript:;" class="btn-delete"
                            data-target-parent="#task-{{ $task->id }}"
                            data-uri="{{url('settings/tasks/'.$task->id) }}" data-id="{{ $task->id }}">
                            <x-svg-icon icon="icon-trash" />
                        </a>
                    @endif
                </div>

            </div>
        </div>

        <div>
            <div class="w-3/4 h-2 bg-custom-orange-25 rounded-[40px]">
                <div style="width:{{ $completed }}%" class="h-2 bg-custom-orange-500 rounded-[40px] completed_total"></div>
            </div>
        </div>

        <div class="flex lg:hidden">
            <button data-modal-id="todos-modal" class="openModal btn-primary-sm"
                type="button">
                {{ trans('title.see_tasks') }}
            </button>
        </div>
    </div>

    <div class="task-content">
        <button type="button" class="{{ $task->isCompleted() ? "btn-light-success" : "btn-light-danger" }} text-xs-medium completed_status">
            {{ $task->isCompleted() ? trans('menu.lbl_complete') : trans('menu.lbl_incomplete') }}
        </button>
    </div>

    <div class="absolute top-12 right-4 task-footer">
        <h1 class="text-custom-blue-50 text-[72px] text-wrap font-bold z-0">
            {{ $todoIndex?? 1 }}
        </h1>
    </div>
</div>