{% set primaryMedia = replay.content %}
{% set plainDescription = event.description|striptags|trim %}
{% set shortDescription = plainDescription|length > 220 ? plainDescription|slice(0, 220) ~ '…' : plainDescription %}

<article class="cba-replay-feature">
    <div class="cba-replay-media">
        {% if primaryMedia.type.id == 11 %}
            <video controls preload="metadata" playsinline width="100%" height="auto" poster="{{ primaryMedia.image }}">
                <source src="{{ primaryMedia.file }}" type="video/mp4">
                <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a
                    <a href="https://videojs.com/html5-video-support/" target="_blank">web browser that supports HTML5 video</a>
                </p>
            </video>
        {% elseif primaryMedia.type.id == 10 %}
            <div class="cba-replay-audio-cover" style="background-image: url('../..{{ primaryMedia.image }}');">
                <div class="cba-replay-audio-overlay"></div>
                <div class="cba-replay-audio-player">
                    <audio controls preload="none">
                        <source src="{{ primaryMedia.file }}" type="audio/mp3">
                    </audio>
                </div>
            </div>
        {% elseif primaryMedia.image %}
            <img src="{{ primaryMedia.image }}" alt="{{ primaryMedia.name ?: event.name }}" loading="lazy">
        {% else %}
            <div class="cba-replay-fallback">
                <i class="fas fa-play-circle"></i>
            </div>
        {% endif %}
    </div>

    <div class="cba-replay-body">
        <div class="cba-replay-meta">
            <span class="cba-replay-chip">
                <i class="fas fa-play-circle"></i>
                Replay
            </span>

            {% if event.startDayAt %}
                <span class="cba-replay-date">
                    <i class="far fa-calendar-alt"></i>
                    {{ event.startDayAt|date('d/m/Y', 'Europe/Paris') }}
                </span>
            {% endif %}
        </div>

        <h3 class="cba-replay-title">{{ primaryMedia.name ?: event.name }}</h3>

        <div class="cba-replay-subtitle">
            Atelier - {{ event.name }}
        </div>

        <p class="cba-replay-description">
            {{ shortDescription }}
        </p>

        <div class="cba-replay-actions">
            <a href="{{ path('app_atelier_detail', {'id': event.id}) }}" class="cba-btn-ghost">
                <i class="fas fa-eye"></i>
                Voir l’atelier
            </a>
        </div>
    </div>
</article>