@foreach ($videos as $video)
    @php
        // Determinar título: usar título do artigo se existir, senão usar título do vídeo
        $displayTitle = $video['article'] ? $video['article']->title : $video['title'];
        $articleUrl = $video['article'] && $video['article']->slug ? '/' . $video['article']->slug : '#';
    @endphp
    <div class="video-card">
        <a href="{{ $articleUrl }}" class="video-card-link">
            <div class="video-card-thumbnail">
                @if ($video['thumbnail'])
                    <img 
                        src="{{ $video['thumbnail'] }}" 
                        alt="{{ $displayTitle }}"
                        loading="lazy"
                        onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
                    >
                @endif
                <div class="video-card-placeholder" style="{{ $video['thumbnail'] ? 'display: none;' : '' }}">
                    <i class="jli-video"></i>
                </div>
                @if ($video['duration'])
                    <div class="video-card-duration">
                        {{ gmdate('H:i:s', $video['duration']) }}
                    </div>
                @endif
                <div class="video-card-play-overlay">
                    <i class="jli-play"></i>
                </div>
            </div>
            <div class="video-card-content">
                <h3 class="video-card-title">{{ $displayTitle }}</h3>
                @if ($video['caption'])
                    <p class="video-card-caption">{{ Str::limit($video['caption'], 100) }}</p>
                @endif
                @if ($video['description'])
                    <p class="video-card-description">{{ Str::limit($video['description'], 120) }}</p>
                @endif
                <div class="video-card-meta">
                    <span class="video-card-provider">{{ $video['provider'] }}</span>
                    @if ($video['article'])
                        <span class="video-card-article">
                            <i class="jli-document"></i> Artigo relacionado
                        </span>
                    @endif
                </div>
            </div>
        </a>
    </div>
@endforeach