{% extends '@CadolesCore/base.html.twig' %}

{% block pagewrapper %}
    {% set color = app.session.get('color') %}

    <h1>
        Gestion des Flux
    </h1>

    <div class="row">
        <div class="col-md-9">
            <p>
                <a href="{{ path('cadoles_portal_config_flux_submit') }}" class="btn btn-success">Ajouter un Flux</a>
            </p>

            <div id="list" class="panel-group">
                {% for flux in fluxs %}
                    {% set colorbody = "background-color: #" ~ color['main'] %}
                    {% if flux.color is not null %}
                        {% set colorbody = "background-color: #" ~ flux.color %}
                    {% endif %}

                    <div
                        class="panel
                            list-item
                            {% for group in flux.groups %}{{ ' group-' ~ group.id }}{% endfor %}
                            {% for role in flux.roles %}{{ ' role-' ~ role }}{% endfor %}
                            "
                        data-flux-id="{{ flux.id }}"
                        style="{{ colorbody }};"
                    >
                        <div class="panel-heading" role="tab">                   
                            <a href="{{ path('cadoles_portal_config_flux_update', { id: flux.id }) }}">
                                {{ flux.title }}
                            </a>
                        </div>
                                         
                        <input type="hidden" name="flux_item[id][]" value="{{ flux.id }}" />
                    </div>
                {% endfor %}
            </div>
        </div>

        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-filter"></i>
                    Afficher par Rôle
                </div>
                <div class="panel-body">
                    <ul id="role-filter" class="list-group">
                        <a class="active list-group-item filterfgall" id="allrole" style="cursor:pointer">
                            <i class="fa fa-users"></i>
                            Toutes les Rôles
                            <span class="badge">{{ fluxs|length }}</span>
                        </a>

                        <a class="list-group-item" data-role="ROLE_ANONYME" style="cursor:pointer">
                            <i class="fa fa-user"></i>
                            Visiteur
                            <span class="badge"></span>
                        </a>

                        <a class="list-group-item" data-role="ROLE_USER" style="cursor:pointer">
                            <i class="fa fa-user"></i>
                            Utilisateur
                            <span class="badge"></span>
                        </a>                        

                        <a class="list-group-item" data-role="ROLE_ANIM" style="cursor:pointer">
                            <i class="fa fa-user"></i>
                            Animateur de Groupe
                            <span class="badge"></span>
                        </a>  

                        <a class="list-group-item" data-role="ROLE_MODO" style="cursor:pointer">
                            <i class="fa fa-user"></i>
                            Modérateur
                            <span class="badge"></span>
                        </a>                        

                        <a class="list-group-item" data-role="ROLE_ADMIN" style="cursor:pointer">
                            <i class="fa fa-user"></i>
                            Administrateur
                            <span class="badge"></span>
                        </a>                        
                    </ul>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-filter"></i>
                    Afficher par Groupes
                </div>

                <div class="panel-body">
                    <div id="group-filter" class="list-group">
                        <a href="#" class="active list-group-item filterfgall">
                            <i class="fa fa-users"></i>
                            Tout les groupes
                            <span class="badge">{{ fluxs|length }}</span>
                        </a>
                        
                        {% for group in groups %}
                            <a class="list-group-item" href="#" data-role="{{ group.id }}">
                                <i class="fa fa-user"></i>
                                {{ group.label }}
                                <span class="badge">{{ group.fluxs|length }}</span>
                            </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block localjavascript %}
    $( function() {

        $("a[data-role='ROLE_ANONYME']").children("span").html($('.role-ROLE_ANONYME').length);
        $("a[data-role='ROLE_USER']").children("span").html($('.role-ROLE_USER').length);
        $("a[data-role='ROLE_ANIM']").children("span").html($('.role-ROLE_ANIM').length);
        $("a[data-role='ROLE_MODO']").children("span").html($('.role-ROLE_MODO').length);
        $("a[data-role='ROLE_ADMIN']").children("span").html($('.role-ROLE_ADMIN').length);

        function updateItems() {
            $('.list-item:not(.list-item-placeholder').each(function(i) {
                var itemid = $(this).data('flux-id');
                $(this).find('input[name="flux_item[rowOrder][]"]').val(i);

                // Mise à jour en base de l'order
                $.ajax({
                    method: "POST",
                    url: "{{ path('cadoles_portal_config_flux_order') }}",
                    data: {
                        id:itemid,
                        order:i
                    }                   
                });

            });
        }

        $( "#list" ).sortable({
            axis: "y",
            placeholder: "list-item list-item-placeholder",
            update: updateItems
        });

        $('#role-filter a').click(function(){
            // On réactive les auters filtres à tout
            $('#group-filter a').removeClass('active');
            $(".filterfgall").addClass('active');
            
            // On rend actif la zone cliquée
            $('#role-filter a').removeClass('active');
            $(this).addClass('active');

            // On cache l'ensemble des elements
            $(".list-item").hide();       

            // On affiche les elements filtrés
            if($(this).hasClass('filterfgall'))
                var $fluxs = $('.list-item');
            else 
                var $fluxs = $('.role-'+$(this).data('role'));
            
            $fluxs.show();

            return false;
        });

        $('#group-filter a').click(function(){
            // On réactive les auters filtres à tout
            $('#role-filter a').removeClass('active');
            $(".filterfgall").addClass('active');
            
            // On rend actif la zone cliquée
            $('#group-filter a').removeClass('active');
            $(this).addClass('active');

            // On cache l'ensemble des elements
            $(".list-item").hide();       

            // On affiche les elements filtrés
            if($(this).hasClass('filterfgall'))
                var $fluxs = $('.list-item');
            else 
                var $fluxs = $('.group-'+$(this).data('role'));
            
            $fluxs.show();

            return false;
        });
    } );
{% endblock %}


