@props([
    'id',
    'videoId',
    'placeholderId',
    'badgeText' => '',
    'badgeId' => null,
    'borderColor' => 'border-[#1b2233]',
    'showZoom' => false,
    'showFullscreen' => false,
    'initials' => 'CD',
    'avatarCircleId' => null,
    'avatarNameId' => null,
    'avatarTitle' => 'Video Stream',
    'zoomInFn' => null,
    'zoomOutFn' => null,
    'zoomResetFn' => null,
    'fullscreenFn' => null,
    'containerId' => null,
    'focused' => false,
])

<div id="{{ $id }}" {{ $attributes->merge(['class' => 'video-tile relative aspect-[16/11] bg-[#0d1220] border rounded-[10px] overflow-hidden flex flex-col items-center justify-center transition-all ' . ($focused ? 'border-[rgba(75,130,247,0.35)] shadow-[0_0_0_1px_rgba(75,130,247,0.35)]' : 'border-[#1b2233]')]) }}>
    @if($showZoom || $showFullscreen)
        <div class="tile-tools absolute top-2 right-2 z-20 flex gap-1">
            @if($showZoom)
                <button type="button" onclick="{{ $zoomInFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Zoom In"><i class="fa-solid fa-magnifying-glass-plus"></i></button>
                <button type="button" onclick="{{ $zoomOutFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Zoom Out"><i class="fa-solid fa-magnifying-glass-minus"></i></button>
                <button type="button" onclick="{{ $zoomResetFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Reset Zoom"><i class="fa-solid fa-rotate-left"></i></button>
            @endif
            @if($showFullscreen)
                <button type="button" onclick="{{ $fullscreenFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Fullscreen"><i class="fa-solid fa-expand"></i></button>
            @endif
        </div>
    @endif

    @if($containerId)
        <div id="{{ $containerId }}" class="w-full h-full overflow-auto">
            <video id="{{ $videoId }}" autoplay playsinline class="w-full h-full object-contain origin-top-left transition-transform duration-200"></video>
        </div>
    @else
        <video id="{{ $videoId }}" autoplay playsinline class="w-full h-full object-cover origin-center transition-transform duration-200"></video>
    @endif

    <div id="{{ $placeholderId }}" class="absolute inset-0 flex flex-col items-center justify-center bg-[#0d1220]/95 text-slate-400 text-xs z-10 p-3">
        <div id="{{ $avatarCircleId }}" class="av w-[58px] h-[58px] rounded-full bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-white font-semibold text-[19px] mb-2.5 shadow-md shadow-[#4b82f7]/20">
            {{ $initials }}
        </div>
        <div id="{{ $avatarNameId }}" class="name text-[13.5px] font-semibold text-white">{{ $avatarTitle }}</div>
        <div class="status text-[11.5px] text-[#5b637a] mt-1 text-center px-3">
            {{ $slot->isNotEmpty() ? $slot : "Waiting for candidate&hellip;" }}
        </div>
    </div>

    <span class="tile-tag absolute left-2.5 bottom-2.5 text-[10px] font-semibold tracking-wide px-2 py-1 rounded-md bg-black/35 text-slate-400 border border-[#1b2233] z-10">
        {{ $badgeText }}
    </span>
</div>