<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            Todo List
        </h2>
    </x-slot>

    <div class="mx-4">
        <table class="min-w-full divide-y divide-gray-200">
            <thead>
                @php
                    $ths = ['ID', 'Task', 'Created At', 'Updated At'];
                @endphp
                <tr>
                    @foreach ($ths as $th)
                        <th class="p-1 bg-slate-300">{{ $th }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach ($todos as $todo)
                    <tr class="{{ $loop->iteration % 2 === 0 ? 'bg-slate-200' : 'bg-white' }}">
                        <td class="p-1 text-center">{{ $todo->id }}</td>
                        <td class="p-1">{{ $todo->task }}</td>
                        <td class="p-1 text-center">{{ $todo->created_at }}</td>
                        <td class="p-1 text-center">{{ $todo->updated_at }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</x-app-layout>