@props(['playlist', 'showTypeBadge' => false])

@once
<style>
.pl-visibility-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
    pointer-events: none;
}
</style>
@endonce

@php $pl = $playlist; @endphp

<div class="yt-video-card">
    <a href="{{ route('playlists.show', $pl->id) }}">
        <div class="yt-video-thumb">
            <img src="{{ $pl->thumbnail_url }}" alt="{{ $pl->name }}" loading="lazy">
            <div class="pl-count-badge">
                <i class="bi bi-collection-play-fill"></i>
                {{ $pl->videos_count }}
            </div>
            @if($showTypeBadge)
                <span class="feed-pl-type-badge">
                    <i class="bi bi-collection-play-fill"></i> PLAYLIST
                </span>
            @endif
            @if($pl->visibility === 'private')
                <span class="pl-visibility-badge"><i class="bi bi-lock-fill"></i> Private</span>
            @elseif($pl->visibility === 'unlisted')
                <span class="pl-visibility-badge"><i class="bi bi-link-45deg"></i> Unlisted</span>
            @endif
        </div>
    </a>
    <div class="yt-video-info">
        <div class="yt-channel-icon"
             style="cursor:pointer;"
             onclick="window.location.href='{{ $pl->user ? route('channel', $pl->user->channel) : '#' }}'">
            @if($pl->user?->avatar_url)
                <img src="{{ $pl->user->avatar_url }}" alt="{{ $pl->user->name }}"
                     style="width:100%;height:100%;object-fit:cover;border-radius:50%;">
            @elseif($pl->user)
                <span style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;">
                    {{ mb_strtoupper(mb_substr($pl->user->name, 0, 1)) }}
                </span>
            @endif
        </div>
        <div class="yt-video-details">
            <h3 class="yt-video-title">
                <a href="{{ route('playlists.show', $pl->id) }}">{{ $pl->name }}</a>
            </h3>
            @if($pl->user)
                <a href="{{ route('channel', $pl->user->channel) }}" class="yt-channel-name"
                   onclick="event.stopPropagation()">{{ $pl->user->name }}</a>
            @endif
            <div class="yt-video-meta">
                <span class="yt-type-label" style="color:#a78bfa;">
                    <i class="bi bi-collection-play-fill"></i>
                    Playlist
                </span>
                &nbsp;·&nbsp;
                {{ number_format($pl->view_count) }} {{ Str::plural('view', $pl->view_count) }} · {{ $pl->created_at->diffForHumans() }}
            </div>
        </div>
    </div>
</div>