{% trans_default_domain 'admin' %}

<div id="media-edition-modal"
     class="modal bg-info fade fullscreen-modal"
     tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content text-left text-white">
            <div class="close-modal"><i class="fal fa-times text-white cursor" data-dismiss="modal"></i></div>
            <div class="modal-body bg-info d-flex">
                <div class="container my-auto ajax-content">
                    <h2 class="main-title text-center font-weight-bold">{{ "Édition média"|trans }}</h2>
                    {{ form_start(form, {"attr": {
                        "novalidate": "novalidate",
                        "action": path('admin_media_edit', {'website': websiteId(), 'media': entity.id}),
                        'id': 'media-form-' ~ entity.id}}) }}

                        {% if form.mediaScreens|length > 0 %}
                            <ul class="nav nav-tabs" id="media-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link text-white active" id="desktop-tab" data-toggle="tab" href="#desktop" role="tab" aria-controls="desktop" aria-selected="true">{{ "Ordinateur"|trans }}</a>
                                </li>
                                {% for screen in form.mediaScreens|reverse %}
                                    {% set screenSize = screen.vars.data.screen %}
                                    {% set label = screenSize == 'tablet' ? 'Tablette'|trans : 'Mobile'|trans %}
                                    <li class="nav-item">
                                        <a class="nav-link text-white" id="{{ screenSize }}-tab" data-toggle="tab" href="#{{ screenSize }}" role="tab" aria-controls="{{ screenSize }}" aria-selected="false">{{ label }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}

                        <div class="tab-content" id="media-tab-content">
                            <div class="tab-pane fade show active" id="desktop" role="tabpanel" aria-labelledby="desktop-tab">
                                {% set displayLabel = form.vars.value.mediaScreens is defined ? form.vars.value.mediaScreens|length > 0 : form.mediaScreens|length > 0 %}
                                {% include 'admin/page/media/media-tab.html.twig' with {'media': form, 'entity': form.vars.data, 'label': "Ordinateur"|trans, 'displayLabel': displayLabel} only %}
                            </div>
                            {% for screen in form.mediaScreens|reverse %}
                                {% set data = screen.vars.data %}
                                {% set screenSize = data.screen %}
                                {% set label = screenSize == 'tablet' ? 'Tablette'|trans : 'Mobile'|trans %}
                                <div class="tab-pane fade" id="{{ screenSize }}" role="tabpanel" aria-labelledby="{{ screenSize }}-tab">
                                    {% include 'admin/page/media/media-tab.html.twig' with {'media': screen, 'entity': data, 'label': label|trans, 'displayLabel': displayLabel} only %}
                                </div>
                            {% endfor %}
                        </div>

                        <div class="w-100 text-center modal-btns">
                            {{ form_row(form.save) }}
                        </div>

                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
</div>