<x-app-layout>
    <div class="py-12">
        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <h1 class="text-2xl font-bold mb-4">All Teachers</h1>

                    @if($teachers->isEmpty())
                        <p>No teachers found.</p>
                    @else
                        <table class="table-auto w-full border-collapse">
                            <thead>
                                <tr class="bg-gray-100">
                                    <th class="px-4 py-2 text-left">Name</th>
                                    <th class="px-4 py-2 text-left">Email</th>
                                    <th class="px-4 py-2 text-left">Bio</th>
                                    <th class="px-4 py-2 text-left">Location</th>
                                    <th class="px-4 py-2 text-left">Rate</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($teachers as $teacher)
                                    <tr class="border-t">
                                        <td class="px-4 py-2">
                                            {{ $teacher->user->name ?? '-' }}
                                        </td>
                                        <td class="px-4 py-2">
                                            {{ $teacher->user->email ?? '-' }}
                                        </td>
                                        <td class="px-4 py-2">
                                            {{ $teacher->bio ?? '-' }}
                                        </td>
                                        <td class="px-4 py-2">
                                            {{ $teacher->location ?? '-' }}
                                        </td>
                                        <td class="px-4 py-2">
                                            {{ $teacher->hourly_rate ? '£'.$teacher->hourly_rate : '-' }}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @endif
                </div>
            </div>
        </div>
    </div>
</x-app-layout>