@php
    use App\Support\SymbolPresentation;
    $baseIc = SymbolPresentation::baseIconPair($symbol);
    $quoteIc = SymbolPresentation::quoteIconPair($symbol);
    $pair = SymbolPresentation::pairLabel($symbol);
    $price = (float) ($symbol->latestPrice?->price ?? 0);
    $rawChg = $symbol->latestPrice?->change_24h_pct;
    $chg = $rawChg !== null ? (float) $rawChg : null;
    $hasQuote = ! empty($symbol->quote_currency);
    $showSubtitle = $pair !== (string) ($symbol->name ?? '') && $symbol->name;
@endphp
<div class="wl-pair-left">
    <div class="pair-avatar-stack {{ $hasQuote ? '' : 'pair-avatar-stack--single' }}">
        @php $baseIsImg = str_starts_with($baseIc[0], 'img:'); @endphp
        <div class="pair-avatar pair-avatar--base" style="background: {{ ($baseIsImg || $baseIc[0]) ? $baseIc[1].'2a' : 'var(--bg-tertiary)' }}; border-color: var(--bg-card)">
            @if($baseIsImg)
                @php $baseImgUrl = substr($baseIc[0], 4); @endphp
                <img src="{{ $baseImgUrl }}" width="15" height="15" alt=""
                     style="display:block;border-radius:50%;object-fit:contain"
                     onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                <span class="pair-avatar-mono" style="display:none;color:{{ $baseIc[1] }}">{{ SymbolPresentation::monogramLetters($symbol, false) }}</span>
            @elseif($baseIc[0] !== '')
                <i class="{{ $baseIc[0] }}" style="color:{{ $baseIc[1] }};font-size:.72rem"></i>
            @else
                <span class="pair-avatar-mono" style="color:{{ $baseIc[1] }}">{{ SymbolPresentation::monogramLetters($symbol, false) }}</span>
            @endif
        </div>
        @if($hasQuote)
        <div class="pair-avatar pair-avatar--quote" style="background: {{ $quoteIc[0] ? $quoteIc[1].'2a' : 'var(--bg-tertiary)' }}; border-color: var(--bg-card)">
            @if(str_starts_with($quoteIc[0], 'img:'))
                @php $quoteImgUrl = substr($quoteIc[0], 4); @endphp
                <img src="{{ $quoteImgUrl }}" width="13" height="13" alt=""
                     style="display:block;border-radius:50%;object-fit:contain"
                     onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                <span class="pair-avatar-mono" style="display:none;color:{{ $quoteIc[1] }}">{{ SymbolPresentation::monogramLetters($symbol, true) }}</span>
            @elseif($quoteIc[0] !== '')
                <i class="{{ $quoteIc[0] }}" style="color:{{ $quoteIc[1] }};font-size:.65rem"></i>
            @else
                <span class="pair-avatar-mono" style="color:{{ $quoteIc[1] }}">{{ SymbolPresentation::monogramLetters($symbol, true) }}</span>
            @endif
        </div>
        @endif
    </div>
    <div class="wl-pair-texts">
        <div class="wl-pair-ticker">{{ $pair }}</div>
        @if($showSubtitle)
            <div class="wl-pair-name">{{ $symbol->name }}</div>
        @endif
    </div>
</div>
<div class="wl-pair-mid text-end">
    <div class="wl-pair-price tabular-nums"
         data-dashboard-market-price="{{ $symbol->id }}">{{ $price > 0 ? number_format($price, $symbol->decimal_places) : '—' }}</div>
    <div class="wl-pair-pct small tabular-nums {{ SymbolPresentation::changeTextClass($chg) }}"
         data-dashboard-market-change="{{ $symbol->id }}">
        {{ SymbolPresentation::formatChange24h($chg) }}
    </div>
</div>