<div class="institution-type-list">
    <x-title>
        Institution Types
        <x-slot:buttons>
            @can('institution-types.create')
                <button class="btn btn-primary btn-sm" wire:click="showAdd">
                    <i class="mdi mdi-plus"></i> Add Institution Type
                </button>
            @endcan
        </x-slot:buttons>
    </x-title>
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="list-group">
                        @forelse($institutionTypes as $type)
                            <div class="list-group-item bg-light mb-2 rounded position-relative p-3">
                                <p class="mb-1 fw-semibold text-primary">{{ $type['display_name'] }}</p>

                                <div class="position-absolute top-0 end-0 p-2 d-flex gap-2">
                                    @can('institution-types.edit')
                                        <i class="mdi mdi-pencil-outline action-icon me-2 text-muted"
                                           style="cursor: pointer"
                                           wire:click="loadEdit({{ $type['id'] }})"></i>
                                    @endcan

                                    @can('institution-types.delete')
                                        <i class="mdi mdi-delete-outline action-icon text-danger"
                                           style="cursor: pointer"
                                           wire:confirm="Are you sure you want to delete this institution type?"
                                           wire:click="deleteInstitutionType({{ $type['id'] }})"></i>
                                    @endcan
                                </div>
                            </div>
                        @empty
                            <div class="text-center p-4 text-muted">
                                No institution types found.
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        @if($show)
            <div>
                <div class="offcanvas offcanvas-end show" tabindex="-1" style="--bs-offcanvas-width: 600px; display: block;" role="dialog">
                    <div class="offcanvas-header border-bottom">
                        <h5 id="offcanvasRightLabel">{{ $editing ? 'Edit' : 'Add' }} Institution Type</h5>
                        <button type="button" class="btn-close text-dark" wire:click="hideAdd"></button>
                    </div>

                    <div class="offcanvas-body bg-light min-vh-100">
                        <form wire:submit.prevent="save">
                            <div class="mb-3">
                                <x-ui.input name="name" label="Type Name" wire:model="name" />
                            </div>

                            <div class="mt-4 d-flex justify-content-end gap-2">
                                <button type="button" class="btn btn-light" wire:click="hideAdd">Cancel</button>
                                <button type="submit" class="btn btn-primary w-md">
                                    {{ $editing ? 'Update' : 'Create' }} Type
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="offcanvas-backdrop fade show" wire:click="hideAdd"></div>
            </div>
        @endif
    </div>
</div>
