@extends('admin.layout')

@section('title', 'Détails de la permission')

@section('content')
<div class="pagetitle">
    <h1>@yield('title')</h1>
</div>

<section class="section">
    <div class="card p-4">
        {{-- Libellé lisible en tête, nom technique en dessous : "plannings.editIntervention"
             en titre se coupait en plein mot sur mobile. --}}
        <h2 class="mb-1">@permissionBadge($permission->name)</h2>
        <p class="text-muted small text-break mb-4">{{ $permission->name }}</p>

        {{-- Rôles associés --}}
        <div class="mb-3">
            <strong class="d-block mb-2">Rôles</strong>
            @if ($roles->isNotEmpty())
                <div class="d-flex flex-wrap gap-1">
                    @foreach ($roles as $role)
                        <span class="badge bg-primary">{{ strtoupper($role->name) }}</span>
                    @endforeach
                </div>
            @else
                <span class="text-muted">Aucun rôle</span>
            @endif
        </div>

        {{-- Utilisateurs ayant cette permission --}}
        <div class="mb-3">
            <strong class="d-block mb-2">Utilisateurs</strong>
            @if ($users->isNotEmpty())
                <div class="d-flex flex-wrap gap-1">
                    @foreach ($users as $user)
                        <span class="badge bg-secondary">{{ $user->nom }} {{ $user->prenom }}</span>
                    @endforeach
                </div>
            @else
                <span class="text-muted">Aucun utilisateur</span>
            @endif
        </div>

        <a href="{{ route('permissions.index') }}" class="btn btn-outline-secondary mt-3">Retour</a>
    </div>
</section>
@endsection