{{-- @extends('layouts.app')

@section('content')
    <div class="content">
        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
            <h1 class="m-0 text-primary fw-bold">User-Group Association Details</h1>
            <a href="{{ route('user_groups.index') }}" class="btn btn-secondary">Back</a>
        </div>

        @include('layouts.partials.toast')

        <div class="card">
            <div class="card-body p-4">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex align-items-center">
                                <i class="fas fa-user text-primary me-2"></i>
                                <strong>User:</strong> <span class="ms-2">{{ $userGroup->user->name ?? null }}</span>
                            </li>
                            <li class="list-group-item d-flex align-items-center">
                                <i class="fas fa-users text-primary me-2"></i>
                                <strong>Group:</strong> <span
                                    class="ms-2">{{ $userGroup->userGroup->name ?? null }}</span>
                            </li>
                            <li class="list-group-item d-flex align-items-center">
                                <i class="fas fa-calendar-check text-primary me-2"></i>

                                <strong>Joined At:</strong>
                                <span class="ms-2">
                                    {{ $userGroup->joined_at ? \Carbon\Carbon::parse($userGroup->joined_at)->format('Y-m-d') : null }}
                                </span>

                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    @endsection --}}