@extends('layouts.admin')
@section('title','Roles & Permissions')
@section('page-title','Roles & Permissions')
@section('content')
<div class="page-header">
    <h1>Roles & Permissions</h1>
    <a href="{{ route('admin.roles.create') }}" class="btn btn-primary">+ New Role</a>
</div>
<div class="grid-2" style="gap:1.25rem;">
@forelse($roles as $role)
<div class="card">
    <div class="card-header" style="border-left:4px solid {{ $role->color }};">
        <div>
            <span style="font-weight:600;font-size:1rem;">{{ $role->name }}</span>
            @if($role->is_system)<span class="badge" style="background:#f3f4f6;color:#6b7280;margin-left:.5rem;font-size:.7rem;">System</span>@endif
            <div style="font-size:.8rem;color:#7A6058;margin-top:.15rem;">{{ $role->description }}</div>
        </div>
        <div style="display:flex;gap:.5rem;">
            <a href="{{ route('admin.roles.edit',$role) }}" class="btn btn-outline btn-sm">Edit</a>
            @if(!$role->is_system)
            <form method="POST" action="{{ route('admin.roles.destroy',$role) }}" onsubmit="return confirm('Delete this role?')">
                @csrf @method('DELETE')
                <button class="btn btn-danger btn-sm">Delete</button>
            </form>
            @endif
        </div>
    </div>
    <div class="card-body" style="padding:1rem 1.5rem;">
        <div style="display:flex;gap:1rem;margin-bottom:.75rem;font-size:.85rem;color:#7A6058;">
            <span>👥 {{ $role->users_count }} {{ Str::plural('user',$role->users_count) }}</span>
            <span>🔑 {{ $role->permissions_count }} {{ Str::plural('permission',$role->permissions_count) }}</span>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:.35rem;">
            @forelse($role->permissions->take(8) as $perm)
            <span style="background:#f0e8e0;color:#8B3252;padding:.15rem .5rem;border-radius:.25rem;font-size:.72rem;">{{ $perm->name }}</span>
            @empty
            <span style="color:#7A6058;font-size:.85rem;">No permissions assigned</span>
            @endforelse
            @if($role->permissions->count() > 8)
            <span style="background:#f0e8e0;color:#8B3252;padding:.15rem .5rem;border-radius:.25rem;font-size:.72rem;">+{{ $role->permissions->count() - 8 }} more</span>
            @endif
        </div>
    </div>
</div>
@empty
<div style="grid-column:1/-1;text-align:center;padding:2rem;color:#7A6058;">No roles yet. <a href="{{ route('admin.roles.create') }}" style="color:#8B3252;">Create one</a></div>
@endforelse
</div>
@endsection