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

{% block title %}{{parent()}}: Liste des rubriques de media{% 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-header">
                                    <h4 class="d-inline-block m-0">Liste des rubriques de media</h4>

                                    <div class="card-header-actions">
                                        <ul class="d-flex list-unstyled m-0">

                                            <li class="mr-2">
                                                <span>Montrer que actifs:</span>
                                                <button type="button" class="btn btn-toggle {% if only_enabled %}active{% endif %}"
                                                        data-toggle="button" aria-pressed="false"
                                                        autocomplete="off" onclick="toggleActive();">
                                                    <div class="handle"></div>
                                                </button>
                                            </li>

                                            {% if est_connecte %}
                                                <li class="">
                                                    <div class="btn btn-outline-primary btn-new popin"
                                                       data-title="Ajouter une nouvelle rubrique de média"
                                                       data-href="{{ path('courses_mediacategorie_create')|raw }}">
                                                        Ajouter une rubrique
                                                    </div>
                                                </li>
                                            {% endif %}
                                        </ul>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-6 wrapper_liste_categories">
                                            {# note: si vous souhaitez changer le html de l'arbre:
                                             # "noeud" catégorie: tree_categorie.html.twig
                                             # "feuille" media: tree_media.html.twig
                                             # je reconnais qu'avec bootstrap card c'est trop gros, mais c'est un test.
                                             #}
                                            {% set est_connecte = true %}
                                            <ul class="root_categories categories list-unstyled">
                                                {% for categorie in tree_data %}
                                                    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                                                        {% include "@Courses/Media/tree_categorie.html.twig"
                                                            with {'categorie': categorie,
                                                            'only_enabled': only_enabled } only %}
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                        {# DECISION 24/09/2018: ne plus montrer media ainsi, juste les catégories
                                        <div class="col-lg-6 wrapper_liste_medias">
                                            <em>Cliquez une catégorie de média pour afficher ici les media</em>
                                        </div>
                                        #}
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="card-header-actions"> {# certes nous sommes dans le footer, mais ça permet d'avoir le même positionnement du bouton que pour header #}
                                        <ul class="d-flex list-unstyled m-0">
                                            {% if est_connecte %}
                                                <li class="">
                                                    <div class="btn btn-outline-primary btn-new popin"
                                                       data-title="Ajouter une nouvelle rubrique de média"
                                                       data-href="{{ path('courses_mediacategorie_create')|raw }}">
                                                        Ajouter une rubrique
                                                    </div>
                                                </li>
                                            {% endif %}
                                        </ul>
                                    </div>
                                </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 href="{{ asset('css/btn_toggle.css') }}" rel="stylesheet" >
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/ns_scripts.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_media_createedit.js') }}?{{ date().timestamp }}"></script>
    <script>

        window.PATH_MEDIA_PREVIEW = "{{ path('courses_media_show', {'id': '__media_id__', 'preview': true})|raw }}";
        window.PATH_TREE_DATA_CATEGORIE = "{{ path('courses_mediacategorie_treedata', {id:'__categorie_id__', 'only_enabled':'__only_enabled__'}) }}";
        {% if only_enabled %}
        window.only_enabled = true;
        {% else %}
        window.only_enabled = false;
        {% endif %}
        function toggleActive() {
            window.only_enabled = !only_enabled
            reloadTree(true, -1)
        }

        $(document).ready(function() {
            //window.enableDataTable('#table_mediacategorie')
            reloadTree(true, -1) //chargement initial

            //montrer par défaut tous les médias
            //$('.btn-show-media-maim').trigger('click')
        })

        //window.path_categorie_data_json = "{{ path('courses_mediacategorie_treedatajson', {id:'__categorie_id__'})|raw }}"


    </script>
{% endblock %}