@extends ('layouts.app')

@section('title')
    {{ $role->name }} - {{ __('Show') }} - {{ __('Roles') }}
@endsection

@section('breadcrumbs')
    <x-breadcrumbs>
        <x-breadcrumb-item route='{{ route("roles.index") }}' icon='fa-solid fa-user-shield'>
            {{ __('Roles') }}
        </x-breadcrumb-item>
        <x-breadcrumb-item type="active">{{ __('Show') }}</x-breadcrumb-item>
    </x-breadcrumbs>
@endsection

@section('content')
    <x-layouts.show :data="$role">
        <x-section-header>
            <i class="fa-solid fa-user-shield fa-fw"></i> {{ $role->name }} <small
                class="text-muted">{{ __('Roles') }}</small>

            <x-slot name="toolbar">
                <x-buttons.return-back :small=true />
                <x-buttons.edit class="ms-1"
                    title="{{ __('Edit') }} {{ __('Role') }}"
                    route='{!! route("roles.edit", $role) !!}' :small=true />
            </x-slot>
        </x-section-header>

        <div class="row">
            <div class="col-12 col-sm-6">
                <div class="table-responsive">
                    <table class="table-bordered table-hover table">
                        <tr>
                            <th>{{ __("labels.roles.fields.name") }}</th>
                            <td>{{ $role->name }}</td>
                        </tr>

                        <tr>
                            <th>{{ __("labels.roles.fields.permissions") }}</th>
                            <td>
                                @if ($role->permissions()->count() > 0)
                                    <ul>
                                        @foreach ($role->permissions as $permission)
                                            <li>{{ $permission->name }}</li>
                                        @endforeach
                                    </ul>
                                @endif
                            </td>
                        </tr>

                        <tr>
                            <th>{{ __("labels.roles.fields.created_at") }}</th>
                            <td>{{ $role->created_at }}<br><small>({{ $role->created_at->diffForHumans() }})</small>
                            </td>
                        </tr>

                        <tr>
                            <th>{{ __("labels.roles.fields.updated_at") }}</th>
                            <td>{{ $role->updated_at }}<br /><small>({{ $role->updated_at->diffForHumans() }})</small>
                            </td>
                        </tr>

                    </table>
                </div>
            </div>
            <div class="col-12 col-sm-6">
                <div class="table-responsive">
                    <table class="table-bordered table">
                        <thead>
                            <tr>
                                <th>@lang('List of users') (<small>@lang('Total'): {{ $users->count() }}</small>)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($users as $user)
                                <tr>
                                    <td> <a href="{{ route('users.show', $user->id) }}">{{ $user->name }}</a>
                                        <span class="float-end">{!! $user->status_label !!}</span></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </x-layouts.show>

@endsection