@section('title', 'Opleidingstypes')

<div>
    <div class="flex justify-between mb-4">
        <h1 class="text-xl font-semibold">Opleidingstypes</h1>

        <div>
            <livewire:admin.opleidingstypes.create />
        </div>
    </div>

    <div>
        @include('errors.messages')
    </div>

    <div class="grid sm:grid-cols-1 md:grid-cols-4 gap-4">
        <div class="col-span-2">
            <x-form.input 
                type="search" 
                id="opleidingstypes" 
                name="query" 
                wire:model.live.debounce.500ms="query" 
                label="none" 
                placeholder="Zoek opleidingstypes" 
            />
        </div>
    </div>
	
	<div class="overflow-x-auto">
    <table>
        <thead>
            <tr>
                <th>
                    <button type="button" wire:click="sortBy('name')">Naam</button>
                </th>
                <th>Actie</th>
            </tr>
        </thead>
        <tbody>
            @foreach($opleidingstypes as $opleidingstype)
                <tr>
                    <td>{{ $opleidingstype->name }}</td>
                    <td>
                        <div class="flex space-x-2">
                            <a href="{{ route('admin.opleidingstypes.edit', ['opleidingstype' => $opleidingstype->id]) }}">Bewerk</a>

                            <x-modal>
                                <x-slot name="trigger">
                                    <a href="#" @click="on = true">Verwijder</a>
                                </x-slot>

                                <x-slot name="modalTitle">Verwijderen bevestigen</x-slot>

                                <x-slot name="content">
                                    <div class="text-center">
                                        Ben je zeker dat je het opleidingstype <b>{{ $opleidingstype->name }}</b> wil verwijderen?
                                    </div>
                                </x-slot>

                                <x-slot name="footer">
                                    <x-button variant="gray" @click="on = false">Annuleer</x-button>
                                    <x-button 
                                        variant="red" 
                                        wire:click="deleteOpleidingstype({{ $opleidingstype->id }})"
                                    >
                                        Verwijder opleidingstype
                                    </x-button>
                                </x-slot>
                            </x-modal>
                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
	</div>	

    <div class="mt-4">
        {{ $opleidingstypes->links() }}
    </div>
</div>