<div class="card shadow-sm mx-auto">
    <div class="card-body">
            <h4 class="bold">Merge Institutions</h4>
        <p class="text-muted small">
            Merging <strong class="text-dark">{{ $institution->display_name }}</strong> into another institution will reassign all associated care settings.
        </p>

        <div class="mb-4">
            <label for="target" class="form-label font-weight-bold">Merge this into:</label>
            <select
                    wire:model.live="targetInstitutionId"
                    id="target"
                    class="form-select @error('targetInstitutionId') is-invalid @enderror"
            >
                <option value="">Select an institution...</option>
                @foreach($institutions as $id => $inst)
                    <option value="{{ $id }}">{{ $inst }}</option>
                @endforeach
            </select>
            @error('targetInstitutionId')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        @can('institutions.merge')
        <button
                wire:click="merge"
                wire:confirm="Are you sure you want to move these settings? This cannot be undone."
                class="btn btn-primary"
                @disabled(!$targetInstitutionId)
        >
            <span wire:loading wire:target="merge" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>

            <span wire:loading.remove wire:target="merge">Confirm Merge</span>
            <span wire:loading wire:target="merge">Processing...</span>
        </button>
        @endcan

        @if (session()->has('message'))
            <div class="alert alert-success mt-3 mb-0">
                {{ session('message') }}
            </div>
        @endif
    </div>
</div>