@extends('layouts.app')

@section('title', __('auth::messages.roles.title'))

@section('content')
    <x-page-header :title="__('auth::messages.roles.title')">
        @can('create', \Spatie\Permission\Models\Role::class)
            <a href="{{ route('roles.create') }}" class="btn btn-sm px-btn-primary">
                <i class="bi bi-plus-lg"></i> {{ __('auth::messages.roles.create') }}
            </a>
        @endcan
    </x-page-header>

    <div class="px-panel overflow-hidden">
        <div class="table-responsive">
            <table class="table px-table px-table--sticky align-middle mb-0">
                <thead>
                    <tr>
                        <th scope="col">{{ __('auth::messages.roles.name') }}</th>
                        <th scope="col">{{ __('auth::messages.roles.permissions') }}</th>
                        <th scope="col">{{ __('auth::messages.users.title') }}</th>
                        <th scope="col" class="text-end">{{ __('common.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($roles as $role)
                        @php($isProtected = $role->name === $protectedRole)
                        <tr>
                            <td>
                                <span class="fw-medium">{{ __('roles.'.$role->name) }}</span>
                                <div class="small text-muted font-monospace">{{ $role->name }}</div>
                            </td>
                            <td class="small">
                                @if ($isProtected)
                                    <span class="px-pill px-pill--violet">
                                        <i class="bi bi-shield-lock"></i> {{ __('auth::messages.roles.protected') }}
                                    </span>
                                @else
                                    {{ $role->permissions->count() }}
                                @endif
                            </td>
                            <td class="small">{{ $role->users_count ?? 0 }}</td>
                            <td class="text-end">
                                @can('update', $role)
                                    @unless ($isProtected)
                                        <a href="{{ route('roles.edit', $role->name) }}"
                                           class="btn btn-sm px-btn-ghost">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                    @endunless
                                @endcan

                                @can('delete', $role)
                                    @if (! $isProtected && ($role->users_count ?? 0) === 0)
                                        <x-confirm-delete :action="route('roles.destroy', $role->name)" label="" />
                                    @endif
                                @endcan
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4">
                                <div class="px-empty py-4">
                                    <div class="px-empty__art" aria-hidden="true">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                             stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z" /><rect x="9.5" y="11" width="5" height="4" rx="1" /><path d="M10.5 11V9.5a1.5 1.5 0 0 1 3 0V11" />
                                        </svg>
                                    </div>

                                    <p class="px-empty__title">{{ __('auth::messages.roles.empty') }}</p>
                                    <p class="px-empty__text mb-0">{{ __('auth::messages.roles.empty_text') }}</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection