<div class="rounded-2xl p-4 ring-1 {{ $panel }}">
    <div class="flex items-center gap-3">
        <img src="{{ $avatarUrl }}" alt="{{ $user->name }}" class="h-14 w-14 rounded-2xl object-cover">
        <div class="min-w-0">
            <p class="text-[10px] font-black uppercase {{ $label }}">Trader</p>
            <h1 class="text-xl font-black leading-tight">{{ $user->name }}</h1>
        </div>
    </div>
    <div class="mt-4 rounded-2xl p-3 {{ $isLight ? 'bg-blue-600 text-white' : 'bg-white text-slate-950' }}">
        <p class="text-[10px] font-black uppercase opacity-80">Discipline Score</p>
        <p class="text-4xl font-black">{{ $report['discipline']['score'] }}%</p>
    </div>
    <div class="mt-3 grid grid-cols-2 gap-2">
        <div class="rounded-xl p-2 {{ $softPanel }}"><p class="text-[9px] font-black uppercase {{ $label }}">Trades</p><p class="text-xl font-black">{{ $report['totalTrades'] }}</p></div>
        <div class="rounded-xl p-2 {{ $softPanel }}"><p class="text-[9px] font-black uppercase {{ $label }}">Win Rate</p><p class="text-xl font-black">{{ $report['winRate'] }}%</p></div>
    </div>
</div>
