@section('title', 'Cursussen')
<div>
    <div class="flex justify-between mb-4">
        <h1 class="text-xl font-semibold">Cursussen</h1>
        <div>
            <livewire:admin.cursussen.create />
        </div>
    </div>

    <div>
        @include('errors.messages')
    </div>
	
	<div class="overflow-x-auto">
    <table>
        <thead>
        <tr>
            <th>
                <a href="#" wire:click.prevent="sortBy('name')">Naam</a>
            </th>
			<th>Gekoppelde diplomatypes</th>
            <th>Actie</th>
        </tr>
        </thead>
        <tbody>
        @foreach($cursussen as $cursus)
            <tr>
                <td>{{ $cursus->name }}</td>
				<td>
					@forelse($cursus->diplomatypes as $diplomatype)
						<div>{{ $diplomatype->name }}</div>
					@empty
						<div class="text-gray-500 italic">Geen gekoppeld diplomatype</div>
					@endforelse
				</td>
                <td>
                    <div class="flex space-x-2">
                        <a href="{{ route('admin.cursussen.edit', ['cursus' => $cursus->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 de cursus <b>{{ $cursus->name }}</b> wil verwijderen? Dit zal ook de koppeling verwijderen met bestaande diplomatypes.
                                </div>
                            </x-slot>

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

    {{ $cursussen->links() }}
</div>