@php
    $rows = $qualities['rows'] ?? null;

    $colors = [
        'mutable' => '#F2B24A',
        'cardinal' => '#49535c',
        'fixed' => '#4AA3DF',
    ];

    // ✅ NİTELİK SEMBOLLERİ (Unicode Mantığı)
    // HamburgSymbols fontunda nitelikler (C, F, M) gezegenlerle çakıştığı için
    // (C=Ceres, F=Zeus, M=Chiron/Vertex) evrensel semboller kullanıyoruz.
    $qualitySymbols = [
        'mutable' => '≈', // Değişken (Dalgalı - Esnek)
        'cardinal' => '⋀', // Öncü (Yukarı Yön - Başlatan)
        'fixed' => '□', // Sabit (Kare - Durağan)
    ];

    $order = ['mutable', 'cardinal', 'fixed'];
@endphp

{{-- <div class="chart-badge">Nitelikler</div> --}}

@if (!$rows)
    <div class="text-muted small p-2">{{ t('no-qualities-data') }}</div>
@else
    <div class="panel-mini-vchart">
        @foreach ($order as $key)
            @php
                $r = $rows[$key] ?? null;
                if (!$r) {
                    continue;
                }
                $fill = $colors[$key] ?? '#479483';
                $pct = (int) ($r['pct'] ?? 0);
                $cnt = (int) ($r['count'] ?? 0);
                $sym = $qualitySymbols[$key] ?? '?';
            @endphp

            <div class="panel-mini-vchart__item">
                <div class="panel-mini-vchart__count" title="{{ $r['label'] ?? $key }}">{{ $cnt }}</div>

                <div class="vchart-wrap panel-mini-vchart__bar" title="{{ $r['label'] ?? $key }}">
                    <span class="vchart-bar"
                        style="height: {{ $pct }}%; background: {{ $fill }};"></span>
                </div>

                <div class="panel-mini-vchart__symbol" style="color: {{ $fill }};" title="{{ $r['label'] ?? $key }}">
                    {{ $sym }}
                </div>
            </div>
        @endforeach
    </div>
@endif