@extends('layouts.admin')

@section('title', 'Users')

@section('content')
<x-ui.page-header
    title="User Management"
    subtitle="Manage system users, roles, and permissions."
    :breadcrumbs="[
        ['label' => 'Home', 'href' => route('dashboard')],
        ['label' => 'System Maintenance'],
        ['label' => 'Users'],
    ]"
>
    <x-slot:actions>
        <x-ui.button variant="primary" icon="bi-person-plus">Add user</x-ui.button>
    </x-slot:actions>
</x-ui.page-header>

<x-ui.table-wrapper id="users-table" title="System users" :record-count="$users->total()">
    <x-slot:head>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Status</th>
            <th>Roles</th>
            <th class="text-end">Actions</th>
        </tr>
    </x-slot:head>

    @forelse($users as $user)
        <tr>
            <td>{{ $user->name }}</td>
            <td class="text-mono">{{ $user->email }}</td>
            <td>
                <x-ui.status-pill
                    :status="$user->is_active ?? true ? 'active' : 'pending'"
                    :label="($user->is_active ?? true) ? 'Active' : 'Inactive'"
                />
            </td>
            <td>
                @foreach($user->roles ?? [] as $role)
                    <x-ui.badge variant="primary">{{ $role->name ?? $role }}</x-ui.badge>
                @endforeach
            </td>
            <td>
                <div class="bv-table__actions">
                    <x-ui.button variant="ghost" size="sm" icon="bi-pencil-square" class="bv-btn--icon" aria-label="Edit {{ $user->name }}" />
                </div>
            </td>
        </tr>
    @empty
        <tr>
            <td colspan="5">
                <x-ui.empty-state title="No users found" message="No users match your criteria." icon="bi-people" />
            </td>
        </tr>
    @endforelse
</x-ui.table-wrapper>

@if($users->hasPages())
    <div class="mt-3">
        {{ $users->links() }}
    </div>
@endif
@endsection