{% set state = completedState|default({'isCompleted': false, 'recordId': null}) %}
{% set primaryMedia = null %}
{% set attachments = [] %}

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

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

<article class="cba-content-card" id="post-{{ item.id }}">
    <div class="cba-content-card-media">
        {% if primaryMedia %}
            {% if primaryMedia.type.id == 10 %}
                <div class="cba-audio-cover" style="background-image: url('../..{{ primaryMedia.image }}');">
                    <div class="cba-audio-overlay"></div>
                    <div class="cba-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 ? primaryMedia.image : item.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>
            {% else %}
                <img src="{{ item.image }}" alt="{{ item.name }}" loading="lazy">
            {% endif %}
        {% elseif item.image %}
            <img src="{{ item.image }}" alt="{{ item.name }}" loading="lazy">
        {% else %}
            <div class="cba-content-fallback">
                <i class="fas fa-play-circle"></i>
            </div>
        {% endif %}
    </div>

    <div class="cba-content-card-body">
        <div class="cba-content-card-top">
            {% if state.isCompleted and state.recordId %}
                <a class="cba-complete-btn is-done" href="{{ path('delete_completed_content', {'id': state.recordId }) }}">
                    <i class="fas fa-check-circle"></i>
                    Terminé
                </a>
            {% else %}
                <a class="cba-complete-btn" href="{{ path('add_completed_content', {'id': item.id }) }}">
                    <i class="far fa-circle"></i>
                    Marquer comme terminé
                </a>
            {% endif %}
        </div>

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

        <div class="cba-content-card-text">
            {{ item.description|raw }}
        </div>

        {% if attachments|length > 0 %}
            <div class="cba-content-attachments">
                <div class="cba-content-attachments-title">Ressources</div>

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