@php
    $total = collect($groupedPermissions)->flatten()->count();
    $isSuperadmin = $role->name === 'superadmin';
@endphp

<div>

    {{-- ============================ HEADER ============================ --}}
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                <div class="d-flex align-items-center">
                    <div class="avatar avatar-lg me-3">
                        <span class="avatar-initial rounded-circle bg-label-primary">
                            <i class="ti tabler-shield-check ti-lg"></i>
                        </span>
                    </div>
                    <div>
                        <h4 class="mb-0 text-capitalize">{{ __(ucfirst(str_replace('_', ' ', $role->name))) }}</h4>
                        <span class="text-muted">
                            <code>{{ $role->name }}</code>
                            &middot; {{ __('Rank') }} {{ config("roles.hierarchy.{$role->name}", 0) }}
                        </span>
                    </div>
                </div>

                <div class="d-flex flex-wrap gap-4 text-center">
                    <div>
                        <h5 class="mb-0">{{ count($granted) }}<span class="text-muted fs-6">/{{ $total }}</span></h5>
                        <small class="text-muted">{{ __('Permissions') }}</small>
                    </div>
                    <div>
                        <h5 class="mb-0">{{ $usersAffected }}</h5>
                        <small class="text-muted">{{ __('Users with this role') }}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ============================ READ-ONLY NOTICE ============================ --}}
    {{-- The screen is a viewer on purpose: PermissionSeeder is the source of truth and the deploy
         re-runs it, so anything edited here would be reverted without warning. --}}
    <div class="alert alert-info d-flex align-items-start" role="alert">
        <i class="ti tabler-info-circle ti-md me-2 mt-1"></i>
        <div>
            <h6 class="alert-heading mb-1">{{ __('Read-only view') }}</h6>
            <span>
                {{ __('Permissions are defined in code (the permission seeder) and re-applied on every deploy, which also removes orphan permissions. To change what this role grants, edit the seeder and deploy — the deploy log lists exactly which permissions were added or removed per role.') }}
            </span>
        </div>
    </div>

    @if ($isSuperadmin)
        <div class="alert alert-warning d-flex align-items-start" role="alert">
            <i class="ti tabler-crown ti-md me-2 mt-1"></i>
            <div>
                <h6 class="alert-heading mb-1">{{ __('Top of the hierarchy') }}</h6>
                <span>{{ __('This role holds every permission except the notification subscriptions, withheld on purpose so the account is not notified of every event in the system.') }}</span>
            </div>
        </div>
    @endif

    {{-- ============================ GROUPS ============================ --}}
    @foreach ($groupedPermissions as $group => $permissions)
        @php
            $names = collect($permissions)->pluck('name');
            $grantedInGroup = $names->intersect($granted)->count();
            $allGranted = $grantedInGroup === $names->count();
        @endphp

        <div class="card mb-4">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
                <h5 class="card-title mb-0">
                    {{ __($group) }}
                    <span class="badge {{ $allGranted ? 'bg-label-success' : 'bg-label-secondary' }} ms-1">
                        {{ $grantedInGroup }}/{{ $names->count() }}
                    </span>
                </h5>
            </div>

            <div class="card-body pt-2">
                <div class="row g-3">
                    @foreach ($permissions as $permission)
                        @php
                            $isGranted   = in_array($permission->name, $granted, true);
                            $isSensitive = in_array($permission->name, $sensitive, true);
                            $isEssential = in_array($permission->name, $essential, true);
                        @endphp

                        <div class="col-12 col-xl-6">
                            <div class="border rounded p-3 h-100 {{ $isGranted ? 'border-primary' : 'opacity-50' }}">
                                <div class="d-flex align-items-start">
                                    {{-- Icon instead of a switch: nothing here is clickable. --}}
                                    <i class="ti {{ $isGranted ? 'tabler-circle-check text-primary' : 'tabler-circle-x text-muted' }} me-2 mt-1"></i>

                                    <div class="flex-grow-1">
                                        <span class="fw-medium d-block">
                                            {{ $permission->description ?: $permission->name }}
                                        </span>
                                        <code class="small text-muted">{{ $permission->name }}</code>

                                        @if ($isSensitive)
                                            <span class="badge bg-label-warning ms-1" title="{{ __('Changes how the app behaves for these users, not just what they see') }}">
                                                <i class="ti tabler-alert-triangle me-1"></i>{{ __('Sensitive') }}
                                            </span>
                                        @endif
                                        @if ($isEssential)
                                            <span class="badge bg-label-info ms-1" title="{{ __('Every role is expected to keep this one') }}">
                                                <i class="ti tabler-lock-open me-1"></i>{{ __('Essential') }}
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endforeach

</div>