{% trans_default_domain 'admin' %}

{% if entity.mediaRelations|length > 0 %}

    {% set mediasByPosition = entity.mediaRelations|mediasIdsByPosition %}

    <h4 class="card-subtitle mb-4"><i class="fal fa-photo-video mr-2"></i>{{ "Médias"|trans }}</h4>

    <div id="medias-accordion">
        <ul id="medias-sortable-container" class="reset mb-4">
            {% for mediaRelation in entity.mediaRelations %}
                {% if mediaRelation.locale == website.configuration.locale %}
                    <li id="ui-media-relation-{{ mediaRelation.id }}"
                        class="ui-state-default sortable-item"
                        data-id="{{ mediaRelation.id }}"
                        data-position="{{ mediaRelation.position }}">
                        <div class="row">
                            <ul class="d-none data-locales">
                                {% for mediaID in mediasByPosition[mediaRelation.position] %}
                                    <li class="media-locale-data active" data-id="{{ mediaID }}"></li>
                                {% endfor %}
                            </ul>
                            <div class="title-block col-8 my-auto">
                                <div class="handle-item float-left text-center cursor" data-toggle="tooltip" title="{{ "Déplacer"|trans }}">
                                    <i class="far fa-arrows-alt text-info"></i>
                                </div>
                                <a class="image-popup d-inline-block" href="{{ mediaRelation|thumb(null, {'path': true}) }}">
                                    {{ mediaRelation|thumb(null, {'placeholder': true, 'width': 30, 'height': 30}) }}
                                </a>
                                <small id="heading-{{ mediaRelation.id }}" class="ml-2">{% if mediaRelation.media.filename is defined %}{{ mediaRelation.media.filename }}{% endif %}</small>
                            </div>
                            <div class="col-4 text-right my-auto">
                                {% if 'edit'|moduleActive(allModules) %}
                                    <span data-toggle="tooltip" title="{{ "Éditer"|trans }}">
                                        <span class="btn btn-info btn-circle cursor media-tab-content-loader"
                                              data-path="{{ path('admin_mediarelations_edit', {
                                                  'website': websiteId(),
                                                  'mediaRelation': mediaRelation.id,
                                                  'entityNamespace': class|url_encode,
                                                  'entityId': entity.id }) }}"
                                              data-toggle="collapse"
                                              data-target="#collapse-{{ mediaRelation.id }}"
                                              aria-expanded="false"
                                              aria-controls="collapse-{{ mediaRelation.id }}"><i class="fas fa-pencil-alt"></i>
                                        </span>
                                    </span>
                                {% endif %}
                                {% if 'delete'|moduleActive(allModules) %}
                                    <a href="{{ path('admin_mediarelation_delete', {
                                        'website': websiteId(),
                                        'mediaRelation': mediaRelation.id,
                                        'entityNamespace': class|url_encode,
                                        'entityId': entity.id}) }}"
                                       data-target="#ui-media-relation-{{ mediaRelation.id }}"
                                       class="btn btn-transparent btn-circle swal-delete-link"
                                       data-toggle="tooltip" title="{{ "Supprimer"|trans }}">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                        <div id="collapse-{{ mediaRelation.id }}" class="parent-preloader collapse" aria-labelledby="heading-{{ mediaRelation.id }}" data-parent="#medias-accordion">
                            <div class="card-body position-relative">
                                <div class="progress medias-preloader-tab">
                                    <div class="bg-stripe-loader"></div>
                                    <div class="vertical-align">
                                        <h4>{{ "Chargement en cours..."|trans }}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>

{% endif %}