{{-- Grilla de links para vistas públicas. No expone personal_note ni datos del usuario. --}}
@if($links->isEmpty())
    <div class="text-center py-16 text-gray-400 dark:text-gray-500">
        <i class="fa-solid fa-link-slash text-3xl mb-3 block"></i>
        No hay enlaces públicos aquí.
    </div>
@else
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
    @foreach($links as $link)
    <a href="{{ $link->url }}" target="_blank" rel="noopener noreferrer"
       class="group flex flex-col rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden hover:shadow-md hover:border-primary/40 transition-all">

        {{-- Imagen o color stripe --}}
        @if($link->image_url)
            <div class="h-36 overflow-hidden bg-gray-100 dark:bg-gray-700">
                <img src="{{ $link->image_url }}" alt="{{ $link->display_title }}"
                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
            </div>
        @else
            <div class="h-2 bg-gradient-to-r from-primary to-violet-400"></div>
        @endif

        <div class="flex flex-col flex-1 p-4 gap-2">
            {{-- Favicon + dominio --}}
            <div class="flex items-center gap-2 text-xs text-gray-400 dark:text-gray-500">
                @if($link->favicon_url)
                    <img src="{{ $link->favicon_url }}" alt="" class="w-4 h-4 rounded-sm">
                @endif
                <span class="truncate">{{ $link->domain }}</span>
            </div>

            {{-- Título --}}
            <p class="font-semibold text-sm text-gray-900 dark:text-white line-clamp-2 group-hover:text-primary transition-colors">
                {{ $link->display_title ?? $link->url }}
            </p>

            {{-- Descripción --}}
            @if($link->description)
                <p class="text-xs text-gray-500 dark:text-gray-400 line-clamp-2">{{ $link->description }}</p>
            @endif

            {{-- Tags --}}
            @if($link->tags->count())
                <div class="flex flex-wrap gap-1 mt-auto pt-1">
                    @foreach($link->tags->take(4) as $tag)
                        <span class="text-xs px-2 py-0.5 rounded-full font-medium"
                              style="background-color: {{ $tag->color }}22; color: {{ $tag->color }}">
                            {{ $tag->name }}
                        </span>
                    @endforeach
                    @if($link->tags->count() > 4)
                        <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-400">
                            +{{ $link->tags->count() - 4 }}
                        </span>
                    @endif
                </div>
            @endif
        </div>

        {{-- Indicador de tipo --}}
        @if($link->content_type)
            <div class="px-4 pb-3">
                <span class="text-xs bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 px-2 py-0.5 rounded capitalize">
                    {{ $link->content_type }}
                </span>
            </div>
        @endif
    </a>
    @endforeach
</div>
@endif