<!-- Details Panel -->
<div id="details-panel" class="w-1/4 border-l bg-white overflow-y-auto hidden">
    <!-- <div class="flex items-center justify-between gap-2 p-4 border-b">
        <div class="flex items-center gap-2">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 8v4l3 3"></path>
                <circle cx="12" cy="12" r="10"></circle>
            </svg>
            <h2 class="text-lg font-semibold">Details</h2>
        </div>
        <button id="close-details-panel" class="text-gray-500 hover:text-gray-700">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    </div>
    <div class="divide-y" id="details-panel-results">
        <div class="p-4">
            <div class="mb-4">
                <span class="text-sm font-medium text-gray-500 block">cn</span>
                <span class="text-sm text-gray-900 block">John Doe</span>
            </div>
            <div class="mb-4">
                <span class="text-sm font-medium text-gray-500 block">sn</span>
                <span class="text-sm text-gray-900 block">Doe</span>
            </div>
            <div class="mb-4">
                <span class="text-sm font-medium text-gray-500 block">givenName</span>
                <span class="text-sm text-gray-900 block">John</span>
            </div>
            <div class="mb-4">
                <span class="text-sm font-medium text-gray-500 block">mail</span>
                <span class="text-sm text-gray-900 block">johndoe@example.com</span>
            </div>
            <div class="mb-4">
                <span class="text-sm font-medium text-gray-500 block">telephoneNumber</span>
                <span class="text-sm text-gray-900 block">+1 234 567 890</span>
            </div>
            <div class="mb-4">
                <span class="text-sm font-medium text-gray-500 block">title</span>
                <span class="text-sm text-gray-900 block">Software Engineer</span>
            </div>
            <div class="mb-4">
                <span class="text-sm font-medium text-gray-500 block">department</span>
                <span class="text-sm text-gray-900 block">Engineering</span>
            </div>
            <div class="mb-4">
                <span class="text-sm font-medium text-gray-500 block">company</span>
                <span class="text-sm text-gray-900 block">Tech Corp</span>
            </div>
            <div class="mb-4">
                <span class="text-sm font-medium text-gray-500 block">manager</span>
                <span class="text-sm text-gray-900 block">Jane Smith</span>
            </div>
            <div class="mb-4">
                <span class="text-sm font-medium text-gray-500 block">employeeID</span>
                <span class="text-sm text-gray-900 block">123456</span>
            </div>
        </div>
    </div> -->
</div>