{#
  Composant réutilisable — miniature YouTube avec bouton play
  Usage : {{ include('exercise/_video_thumbnail.html.twig', { exercise: exercise }) }}
#}
{% if exercise.videoUrl %}
    {% set videoId = exercise.videoUrl | split('v=') | last | split('&') | first %}
    <a href="{{ exercise.videoUrl }}"
       target="_blank"
       rel="noopener noreferrer"
       class="video-thumbnail"
       title="Voir la technique : {{ exercise.name }}">

        <img src="https://img.youtube.com/vi/{{ videoId }}/hqdefault.jpg"
             alt="Tutoriel {{ exercise.name }}"
             loading="lazy">

        <span class="video-play-btn" aria-hidden="true">
            <svg viewBox="0 0 68 48" xmlns="http://www.w3.org/2000/svg">
                <path class="play-bg" d="M66.5 7.7a8.5 8.5 0 0 0-6-6C55.8.5 34 .5 34 .5S12.2.5 7.5 1.7a8.5 8.5 0 0 0-6 6C.3 11.4 0 24 0 24s.3 12.6 1.5 16.3a8.5 8.5 0 0 0 6 6C12.2 47.5 34 47.5 34 47.5s21.8 0 26.5-1.2a8.5 8.5 0 0 0 6-6C67.7 36.6 68 24 68 24s-.3-12.6-1.5-16.3z"/>
                <path class="play-arrow" d="M45 24L27 14v20z"/>
            </svg>
        </span>
    </a>

    <style>
        .video-thumbnail {
            position: relative;
            display: block;
            width: 100%;
            max-width: 480px;
            border-radius: 10px;
            overflow: hidden;
            margin: 12px 0;
            text-decoration: none;
        }
        .video-thumbnail img {
            width: 100%;
            height: auto;
            display: block;
            transition: opacity .2s;
        }
        .video-thumbnail:hover img {
            opacity: .85;
        }
        .video-play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 68px;
            height: 48px;
            pointer-events: none;
        }
        .play-bg   { fill: #ff0000; opacity: .85; }
        .play-arrow{ fill: #fff; }
        .video-thumbnail:hover .play-bg { opacity: 1; }
    </style>
{% endif %}