<div>
    {{-- Top Nav --}}
    @include('livewire.profile.top-nav.profile')

    <div class="mt-10">
        <div class="flex items-center space-x-4 px-5 py-4 bg-gray-300">
            <x-heroicon-s-user-circle class="w-20 h-20 mr-2 text-gray-500"/>
            <h3 class="text-2xl font-semibold text-gray-800">
                {{ $user['admin']['name'] }}
            </h3>
        </div>

        <div class="text-md px-10 p-10 bg-white">
            <div>
                <h4 class="font-bold mb-5">My Information</h4>
                <p><span class="font-semibold">Username:</span> {{ $user['admin']['username'] ?? '-' }}</p>
                <p>
                    <span class="font-semibold">Email:</span>
                    <a href="mailto:{{ $user['admin']['email'] }}" class="text-blue-600 hover:underline">
                        {{ $user['admin']['email'] }}
                    </a>
                </p>
            </div>

            <div>
                <h4 class="font-bold mt-10 mb-5">Access Role</h4>
                <p>
                    <span class="font-semibold">Role:</span>
                    {{ $user['admin']['role'] === 1 ? 'System Admin' : 'Marketing Personnel' }}
                </p>
            </div>
        </div>
    </div>
</div>
