@extends('layout.admin.app')
@section('content')

<div class="dashboard-container">
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <x-breadcrumb :title="'Permission'" :breadcrumb="$breadcrumb" />
            <x-back-button />
        </div>

        <div class="p-12">
            <div class="card mt-3">
                <div class="card-body">
                    <x-per-page-selector wire:model.live="perPage" :options="[5,10,25,50,100]" />

                    <table class="table table-striped table-hover table-sm">
                        <thead class="table-light fw-bold">
                            <tr class="mb-1">
                                <th class="p-2 text-left">
                                    #
                                </th>
                                <th class="p-2 text-left">
                                    Permission (with underscore)
                                </th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse($permissions as $key => $permission)
                                @if ($permission->children->isNotEmpty())
                                <tr class="border-t">
                                    <td class="p-2">{{$key+1}}</td>
                                    <td class="p-2">{{str_replace("_"," ", $permission->title)}} (Sub Permissions Count: {{$permission->children_count}})
                                        <ul>
                                            @foreach ($permission->children as $child)
                                                <li>{{str_replace("_"," ", $child->title)}}</li>
                                            @endforeach
                                        </ul>
                                    </td>
                                </tr>
                                @endif
                            @empty
                                <tr>
                                    <td colspan="2" class="p-2 text-center text-gray-500">No permissions found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection