{{-- <div class="md:px-32 py-8 w-full"> --}}
    <div class="shadow overflow-hidden rounded border-b border-gray-200">
        <table class="min-w-full bg-white">
            <thead class="bg-gray-800 text-white uppercase font-semibold text-sm">
                <tr>
                <th class="w-1/3 text-left py-3 px-4">task id</th>
                <th class="w-1/3 text-left py-3 px-4">task name</th>
                <th class="text-left py-3 px-4">assignee</th>
                <th class="text-left py-3 px-4">suspended</td>
                <th class="text-left py-3 px-4">due</td>
                </tr>
            </thead>
            <tbody class="text-gray-700">
                @php
                    $counter = 0;
                @endphp
                @foreach ($process_tasks as $task)
                    <tr class="{{ $counter % 2 == 0 ? "" : "bg-gray-100" }}">
                        <td class="w-2/3 text-left py-3 px-4">
                            <a class="hover:text-blue-500" href="">
                                {{ $task->id }}
                            </a>
                        </td>
                        <td class="w-1/3 text-left py-3 px-4">
                            <div>
                                {{ $task->name }}
                            </div>
                            <div>
                                {{ $task->description }}
                            </div>
                        </td>
                        <td class="text-left py-3 px-4">
                            {{ $task->assignee }}
                        </td>
                        <td class="text-left py-3 px-4">
                            {{ $task->suspended ? "suspended" : "active" }}
                        </td>
                        <td class="text-left py-3 px-4">
                            {{ $task->owner }}
                        </td>
                    </tr>     
                    @php
                        $counter++;
                    @endphp               
                @endforeach
            </tbody>
        </table>
    </div>
{{-- </div> --}}