{% extends 'base.html.twig' %}

{% block title %}{{parent()}}: Galerie des medias{% endblock %}

{% block body %}
    {% include 'breadcrumb.html.twig' %}

    <div class="container-fluid">
        <div id="ui-view">
            <div>
                <div class="animated fadeIn">
                    <div class="row">
                        <div class="col">
                            <div class="card">
                                <div class="card-body">
                                    <input type="hidden" class="do_not_select_in_gallery" />
                                    {# pour garder similarité avce fonctionnement en popin #}
                                    <div class="btn btn-outline-info popin"
                                         hidden="hidden"
                                         id="open_media_gallery"
                                         data-href="{{ path('courses_media_gallery_fullpage') }}"
                                         data-content-href="{{ url('courses_media_index', {'gallery': true, 'selectable':false, 'with_buttons': true, 'type':'__type__', 'filter':'__filter__', 'limit':'__limit__', 'category':'__category__'}) }}">
                                        <i class="nav-icon fa fa-list-alt mr-2" aria-hidden="true"></i>
                                        Galerie
                                    </div>

                                    {% include '@Courses/Media/gallery_inner.html.twig' %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block body_before_end %}
    <!-- HTML POUR POPPIN-I-FIEUR -->
    {% include 'generic_popin.html.twig' with {
        'contenu': '__CONTENU__',
        'titre': '__TITRE__',
        'show_validate_popin' : false,
        'show_cancel_popin' : false,
        'medium': true,
        'suffixe_id': '_media'
    } only %}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css" />
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
    {# <script src="{{ asset('js/jstree.js') }}?{{ date().timestamp }}"></script> #si besoin debug, version en clair #}
    <script src="{{ asset('js/ns_scripts.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_media_gallery.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_media_createedit.js') }}?{{ date().timestamp }}"></script>
    <script type="text/javascript">

        window.PATH_MEDIA_PREVIEW = "{{ path('courses_media_show', {'id': '__media_id__', 'preview': true}) }}"
        window.PATH_MEDIA_CATEGORY_FILTER = "{{ path('courses_mediacategorie_jstreedata') }}"

        $('.select_type').on('change', function() {
            var value = $(this).val();
            var type_name = 'image'
            if(value === "10") {
                type_name = 'son'
            } else if(value === "11") {
                type_name = 'vidéo'
            }
            window.updateUrl( $('#open_media_gallery'), 'data-content-href', {'type':type_name}) //voir ns_scripts.js
            // et y aller:
            window.doSearchOrNavigateInPagination(path)
        })

        $(document).ready(function(){

            //chargement initial : //voir bindFilterCategory: jstree a un onload qui initie cette grille
            //var contentpath = $('#open_media_gallery').attr('data-content-href')
            // et y aller:
            //window.doSearchOrNavigateInPagination(contentpath)

            window.bindFilterCategory() //voir courses_media_gallery.js
            window.bindFilterDropdown() //voir courses_media_gallery.js
        })

    </script>
{% endblock javascripts %}