{# intérieur de card #}
{% set with_selection = false %}
{% if selectable is defined %}
    {% if selectable %}
        {% set with_selection = true %}
    {% endif %}
{% endif %}
{% set show_buttons = false %}
{% if with_buttons is defined %}
    {% if with_buttons %}
        {% set show_buttons = true %}
    {% endif %}
{% endif %}
{% if not simple_vue is defined %}
    {% set simple_vue = false %}
{% endif %}

<div class="col-xs-12 col-lg-6 col-xl-3 d-flex mb-3 ">
    <div class="w-100 card {% if with_selection %}media_selectable{% endif %} mediapreview ">
        {% if not simple_vue %}
            <div class="card-header">
                {% if media.categorie %}
                    {#
                    {{ media.categorie.libelle }} /
                    #}
                {% endif %}
                <span title="{{ media.libelle }}">
            {% if media.libelle | length > 16 %}
                {{ media.libelle[:15] }}...
            {% else %}
                {{ media.libelle }}
            {% endif %}
            </span>

                {% if show_buttons %}
                    {# puisque les média ne sont plus accessibles depuis courses_mediacategorie,
                     # leur mettre les boutons d'action ici, si le contexte le permet (a priori, galerie pleine page)
                     #}

                    <div class="card-header-actions">
                        <ul class="d-flex list-unstyled m-0">

                            {# {% if est_superviseur %} #}
                            <li class="mr-1">
                                <div class="btn btn-sm btn-block btn-primary popin"
                                     title="Modifier"
                                     data-title="Modification du média ''{{ media.libelle }}''"
                                     data-href="{{ path('courses_media_edit', { 'id': media.id })|raw }}">
                                    <i class="fa fa-edit"></i>
                                </div>
                            </li>
                            {# {% endif %} #}
                            <li>
                                {% if media.active %}
                                    <div class="btn btn-sm btn-block btn-dark btn-media-delete"
                                         title="Désactiver"
                                         data-href="{{ path('courses_media_delete', { 'id': media.id })|raw }}">
                                        <i class="fa fa-trash"></i>
                                    </div>
                                {% else %}
                                    <div class="btn btn-sm btn-block btn-warning ajax"
                                         title="Réactiver"
                                         data-href="{{ path('courses_media_active', { 'id': media.id })|raw }}">
                                        <i class="fa fa-recycle"></i>
                                    </div>
                                {% endif %}
                            </li>
                        </ul>
                    </div>
                {% endif %}
            </div>
        {% endif %} {# fin si pas simple vue #}
        <div class="card-body embed-responsive embed-responsive-16by9">
            <div class="embed-responsive-item d-flex align-items-center justify-content-center">
                {% if media.codeintegration %}

                    {{ media.codeintegration|raw }}

                {% else %}
                    {% if media.type == 'texte' %}
                        {{ media.texte }}

                        {% if media.fichier %}
                            <h4>Il y a un problème avec le format/encodage de ce fichier :</h4>
                            <a href="http://mime.ritey.com/">Voyez par vous-même</a>
                            <a class="btn" target="_blank"
                               href="{{ asset(media_dossier_asset ~ '/' ~ media.fichier) }}">
                                ouvrir le fichier dans un nouvel onglet
                            </a>
                        {% endif %}

                    {% elseif media.type == 'image' %}
                        <img src="{{ asset(media_dossier_asset ~ '/' ~ media.fichier) }}" alt="image" />
                    {% elseif media.type == 'son' %}
                        <audio controls>
                            <source src="{{ asset(media_dossier_asset ~ '/' ~ media.fichier) }}" type="audio/mp3">
                            Your browser does not support the audio element.
                        </audio>
                    {% elseif media.type == 'vidéo' %}

                        <video controls >
                            <source data-lightbox
                                    preload="none"
                                    src="{{ asset(media_dossier_asset ~ '/' ~ media.fichier) }}">
                            Your browser does not support the video element.
                        </video>

                    {% else %}
                        <a class="btn" target="_blank"
                           href="{{ asset(media_dossier_asset ~ '/' ~ media.fichier) }}">
                            ouvrir le fichier dans un nouvel onglet
                        </a>
                    {% endif %}
                {% endif %}
            </div>
        </div>
        {% if not simple_vue %}
            <div class="card-footer">

                {# toujours utiliser title, au cas ou le viewport aurait une dimension pénible #}
                <span title="{{ media.texte }}">
                {% if media.texte | length > 16 %}
                    Descr. : {{ media.texte[:15] }}...
                {% else %}
                    Descr. : {{ media.texte }}
                {% endif %}
                </span>
                <br/>
                <span title="{{ media.source }}">
                {% if media.source | length > 16 %}
                    Source : {{ media.source[:15] }}...
                {% else %}
                    Source : {{ media.source }}
                {% endif %}
                </span>

                {% if with_selection %}
                    <div hidden="hidden">
                        <input type="radio" id="select_media_{{ media.id }}" name="select_media">
                    </div>
                {% endif %}
            </div>
        {% endif %}

    </div>
</div>