@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('settings.title')],
        ['label' => __('rbac.roles.title'), 'url' => route('settings.roles.index')],
        ['label' => $role->name],
    ];
@endphp

<x-ui.layout.page
    :title="$role->name"
    :subtitle="__('rbac.roles.view_subtitle')"
    page-icon="fe fe-shield"
    :breadcrumbs="$breadcrumbs"
>
    @error('role')
        <div class="alert alert-danger">{{ $message }}</div>
    @enderror

    <x-slot:actions>
        <x-ui.buttons.secondary :href="route('settings.roles.index')" icon="fe fe-arrow-left">
            {{ __('common.back') }}
        </x-ui.buttons.secondary>
        @can('settings.roles.manage')
            <x-ui.buttons.primary :href="route('settings.roles.edit', $role)" icon="fe fe-edit-2">
                {{ __('common.edit') }}
            </x-ui.buttons.primary>
        @endcan
    </x-slot:actions>

    <div class="card mb-3">
        <div class="card-body">
            <dl class="row mb-0">
                <dt class="col-md-3">{{ __('rbac.roles.description') }}</dt>
                <dd class="col-md-9">{{ $role->description ?: '—' }}</dd>
                <dt class="col-md-3">{{ __('rbac.roles.status') }}</dt>
                <dd class="col-md-9">
                    <x-ui.operational.status-badge
                        :label="$role->is_active ? __('common.active') : __('common.inactive')"
                        :variant="$role->is_active ? 'success' : 'neutral'"
                    />
                </dd>
                <dt class="col-md-3">{{ __('rbac.roles.assigned_users') }}</dt>
                <dd class="col-md-9">{{ $role->users_count }}</dd>
                <dt class="col-md-3">{{ __('rbac.roles.permissions') }}</dt>
                <dd class="col-md-9">{{ $role->permissions->count() }}</dd>
            </dl>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-white"><strong>{{ __('rbac.roles.permissions') }}</strong></div>
        <div class="card-body">
            <div class="row g-2">
                @foreach ($role->permissions as $permission)
                    <div class="col-md-6"><code>{{ $permission->slug }}</code></div>
                @endforeach
            </div>
        </div>
    </div>

    @can('settings.roles.manage')
        @if ($role->slug !== 'owner' && $role->users_count === 0)
            <form method="POST" action="{{ route('settings.roles.destroy', $role) }}" class="mt-3 text-end"
                onsubmit="return confirm(@js(__('rbac.roles.delete_confirm')))">
                @csrf
                @method('DELETE')
                <x-ui.buttons.danger type="submit" icon="fe fe-trash-2">{{ __('common.delete') }}</x-ui.buttons.danger>
            </form>
        @endif
    @endcan
</x-ui.layout.page>
