{{-- Un tutorial, en la lista de su versión.

     Lo propio de este tipo es **la plataforma y el identificador del vídeo**. Y con la
     miniatura de YouTube se ve si el `videoid` es el correcto: es el único campo que puede
     estar mal escrito y romper el tutorial en el Moodle del cliente **sin que nada falle
     aquí**. --}}
<div class="flex min-w-0 items-start gap-3">
    @php
        $esYoutube = $elemento->platform === 'youtube';
        // La miniatura la sirve YouTube por id, así que no hace falta llamar a su API. En
        // Vimeo sí haría falta, y no merece una petición por fila.
        $miniatura = $esYoutube && $elemento->videoid
            ? 'https://i.ytimg.com/vi/' . $elemento->videoid . '/default.jpg'
            : null;
    @endphp

    @if ($miniatura)
        <img src="{{ $miniatura }}" alt="" referrerpolicy="no-referrer"
             class="h-10 w-[53px] flex-none rounded-lg object-cover"
             style="border:1px solid var(--border-subtle);">
    @else
        <span class="flex h-10 w-[53px] flex-none items-center justify-center rounded-lg"
              style="background:var(--surface-sunken); color:var(--text-subtle);">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>
        </span>
    @endif

    <div class="min-w-0">
        <div class="truncate font-semibold" style="color:var(--text-strong);">{{ $elemento->title }}</div>

        <div class="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px]" style="color:var(--text-muted);">
            <span>{{ $esYoutube ? 'YouTube' : 'Vimeo' }}</span>
            <span style="color:var(--border-strong);">·</span>
            <span class="truncate" style="font-family:ui-monospace,monospace;">{{ $elemento->videoid ?: '—' }}</span>

            {{-- El enlace al vídeo real: es la única forma de comprobar que el id es el que
                 se cree. Se abre fuera, que es donde vive. --}}
            @if ($elemento->videoid)
                <a href="{{ $esYoutube ? 'https://www.youtube.com/watch?v=' . $elemento->videoid : 'https://vimeo.com/' . $elemento->videoid }}"
                   target="_blank" rel="noopener"
                   class="font-semibold" style="color:var(--text-link);">Comprobar</a>
            @endif
        </div>

        @if (empty($elemento->videoid))
            <div class="mt-0.5 text-[11.5px] font-semibold" style="color:var(--danger-500);">
                Sin identificador de vídeo: en la plataforma del cliente no se verá nada
            </div>
        @endif
    </div>
</div>