@extends('admin.layouts.app')

@section('title', 'Permissions')
@section('page-title', 'Module Permissions')

@section('breadcrumbs')
    <li class="breadcrumb-item active" aria-current="page">Permissions</li>
@endsection

@section('content')
<div class="space-y-6">
    <div class="mb-4">
        <h2 class="text-xl font-bold text-slate-900 dark:text-white">Staff access control</h2>
        <p class="mt-1 text-sm text-slate-500">Choose which system modules each administrator can open. Super administrators always retain full access.</p>
    </div>

    <div class="grid gap-4 grid-cols-1 md:grid-cols-2">
        @foreach($users as $user)
            <div class="flex items-center gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 p-5 shadow-soft hover:-translate-y-px transition duration-150 ease-in-out">
                <span class="grid h-11 w-11 place-items-center rounded-full bg-emerald-100 dark:bg-emerald-950/55 font-bold text-emerald-700 dark:text-emerald-400">{{ strtoupper(substr($user->name, 0, 2)) }}</span>
                
                <div class="min-w-0 flex-1">
                    <div class="font-semibold text-slate-900 dark:text-white">{{ $user->name }}</div>
                    <div class="truncate text-xs text-slate-500">{{ $user->email }}</div>
                    <div class="mt-1 text-xs font-semibold text-emerald-600 dark:text-emerald-400">
                        {{ $user->role === 'super_admin' ? 'Full access' : ($user->permissions === null ? 'Full access (default)' : count($user->permissions).' modules allowed') }}
                    </div>
                </div>

                <a href="{{ route('admin.permissions.edit', $user) }}" class="btn-secondary flex items-center gap-1.5 text-xs py-2 px-3">
                    <i class="bi bi-key text-slate-500"></i> Configure
                </a>
            </div>
        @endforeach
    </div>
</div>
@endsection