{% trans_default_domain 'admin' %}

{% set configuration = website().configuration %}
{% set defaultLocale = configuration.locale %}
{% set allLocales = configuration.allLocales %}

<div class="col-12">
    <h4 class="card-subtitle mb-4">
        <i class="fal fa-photo-video mr-2"></i>{% if allLocales|length > 1 %}{{ "Médias"|trans }}{% else %}{{ "Média"|trans }}{% endif %}
    </h4>
</div>

{% if allLocales|length > 1 %}
    <div class="locales-tab-container">
{% endif %}

{% if allLocales|length > 1 %}
    <ul class="nav nav-tabs w-100" role="tablist">
        {% for mediaRelation in mediaRelations %}
            {% set locale = mediaRelation.vars.value.locale %}
            <li class="nav-item{% if locale not in allLocales %} d-none{% endif %}" data-toggle="tooltip" title="{{ languageName(locale, app.user.locale) }}">
                <a class="nav-link{% if locale == defaultLocale %} active{% endif %}" data-toggle="tab"
                   id="media-relation-{{ locale }}-tab"
                   aria-selected="{% if locale == defaultLocale %}true{% else %}false{% endif %}"
                   href="#mediaRelation-tab-{{ locale }}" role="tab">
                    <i class="flag-icon flag-icon-{{ locale }}"></i>
                </a>
            </li>
        {% endfor %}
    </ul>
{% endif %}

{% if allLocales|length > 1 %}
    <div class="tab-content tabcontent-border w-100 media-relations-tab">
        {% endif %}

        {% for mediaRelation in mediaRelations %}

            {% set locale = mediaRelation.vars.value.locale %}
            {% set mediaRelationId = mediaRelation.vars.value.id %}
            {% set onlyMedia = mediaRelation.media.uploadedFile.vars.attr.onlyMedia is defined and mediaRelation.media.uploadedFile.vars.attr.onlyMedia %}

            {% if allLocales|length == 1 and locale != configuration.locale %}
                <div class="d-none">
            {% endif %}

            {% if allLocales|length > 1 %}
                <div id="mediaRelation-tab-{{ locale }}" class="tab-pane fade{% if locale == defaultLocale %} show active{% endif %}" role="tabpanel" aria-labelledby="media-relation-{{ locale }}-tab">
                    <div class="p-20 pb-0">
                        <div class="row">
            {% endif %}

                {% if onlyMedia and mediaRelation.media.mediaScreens is defined %}
                    <div class="col-md-3 screen-card">
                {% else %}
                    <div class="col-md-{% if onlyMedia %}12{% else %}7{% endif %}">
                        {% include 'admin/page/media/modal-btn.html.twig' %}
                {% endif %}

                    {{ form_row(mediaRelation.media.uploadedFile) }}

                    {% if onlyMedia and mediaRelation.media.mediaScreens is defined and mediaRelation.media.vars.value.screen is defined %}
                        <h4 class="text-center text-uppercase screen-title mb-3">{{ mediaRelation.media.vars.value.screen }}</h4>
                    {% endif %}

                {% if onlyMedia and mediaRelation.media.mediaScreens is defined %}
                    </div>
                    {% for screen in mediaRelation.media.mediaScreens %}
                        <div class="col-md-3 screen-card">
                            {{ form_row(screen.uploadedFile) }}
                            <h4 class="text-center text-uppercase screen-title mb-3">{{ screen.vars.value.screen }}</h4>
                        </div>
                    {% endfor %}
                {% else %}
                    </div>
                {% endif %}

                <div class="col-md-5{% if not is_granted('ROLE_INTERNAL') %} my-auto{% endif %}">

                    {% if mediaRelation.i18n.targetLink is defined %}
                        <button class="btn btn-outline-dark collapsed w-100 mb-3"
                                type="button"
                                data-toggle="collapse"
                                data-target="#collapseLink"
                                aria-expanded="false"
                                aria-controls="collapseLink">
                            <i class="fal fa-link mr-2"></i>{{ "Lien du média"|trans }}
                        </button>
                    {% endif %}

                    {% if is_granted('ROLE_INTERNAL') %}
                        <div class="row">
                            {% if mediaRelation.maxWidth is defined %}
                                <div class="col-md-6 p-0">{{ form_row(mediaRelation.maxWidth) }}</div>
                            {% endif %}
                            {% if mediaRelation.maxHeight is defined %}
                                <div class="col-md-6 p-0">{{ form_row(mediaRelation.maxHeight) }}</div>
                            {% endif %}
                        </div>
                    {% endif %}

                    {% if mediaRelation.i18n.title is defined %}
                        <div class="row">
                            {{ form_row(mediaRelation.i18n.title) }}
                        </div>
                    {% endif %}

                    {% if mediaRelation.media.copyright is defined %}
                        <div class="row">
                            {{ form_row(mediaRelation.media.copyright) }}
                        </div>
                    {% endif %}

                    <div class="row">
                        <div class="col-md-6 p-0">
                            {% if mediaRelation.downloadable is defined %}
                                {{ form_row(mediaRelation.downloadable) }}
                            {% endif %}
                        </div>
                        <div class="col-md-6 p-0">
                            {% if mediaRelation.displayTitle is defined %}
                                {{ form_row(mediaRelation.displayTitle) }}
                            {% endif %}
                        </div>
                        <div class="col-md-6 p-0">
                            {% if mediaRelation.popup is defined %}
                                {{ form_row(mediaRelation.popup) }}
                            {% endif %}
                        </div>
                        <div class="col-md-6 p-0">
                            {% if mediaRelation.isMain is defined %}
                                {{ form_row(mediaRelation.isMain) }}
                            {% endif %}
                        </div>
                        <div class="col-md-6 p-0">
                            {% if mediaRelation.media.notContractual is defined %}
                                {{ form_row(mediaRelation.media.notContractual) }}
                            {% endif %}
                        </div>
                    </div>

                </div>

                {% if mediaRelation.i18n.targetLink is defined %}

                    <div class="col-12">
                        <div id="collapseLink" class="collapse">
                            <div class="card-body pb-0 border bg-light mb-4 radius">
                                <h4 class="card-subtitle mb-4 w-100"><i class="fal fa-link mr-2"></i>{{ "Lien"|trans }}</h4>
                                <div class="row">
                                    {% if mediaRelation.i18n.targetAlignment is defined %}
                                        {{ form_row(mediaRelation.i18n.targetAlignment) }}
                                    {% endif %}

                                    {% if mediaRelation.i18n.targetStyle is defined %}
                                        {{ form_row(mediaRelation.i18n.targetStyle) }}
                                    {% endif %}

                                    {% if mediaRelation.i18n.targetLink is defined %}
                                        {{ form_row(mediaRelation.i18n.targetLink) }}
                                    {% endif %}

                                    {% if mediaRelation.i18n.targetPage is defined %}
                                        {{ form_row(mediaRelation.i18n.targetPage) }}
                                    {% endif %}

                                    {% if mediaRelation.i18n.targetLabel is defined %}
                                        {{ form_row(mediaRelation.i18n.targetLabel) }}
                                    {% endif %}

                                    {% if mediaRelation.i18n.newTab is defined %}
                                        <div class="form-group col-md-4">
                                            {{ form_widget(mediaRelation.i18n.newTab) }}
                                        </div>
                                    {% endif %}

                                    {% if mediaRelation.i18n.externalLink is defined %}
                                        <div class="form-group col-md-4">
                                            {{ form_widget(mediaRelation.i18n.externalLink) }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                {% endif %}

            {% if allLocales|length > 1 %}
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if allLocales|length == 1 and locale != configuration.locale %}
                </div>
            {% endif %}

        {% endfor %}

        {% if allLocales|length > 1 %}
    </div>
{% endif %}

{% if allLocales|length > 1 %}
    </div>
{% endif %}