<div class="space-y-1">
    @if (($reference['isLinkable'] ?? false) === true && filled(data_get($reference, 'linkTarget.url')))
        <a
            href="{{ data_get($reference, 'linkTarget.url') }}"
            class="font-medium text-primary-600 hover:text-primary-500 hover:underline dark:text-primary-400"
        >
            {{ $reference['primaryLabel'] ?? 'Reference' }}
        </a>
    @else
        <div class="font-medium text-gray-900 dark:text-white">
            {{ $reference['primaryLabel'] ?? 'Reference' }}
        </div>
    @endif

    <div class="flex flex-wrap items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
        @if (filled($reference['secondaryLabel'] ?? null))
            <span>{{ $reference['secondaryLabel'] }}</span>
        @endif

        @if ((data_get($reference, 'showStateBadge', false)) === true)
            <x-filament::badge
                :color="data_get($reference, 'stateColor', 'gray')"
                :icon="data_get($reference, 'stateIcon')"
                size="sm"
            >
                {{ data_get($reference, 'stateLabel', 'Unknown') }}
            </x-filament::badge>
        @endif

        @if (filled(data_get($reference, 'technicalDetail.displayId')))
            <span>ID {{ data_get($reference, 'technicalDetail.displayId') }}</span>
        @endif
    </div>
</div>
