@extends('layouts.app')
@section('title', 'User Accounts')
@section('content')
<div class="card">
    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
        <h6 class="mb-0">User Accounts</h6>
        <a href="{{ route('users.create') }}" class="btn btn-sm btn-primary mb-0"><i class="bi bi-plus-lg me-1"></i>New User</a>
    </div>
    <div class="card-body">
        <div class="table-responsive"><table class="table align-items-center mb-0">
            <thead><tr class="text-xxs text-uppercase text-secondary"><th class="ps-2">Name</th><th>Email</th><th>Role</th><th>Linked Staff</th><th></th></tr></thead>
            <tbody>
            @foreach($users as $user)
                <tr>
                    <td class="ps-2 font-weight-bold text-sm">{{ $user->name }}</td>
                    <td class="text-sm">{{ $user->email }}</td>
                    <td>@foreach($user->roles as $r)<span class="badge bg-gradient-primary text-white">{{ ucfirst($r->name) }}</span>@endforeach</td>
                    <td class="text-sm">{{ $user->staff?->name ?? '—' }}</td>
                    <td class="text-end pe-2">
                        <a href="{{ route('users.edit', $user) }}" class="text-secondary me-2"><i class="bi bi-pencil"></i></a>
                        @if($user->id !== auth()->id())
                        <form action="{{ route('users.destroy', $user) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this user?')">@csrf @method('DELETE')<button class="btn btn-link p-0 text-danger"><i class="bi bi-trash"></i></button></form>
                        @endif
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table></div>
        <div class="mt-3">{{ $users->links() }}</div>
    </div>
</div>
@endsection