@php use Illuminate\Support\Facades\Auth; @endphp
@push('scripts')
{{--    Code from https://codepen.io/ryangjchandler/pen/WNQQKeR--}}
    <script src="{{ asset('js/sort_table_by_column.js') }}"></script>
@endpush
<x-layout.app>
    <x-slot:page_title>Students</x-slot:page_title>

    <x-table.container class="mx-auto max-w-2xl" x-data="data()">
        <x-table.title_above_table>
            <x-slot:title>Students <x-badge_pill>{{ $students->count() }}</x-badge_pill></x-slot:title>
            <x-slot:subtitle>Before submitting entries, you must enter your students</x-slot:subtitle>
            <x-slot:button>Add Student</x-slot:button>
        </x-table.title_above_table>

        <x-table.table>
            <x-table.table_header_row>
                <x-table.th first @click="sortByColumn" class="cursor-pointer select-none">Name</x-table.th>
                <x-table.th @click="sortByColumn" class="cursor-pointer select-none">Grade</x-table.th>
                <x-table.th :placeholder="true">
                    <span class="sr-only">Edit</span>
                </x-table.th>
                <x-table.body x-ref="tbody">
                    @foreach($students as $student)
                        <tr>
                            <x-table.td :first="true">{{ $student->full_name(true) }}</x-table.td>
                            <x-table.td>{{ $student->grade }}</x-table.td>
                            <x-table.td_right_link sr_text=", {{ $student->full_name() }}">
                                <x-slot:a href="/students/{{ $student->id }}/edit">Edit</x-slot:a>
                            </x-table.td_right_link>
                        </tr>
                    @endforeach
                </x-table.body>
            </x-table.table_header_row>
        </x-table.table>
    </x-table.container>
</x-layout.app>