@props(['playlist'])

@php
    $pl        = $playlist;
    $firstVid  = $pl->videos->first();
    $plUrl     = $firstVid
        ? route('videos.show', $firstVid) . '?playlist=' . $pl->share_token
        : route('playlists.show', $pl->id);
@endphp

@once
<style>
.pl-count-badge {
    position: absolute;
    inset: 0 0 0 auto;
    width: 72px;
    background: rgba(0,0,0,.78);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    pointer-events: none;
    z-index: 3;
}
.pl-count-badge i { font-size: 20px; }
.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;
    z-index: 3;
}
.pl-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,.82);
    color: #a78bfa;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 3;
}
</style>
@endonce

<div class="yt-video-card">
    <a href="{{ $plUrl }}">
        <div class="yt-video-thumb">
            <img src="{{ $pl->thumbnail_url }}" alt="{{ $pl->name }}" loading="lazy" decoding="async" onload="this.classList.add('loaded');this.closest('.yt-video-thumb').classList.add('loaded')">
            <div class="pl-count-badge">
                <i class="bi bi-collection-play-fill"></i>
                {{ $pl->videos_count }}
            </div>
            <span class="pl-type-badge">
                <i class="bi bi-collection-play-fill"></i> Playlist
            </span>
            @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="{{ $plUrl }}">{{ $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>