{% extends 'Admin/layout.html.twig' %}

{% block javascripts %}
    <script>
        $(function() {
            $('.fancybox').fancybox({
                'maxHeight': '90%',
                'padding': 0
            });

            function changePosition (type, liste) {
                $.ajax({
                    type: "POST",
                    url: "{{ path('element_position')}}",
                    data: {
                        type: type,
                        list: liste
                    },
                    cache: false
                });
            }

            $("#sortableLevel1").sortable({
                axis: "y",
                update: function(event, ui) {
                    var listlevel1 = new Array(),
                            classelement = ui.item.context.className,
                            iselement = classelement.indexOf('containerLevel1');

                    $('.level1').each(function () {
                        listlevel1.push($(this).attr('data-elementid'));
                    });

                    if (listlevel1.length!=0 && iselement!= -1) {
                        changePosition('Media', listlevel1);
                    }
                }
            });

            $("#sortableLevel1").disableSelection();
        });
    </script>
{% endblock %}

{% block body %}
    {{ knp_menu_render('actions_medias') }}

    {# Formulaire de recherche #}
    <form action="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}" class="search-admin" method="get">
        <fieldset>
            <div class="search-fields">
                <p>
                    <label for="form_search_title">Titre</label>
                    <input id="form_search_title" name="title" type="text" value="{{ search_title }}">
                </p>
            </div>
        </fieldset>
        <p>
            <input class="btn" type="submit" value="{{ 'action.search'|trans({}, 'action') }}" />
        </p>
    </form>

    <div class="listDomaines"{% if 'all' != type and search_title is empty %} id="sortableLevel1"{% endif %}>
    <table>
        <thead>
            <tr>
                <th><a href="{{ path('admin_media', { 'order': 'id', 'dir': direction.id }) }}">Id</a></th>
                <th><a href="{{ path('admin_media', { 'order': 'title', 'dir': direction.title }) }}">Name</a></th>
                <th><a href="{{ path('admin_media', { 'order': 'pagePerso', 'dir': direction.pagePerso }) }}">Espace perso</a></th>
                <th><a href="{{ path('admin_media', { 'order': 'opeItdlcEmail', 'dir': direction.opeItdlcEmail }) }}">Email ITDLC</a></th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for media in medias %}
            <tr class="containerLevel1 delete-element-container" data-elementid="{{ media.id|raw }}">
                <td>{{ media.id|raw }}</td>
                <td class="icon_media {{ media.type }}">
                    {% if 'picture' == media.type %}
                        {# <img> and <figcaption> @see http://html5doctor.com/html5-simplequiz-4-figures-captions-and-alt-text/#comment-12023 #}
                        <figure>
                            <a class="fancybox" href="{{ asset(media.getWebPathPicture()) }}" target="_blank" title="{{ media.title }}">
                                <img alt="" src="{{ asset(media.getWebPathPicture()|imagine_filter('48Lx48H')) }}">
                            </a>
                            <figcaption>
                                <a href="{{ path('admin_media_edit', {'id':media.id}) }}">{{ media.title }}</a>
                            </figcaption>
                        </figure>
                    {% elseif 'pdf' == media.type %}
                        <div><a href="{{ path('admin_media_edit', {'id':media.id}) }}">{{ media.title }}</a></div>
                    {% elseif 'video' == media.type %}
                        <figure>
                            <a class="fancybox fancybox.ajax" href="{{ path('video', {'ref':media.path}) }}" target="_blank">
                                <img alt="" height="90" src="//i1.ytimg.com/vi/{{ media.path }}/default.jpg" width="120">
                            </a>
                            <figcaption>
                                <a href="{{ path('admin_media_edit', {'id':media.id}) }}">{{ media.title }}</a>
                            </figcaption>
                        </figure>
                    {% else %}
                        <div><a href="{{ media[0].path }}" target="_blank">{{ media[0].title }}</a></div>
                    {% endif %}
                </td>
                <td>
                    {% for item in media.getPagePerso() %}
                        {{ item }} 
                    {% endfor %}
                </td>
                <td>
                    {% for item in media.getOpeItdlcEmail() %}
                        {{ item }} 
                    {% endfor %}
                </td>
                <td class="tools flex">
                    <ul class="element-actions">
                        <li>
                        {% if 'pdf' == media.type %}
                           <a class="seeAll" href="{{ asset(media.getWebPathPdf()) }}" target="_blank"><span>Aperçu</span></a>
                        {% endif %}
                        </li>
                        <li>
                            <a class="edit" href="{{ path('admin_media_edit', {'id':media.id}) }}">
                                <span>{{ 'action.edit.label'|trans({}, 'action') }}</span>
                            </a>
                        </li>
                        <li>
                            <input
                                {% if media.isactive %} checked="checked"{% endif %}
                                class="input-active"
                                data-type="Media"
                                data-url="{{ path('element_actif')}}"
                                type="checkbox"
                                value="{{ media.id }}"
                            />
                            <span class="checkbox"></span>
                        </li>
                            <li>
                                <a class="delete-element" href="{{ path('admin_menu_delete', {'id':media.id, 'type':'Media'}) }}">
                                    <span>{{ 'action.delete.label'|trans({}, 'action') }}</span>
                                </a>
                            </li>
                    </ul>
                </td>
            </tr>
        {% endfor %}
        </tbody>
        </table>
    </div>

    {{ include('Admin/Paginator/pagination.html.twig', {pages:nb_pages}) }}
{% endblock %}
