{% set primaryMedia = null %}
{% set attachments = [] %}
{% set primaryResource = null %}
{% set thematic = item.getThematic is defined ? item.getThematic() : null %}
{% set publishedAt = item.publishedAt ?? item.createdAt ?? null %}

{% for newsContent in item.cbaNewsContents %}
    {% if primaryMedia is null and newsContent.media.principal %}
        {% set primaryMedia = newsContent.media %}
    {% endif %}

    {% if not newsContent.media.principal %}
        {% set attachments = attachments|merge([newsContent.media]) %}
    {% endif %}
{% endfor %}

{% if primaryMedia and primaryMedia.type.id not in [10, 11] and primaryMedia.file %}
    {% set primaryResource = primaryMedia %}
{% endif %}

<article class="cba-library-card">
    <div class="cba-library-card-media">
        {% if primaryMedia %}
            {% if primaryMedia.type.id == 10 %}
                <div class="cba-library-audio-cover" style="background-image: url('../..{{ primaryMedia.image }}');">
                    <div class="cba-library-audio-overlay"></div>
                    <div class="cba-library-audio-player">
                        <audio controls preload="none">
                            <source src="{{ primaryMedia.file }}" type="audio/mp3">
                        </audio>
                    </div>
                </div>
            {% elseif 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.image %}
                <img src="{{ primaryMedia.image }}" alt="{{ item.title }}" loading="lazy">
            {% else %}
                <div class="cba-library-media-fallback">
                    <i class="fas fa-book-open"></i>
                </div>
            {% endif %}
        {% else %}
            <div class="cba-library-media-fallback">
                <i class="fas fa-book-open"></i>
            </div>
        {% endif %}
    </div>

    <div class="cba-library-card-body">
        <div class="cba-library-card-meta">
            {% if thematic %}
                <span class="cba-library-chip">
                    <i class="fas fa-tag"></i>
                    {{ thematic.name }}
                </span>
            {% endif %}

            {% if publishedAt %}
                <span class="cba-library-date">
                    <i class="far fa-calendar-alt"></i>
                    {{ publishedAt|date('d/m/Y') }}
                </span>
            {% endif %}
        </div>

        <h3 class="cba-library-card-title">{{ item.title }}</h3>

        <p class="cba-library-card-text">
            {{ item.description|striptags|u.truncate(180, '…') }}
        </p>

        {% if primaryResource %}
            <div class="cba-library-primary-action">
                <a href="{{ primaryResource.file }}" class="cba-library-main-link" target="_blank" rel="noopener">
                    <i class="fas fa-arrow-up-right-from-square"></i>
                    Ouvrir la ressource principale
                </a>
            </div>
        {% endif %}

        {% if attachments|length > 0 %}
            <div class="cba-library-attachments">
                <div class="cba-library-attachments-title">Ressources associées</div>

                {% for media in attachments %}
                    <a href="{{ media.file }}" class="cba-library-attachment-link" target="_blank" rel="noopener">
                        <i class="fas fa-paperclip"></i>
                        {{ media.name }}
                    </a>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</article>