{{--
    Partial: chamado request header
    Variáveis esperadas: $chamado (Chamado model)
--}}
@php
    $infoNome = $chamado->user?->first()?->info?->name ?? null;
    $infoFilial = $chamado->locations?->comment ?? null;
    $infoSetor = $chamado->setor?->name ?? null;
    $infoCategoria =
        $chamado->payload['form_label'] ??
        ($chamado->category
            ? $chamado->category->name
            : null);
    $fotoUrl = \App\Helpers\UserHelper::photoUrl($chamado->user?->first()?->info?->photo);
    $iniciais = $infoNome
        ? collect(explode(' ', trim($infoNome)))
            ->take(2)
            ->map(fn($p) => mb_strtoupper(mb_substr($p, 0, 1)))
            ->implode('')
        : '?';
@endphp

<div class="conteudo-payload-card"
    style="margin: 1em 0 1em 0;padding:.85rem 1.1rem;background:var(--dm-surface-2);border-bottom:1px solid var(--dm-border);display:flex;align-items:center;gap:.85rem;">

    {{-- Foto com fallback para iniciais --}}
    <div style="flex-shrink:0;width:2.6rem;height:2.6rem;position:relative;">
        <img src="{{ $fotoUrl }}" width="42" height="42"
            style="border-radius:50%;object-fit:cover;border:2px solid var(--dm-border);display:block;"
            onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
        <div
            style="display:none;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#4f8ef7 0%,#7da8f5 100%);align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:#fff;position:absolute;inset:0;">
            {{ $iniciais }}</div>
    </div>

    <div style="flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:.6rem;">

        {{-- Esquerda: label + nome + filial/setor --}}
        <div style="min-width:0;">
            <div
                style="font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.65px;color:var(--dm-text-muted);margin-bottom:.18rem;">
                Solicitante
            </div>
            <div data-copy-role="solicitante"
                style="font-size:.93rem;font-weight:700;color:var(--dm-text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                {{ $infoNome ?? '—' }}
            </div>

        </div>

        {{-- Direita: tipo badge + categoria --}}
        <div style="text-align:right;flex-shrink:0;max-width:45%;">

            @if ($infoCategoria)
                <div data-copy-role="categoria"
                    style="font-size:.77rem;color:var(--dm-text);font-weight:500;margin-top:.3rem;word-break:break-word;line-height:1.3;">
                    {{ $infoCategoria }}
                </div>
            @endif
            @if ($infoFilial || $infoSetor)
                <div style="display:flex;flex-wrap:wrap;gap:.15rem .5rem;margin-top:.25rem;">
                    @if ($infoFilial)
                        <span data-copy-role="filial"
                            style="font-size:.77rem;display:inline-flex;align-items:center;gap:.2rem;">
                            <i class="bi bi-geo-alt-fill"
                                style="color:#f0b429;font-size:.65rem;"></i>{{ $infoFilial }}
                        </span>
                    @endif
                    @if ($infoSetor)
                        <span data-copy-role="setor"
                            style="font-size:.77rem;display:inline-flex;align-items:center;gap:.2rem;">
                            <i class="bi bi-building" style="font-size:.65rem;"></i>{{ $infoSetor }}
                        </span>
                    @endif
                </div>
            @endif
        </div>

    </div>
</div>