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

{% block localstyle %}
    #main {
        padding-left:0px;
        margin-bottom:0px;
    }
    #mycontent { display:none }
    
    .tag {
        border-radius: 5px;
        padding: 8px 8px;
        margin-bottom: 5px;
        display: inline-block;
        min-width: 35px;
        text-align: center;
        color: #ffffff !important;
        zoom: 80%;
    }

    .tag i {
        margin-right:5px;
    }

    .assignee {
        width:30px;
        margin: 5px 5px 0px 0px;
    }

{% endblock %}

{% block body %}
    <div class="d-flex">
        <div id="filters" class="d-flex flex-column pl-2 pr-2 " style="width:350px; background-color:var(--colorbgbodydark);min-height:1500px;">
            {% if fgpoker %}
            <div id="online" class="mt-2"></div>                
            {% endif %}

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre TICKET</label>
                <input type="number" id="filterticket" class=" form-control">
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre JALONS</label>
                <select id="filtermilestones" multiple="multiple" class="form-control">
                    {% for giteamilestone in giteamilestones %}
                        <option value="{{giteamilestone.id}}">{{giteamilestone.title}}</option>
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre SPRINT</label>
                <select id="filtersprints" multiple="multiple" class="form-control">
                    {% for sprint in sprints %}
                        <option value="{{sprint.giteamilestone~"-"~sprint.id}}">{{sprint.giteamilestonename}}-{{sprint.name}}</option>
                    {% endfor %}
                    {% for giteamilestone in giteamilestones %}
                        <option value="{{giteamilestone.id~"--100"}}">{{giteamilestone.title}}-Aucun</option>
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre STATUTS</label>
                <select id="filtercolumns" multiple="multiple" class="form-control">
                    {% for giteacolumn in giteacolumns %}
                        <option value="{{giteacolumn}}">{{giteacolumn}}</option>
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre TYPES</label>
                <select id="filtertypes" multiple="multiple" class="form-control">
                    {% for giteatype in giteatypes %}
                        <option value="{{giteatype}}">{{giteatype}}</option>
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre EQUIPES</label>
                <select id="filterteams" multiple="multiple" class="form-control">
                    {% for giteateam in giteateams %}
                        <option value="{{giteateam}}">{{giteateam}}</option>
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre PRIORITES</label>
                <select id="filterprioritys" multiple="multiple" class="form-control">
                    {% for giteapriority in giteaprioritys %}
                        <option value="{{giteapriority}}">{{giteapriority}}</option>
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre ETIQUETTES</label>
                <select id="filterlabels" multiple="multiple" class="form-control">
                    {% for gitealabel in gitealabels %}
                        {% if gitealabel not in giteacolumns and gitealabel not in giteateams and gitealabel not in giteaprioritys and gitealabel not in giteatypes %}
                            <option value="{{gitealabel}}">{{gitealabel}}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre AFFECTATIONS</label>
                <select id="filterassignees" multiple="multiple" class="form-control">
                    {% for giteaassignee in giteaassignees %}
                        <option value="{{giteaassignee.username}}">{{giteaassignee.username}}</option>
                    {% endfor %}
                </select>
            </div>   


            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre EXCLUSIONS</label>
                <select id="filterexcludes" multiple="multiple" class="form-control">
                    {% for gitealabel in gitealabels %}
                        {% if gitealabel not in giteacolumns and gitealabel not in giteateams and gitealabel not in giteaprioritys and gitealabel not in giteatypes %}
                            <option value="{{gitealabel}}">{{gitealabel}}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </div> 
        </div>

        <div class="pl-3" style="width:100%;">
            <div class="mt-4 mb-3" style="zoom:80%">
                <button class="btn btn-success" onClick="showFilters()"><i class="fas fa-filter"></i></button>
                {% if id!=0 %}
                <a class="btn btn-success" href="{{path('app_scrum_view',{id:id})}}"><i class="fas fa-columns"></i></a>
                <a class="btn btn-success" href="{{path('app_scrum_stat',{id:id})}}"><i class="fas fa-chart-area"></i></a>               
                {% endif %}
                <span id="textfilters"></span>
                <a class="btn btn-success float-right" href="{{path('app_scrum_table',{id:id,'fgcsv':true})}}">Export CSV</a>               

            </div>

            <table class="mt-4 table table-striped table-bordered table-hover" id="dataTables" style="width:100%; zoom:80%;">
                <thead>
                    <tr>
                        <th class="no-sort"></th>
                        {%if id==0 %}<th style="width:100px">Projet</th>{%endif%}
                        <th style="width:200px">Jalon</th>
                        <th style="width:200px">Sprint</th>
                        <th style="width:200px">Type</th>
                        <th style="width:70px"class="no-string">N°</th>
                        <th style="width:1000px">Titre</th>
                        {% if (not wssuse or not fgpoker) %}
                        <th style="width:200px">Equipe</th>
                        <th style="width:250px">Priorité</th>
                        <th style="width:135px">Affecté à</th>
                        <th style="width:300px">Etiquettes</th>
                        {% else %}
                        <th style="width:300px">Poker</th>
                        {% endif %}
                        <th style="width:135px">Statut</th>
                        <th style="width:70px">Poid</th>

                    </tr>
                </thead>

                <tbody>
                    {% for gitearepo in gitearepos %}
                        {% for giteaissue in gitearepo.issues %}
                            {% set tosee=false %}
                            {% if app.session.get('viewclosed')=="true" and giteaissue.state=="closed" %}
                                {% set tosee=true %}
                            {% endif %}
                            {% if giteaissue.state!="closed" %}
                                {% set tosee=true %}
                            {% endif %}
                            {% if not giteaissue.pull_request is null %}
                                {% set tosee=false %}                            
                            {% endif %}

                            {% if tosee %}
                                {% set dataticket = giteaissue.number %}
                                {% set datarepo = gitearepo.id %}
                                {% set datamilestone = (giteaissue.milestone?giteaissue.milestone.id:-100) %}
                                {% set datasprint = datamilestone~"-"~giteaissue.sprintid %}

                                {% set statut = "Backlog" %}
                                {% set teams = "" %}
                                {% set types = "" %}
                                {% set datateams = "" %}
                                {% set datatypes = "" %}
                                {% set prioritys = (not giteaprioritys?'':'<span class="btn-link tag mr-1" style="background-color:#70c24a"><i class="fas fa-tag"></i>'~giteaprioritys|last~'</span>') %}
                                {% set dataprioritys = ','~giteaprioritys|last %}
                                {% set labels = "" %}
                                {% set datalabels = "" %}
                                {% for label in giteaissue.labels %}
                                    {% if label.id in gitearepo.columns %}
                                        {% set statut= label.name %}
                                    {% elseif label.name in giteatypes %}
                                        {% set types='<span class="btn-link tag mr-1" style="background-color:#'~label.color~'"><i class="fas fa-tag"></i>'~label.name~'</span>' %}
                                        {% set datatypes=','~label.name %}
                                    {% elseif label.name in giteateams %}
                                        {% set teams=teams~'<span class="btn-link tag mr-1" style="background-color:#'~label.color~'"><i class="fas fa-tag"></i>'~label.name~'</span>' %}
                                        {% set datateams=datateams~','~label.name %}
                                    {% elseif label.name in giteaprioritys %}
                                        {% set prioritys='<span class="btn-link tag mr-1" style="background-color:#'~label.color~'"><i class="fas fa-tag"></i>'~label.name~'</span>' %}
                                        {% set dataprioritys=','~label.name %}
                                    {% else %}
                                        {% set labels=labels~'<span class="btn-link tag mr-1" style="background-color:#'~label.color~'"><i class="fas fa-tag"></i>'~label.name~'</span>' %}
                                        {% set datalabels=datalabels~','~label.name %}
                                    {% endif %}
                                {% endfor %}

                                {% set dataassignees="" %}
                                {% for assignee in giteaissue.assignees %}
                                    {% set dataassignees=dataassignees~','~assignee.username %}
                                {% endfor %}

                                <tr data-id="{{giteaissue.issueid}}" data-milestone="{{datamilestone}}" data-sprint="{{datasprint}}" data-ticket="{{dataticket}}" data-column="{{statut}}" data-teams="{{datateams}}" data-prioritys="{{dataprioritys}}" data-types="{{datatypes}}" data-labels="{{datalabels}}" data-assignees="{{dataassignees}}">
                                    <td>
                                        <a target="_blank" class="btn btn-link fa fa-file" href="{{giteaissue.html_url}}"></a>
                                    </td>
                                    {%if id==0 %}<td>{{ gitearepo.full_name }}</td>{%endif%}
                                    <td>{% if giteaissue.milestone  %}{{ giteaissue.milestone.title }} {%endif%}</td>
                                    <td>{% if giteaissue.sprintid  %}{{ giteaissue.sprintname }} {%endif%}</td>
                                    <td>{{ types|raw }}</td>
                                    <td>{{ giteaissue.number }}</td>
                                    <td>
                                        <a target="_blank" href="{{giteaissue.html_url}}">
                                            {% if giteaissue.state=="closed" %}CLOS LE = {{ giteaissue.closed_at|date("d/m/y") }}<br>{% endif %}
                                            {{ giteaissue.title }}
                                        </a>
                                    </td>

                                    {% if (not wssuse or not fgpoker) %}
                                    <td>{{ teams|raw }}</td>
                                    <td>{{ prioritys|raw }}</td>
                                    
                                    {% set dataorder="" %}
                                    {% for assignee in giteaissue.assignees %}
                                        {% set dataorder=dataorder~assignee.username %}
                                    {% endfor %}         

                                    <td data-order="{{dataorder}}">
                                        {% for assignee in giteaissue.assignees %}
                                            <img src="{{assignee.avatar_url}}" class="assignee" title="{{assignee.username}}">
                                        {% endfor %}         
                                    </td>
                                    <td>{{ labels|raw }}</td>
                                    {% else %}
                                    <td>
                                        <div class="pokertd d-flex"></div>
                                    </td>
                                    {% endif %}

                                    <td>{{ statut }}</td>
                                    <td>
                                        <div id="modissu{{ giteaissue.issueid }}" data-issue="{{ giteaissue.issueid }}" data-giteaid="{{giteaissue.number}}" data-giteatitle="{{ giteaissue.title }}" type="button" class="modissu btn btn-link">
                                            <i class="fas fa-weight-hanging"></i> = <span id="issue{{giteaissue.issueid}}-weight">{{ giteaissue.weight }}</span>
                                        </div>
                                    </td>
                                </tr>
                            {% endif %}
                        {% endfor %}  
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div id="mymodalissue" class="modal" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    <div class="form-group ">
                        <label class="control-label required" for="issu_weight">
                            Poid
                        </label>
                        <input type="hidden" id="modal-issueid" name="modal-issueid" required="required" class=" form-control" value="">
                        <input type="integer" id="modal-issueweight" name="modal-issueweight" required="required" class=" form-control" value="">
                    </div>
                    <button id="issu_update" class="btn btn-success">Enregistrer</button>
                </div>            
            </div>
        </div>
    </div>

{% endblock %}

{% block localjavascript %}
    var table;

    function showFilters() {
        if($("#filters").hasClass("d-flex")) {
            toshow=0;
            $("#filters").addClass("d-none");
            $("#filters").removeClass("d-flex");
        }
        else {
            toshow=1;
            $("#filters").addClass("d-flex");
            $("#filters").removeClass("d-none");
        }

        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'showfilters',
                id:{{id}},
                value: toshow
            }
        });        
    }

    function showhide() {
        textfilters="";
        ticketfilter=$("#filterticket").val();
        milestonefilters=$("#filtermilestones").val();
        sprintfilters=$("#filtersprints").val();
        columnfilters=$("#filtercolumns").val();
        teamfilters=$("#filterteams").val();
        priorityfilters=$("#filterprioritys").val();
        typefilters=$("#filtertypes").val();
        labelfilters=$("#filterlabels").val();
        assigneefilters=$("#filterassignees").val();
        excludefilters=$("#filterexcludes").val();
        
        $.fn.dataTable.ext.search.push(function(settings, data, dataIndex, rowObj, counter) {
            el=table.row(dataIndex).nodes().to$();

            {% if id == 0 %}
            category = $(el).data('category');
            repo = $(el).data('repo');
            {% endif %}
            ticket= $(el).data('ticket');
            milestone = $(el).data('milestone');
            sprint = $(el).data('sprint');
            column = $(el).data('column');
            teams = $(el).data('teams').split(',');
            prioritys = $(el).data('prioritys').split(',');
            types = $(el).data('types').split(',');
            labels = $(el).data('labels').split(',');
            assignees = $(el).data('assignees').split(',');

            toreturn=true;

            {% if id == 0 %}
            if(categoryfilters.length!==0 && jQuery.inArray(category.toString(), categoryfilters )<0) { 
                toreturn=false;
            }
            if(categoryfilters.length!==0) {
                textfilters=textfilters+" CATEGORIES =";
                $.each(categoryfilters, function( index, value ) {
                    textfilters=textfilters+" "+value;
                });
            }

            if(repofilters.length!==0 && jQuery.inArray(repo.toString(), repofilters )<0) { 
                toreturn=false;
            }
            {% endif %}

            if(ticketfilter.length!==0 && ticket.toString()!=ticketfilter) { 
                toreturn=false;
            }
            
            if(milestonefilters.length!==0 && jQuery.inArray(milestone.toString(), milestonefilters )<0) { 
                toreturn=false;
            }

            
            if(sprintfilters.length!==0 && jQuery.inArray(sprint.toString(), sprintfilters )<0) { 
                toreturn=false;
            }

            if(columnfilters.length!==0 && jQuery.inArray(column.toString(), columnfilters )<0) { 
                toreturn=false;
            }

            if(excludefilters.length!==0) {
                $.each(excludefilters, function( index, value ) {
                    if(jQuery.inArray(value, labels )>0) {
                        toreturn=false;
                    }
                });                
            }

            if(toreturn&&(teamfilters.length!==0||priorityfilters.length!==0||typefilters.length!==0||labelfilters.length!==0||assigneefilters.length!==0)) {
                if(labelfilters.length!==0) {
                    toreturn=false;
                    $.each(labelfilters, function( index, value ) {
                        if(jQuery.inArray(value, labels )>0) {
                            toreturn=true;
                        }
                    });                
                }

                if(teamfilters.length!==0&&toreturn) {
                    toreturn=false;
                    $.each(teamfilters, function( index, value ) {
                        if(jQuery.inArray(value, teams )>0) {
                            toreturn=true;
                        }
                    });                
                }

                if(priorityfilters.length!==0&&toreturn) {
                    toreturn=false;
                    $.each(priorityfilters, function( index, value ) {
                        if(jQuery.inArray(value, prioritys )>0) {
                            toreturn=true;
                        }
                    });                
                }

                if(typefilters.length!==0&&toreturn) {
                    toreturn=false;
                    $.each(typefilters, function( index, value ) {
                        if(jQuery.inArray(value, types )>0) {
                            toreturn=true;
                        }
                    });                
                }

                if(assigneefilters.length!==0&&toreturn) {
                    toreturn=false;
                    $.each(assigneefilters, function( index, value ) {
                        if(jQuery.inArray(value, assignees )>0) {
                            toreturn=true;
                        }
                    });                
                }
            }
            
            return toreturn;
        });
        
        if(ticketfilter.length!==0) {
            textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>TICKET</b> ="+ticketfilter;
        }

        if(milestonefilters.length!==0) {
            data = $("#filtermilestones").select2('data');
            textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>JALONS</b> =";
            $.each(milestonefilters, function( index, value ) {
                if(index>0)textfilters=textfilters+" &";
                textfilters=textfilters+" "+data[index].text;
            });
        }

        if(sprintfilters.length!==0) {
            data = $("#filtersprints").select2('data');
            textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>SPRINTS</b> =";
            $.each(sprintfilters, function( index, value ) {
                if(index>0)textfilters=textfilters+" &";
                textfilters=textfilters+" "+data[index].text;
            });
        }

        if(columnfilters.length!==0) {
            data = $("#filtercolumns").select2('data');
            textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>STATUS</b> =";
            $.each(columnfilters, function( index, value ) {
                if(index>0)textfilters=textfilters+" &";
                textfilters=textfilters+" "+data[index].text;
            });
        }

        if(teamfilters.length!==0) {
            data = $("#filterteams").select2('data');
            textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>EQUIPES</b> =";
            $.each(teamfilters, function( index, value ) {
                if(index>0)textfilters=textfilters+" &";
                textfilters=textfilters+" "+data[index].text;
            });
        }

        if(priorityfilters.length!==0) {
            data = $("#filterprioritys").select2('data');
            textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>EQUIPES</b> =";
            $.each(priorityfilters, function( index, value ) {
                if(index>0)textfilters=textfilters+" &";
                textfilters=textfilters+" "+data[index].text;
            });
        }

        if(typefilters.length!==0) {
            data = $("#filtertypes").select2('data');
            textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>EQUIPES</b> =";
            $.each(typefilters, function( index, value ) {
                if(index>0)textfilters=textfilters+" &";
                textfilters=textfilters+" "+data[index].text;
            });
        }

        if(labelfilters.length!==0) {
            data = $("#filterlabels").select2('data');
            textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>ETIQUETTES</b> =";
            $.each(labelfilters, function( index, value ) {
                if(index>0)textfilters=textfilters+" &";
                textfilters=textfilters+" "+data[index].text;
            });
        }

        if(assigneefilters.length!==0) {
            data = $("#filterassignees").select2('data');
            textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>AFFECTATIONS</b> =";
            $.each(assigneefilters, function( index, value ) {
                if(index>0)textfilters=textfilters+" &";
                textfilters=textfilters+" "+data[index].text;
            });
        }  


        if(excludefilters.length!==0) {
            data = $("#filterexcludes").select2('data');
            textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>EXCLURE ETIQUETTES</b> =";
            $.each(excludefilters, function( index, value ) {
                if(index>0)textfilters=textfilters+" &";
                textfilters=textfilters+" "+data[index].text;
            });
        }              

        $("#textfilters").html(textfilters);

        table.draw();
    }

    function filtermilestones() {
        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'filtermilestones',
                id:{{id}},
                value: $("#filtermilestones").val()
            }
        });

        showhide();
    } 

    function filtersprints() {
        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'filtersprints',
                id:{{id}},
                value: $("#filtersprints").val()
            }
        });

        showhide();
    } 

    function filtercolumns() {
        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'filtercolumns',
                id:{{id}},
                value: $("#filtercolumns").val()
            }
        });

        showhide();
    } 

    function filterteams() {
        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'filterteams',
                id:{{id}},
                value: $("#filterteams").val()
            }
        });

        showhide();
    } 

    function filterprioritys() {
        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'filterprioritys',
                id:{{id}},
                value: $("#filterprioritys").val()
            }
        });

        showhide();
    } 

    function filtertypes() {
        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'filtertypes',
                id:{{id}},
                value: $("#filtertypes").val()
            }
        });

        showhide();
    } 

    function filterlabels() {
        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'filterlabels',
                id:{{id}},
                value: $("#filterlabels").val()
            }
        });

        showhide();
    } 

    function filterassignees() {
        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'filterassignees',
                id:{{id}},
                value: $("#filterassignees").val()
            }
        });

        showhide();
    } 

    function filterexcludes() {
        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'filterexcludes',
                id:{{id}},
                value: $("#filterexcludes").val()
            }
        });

        showhide();
    } 

    function refreshinfo() {
        $.ajax({
            method: "POST",
            url: "{{path("app_scrum_info",{id:id})}}",
            success: function(data) {
                $(".totalweight").html("0");

                Object.entries(data.weights).forEach(entry => {
                    const [key, value] = entry;
                    $("#total"+key).html(value);
                });                    
            }
        });
    }

    $(document).on('click','.modissu',function(){
        $(".modal-title").html("#"+$(this).data("giteaid")+" - "+$(this).data("giteatitle"));
        $("#modal-issueid").val($(this).data("issue"));

        $.ajax({
            method: "POST",
            url: "{{path("app_scrumissue_info")}}",
            data: {
                id:$("#modal-issueid").val(),
            },
            success: function(data) {
                $("#modal-issueweight").val(data.weight);
                $("#mymodalissue").modal('show');
                $("#modal-issueweight").focus();
            },
        });                   
    });

    $("#issu_update").click(function(){
        $.ajax({
            method: "POST",
            url: "{{path("app_scrumissue_update")}}",
            data: {
                id:$("#modal-issueid").val(),
                weight:$("#modal-issueweight").val(),
            },
            success: function(data) {
                $("#issue"+$("#modal-issueid").val()+"-weight").html($("#modal-issueweight").val());
                refreshinfo();
                $("#mymodalissue").modal('hide');
            },
            error: function (request, status, error) {
                $("#mymodalissue").modal('hide');
            }
        });        
    });

    $(document).ready(function() {
        $("#filterticket").on("keyup", function() {
            showhide();
        });

        $('#filtermilestones').select2();
        {% if filtermilestones %}
            {% for milestone in filtermilestones %}
                $("#filtermilestones").val($("#filtermilestones").val().concat("{{milestone}}"));
            {%endfor%}
            $('#filtermilestones').trigger('change');
        {% endif %}
        $('#filtermilestones').on("select2:select", function(e) {
            filtermilestones(); 
        });
        $('#filtermilestones').on("select2:unselect", function(e) { 
            filtermilestones();
        });

        $('#filtersprints').select2();
        {% if filtersprints %}
            {% for sprint in filtersprints %}
                $("#filtersprints").val($("#filtersprints").val().concat("{{sprint}}"));
            {%endfor%}
            $('#filtersprints').trigger('change');
        {% endif %}
        $('#filtersprints').on("select2:select", function(e) {
            filtersprints(); 
        });
        $('#filtersprints').on("select2:unselect", function(e) { 
            filtersprints();
        });

        $('#filtercolumns').select2();
        {% if filtercolumns %}
            {% for column in filtercolumns %}
                $("#filtercolumns").val($("#filtercolumns").val().concat("{{column}}"));
            {%endfor%}
            $('#filtercolumns').trigger('change');
        {% endif %}
        $('#filtercolumns').on("select2:select", function(e) {
            filtercolumns(); 
        });
        $('#filtercolumns').on("select2:unselect", function(e) { 
            filtercolumns();
        });

        $('#filterteams').select2();
        {% if filterteams %}
            {% for team in filterteams %}
                $("#filterteams").val($("#filterteams").val().concat("{{team}}"));
            {%endfor%}
            $('#filterteams').trigger('change');
        {% endif %}
        $('#filterteams').on("select2:select", function(e) {
            filterteams(); 
        });
        $('#filterteams').on("select2:unselect", function(e) { 
            filterteams();
        });

        $('#filterprioritys').select2();
        {% if filterprioritys %}
            {% for priority in filterprioritys %}
                $("#filterprioritys").val($("#filterprioritys").val().concat("{{priority}}"));
            {%endfor%}
            $('#filterprioritys').trigger('change');
        {% endif %}
        $('#filterprioritys').on("select2:select", function(e) {
            filterprioritys(); 
        });
        $('#filterprioritys').on("select2:unselect", function(e) { 
            filterprioritys();
        });

        $('#filtertypes').select2();
        {% if filtertypes %}
            {% for type in filtertypes %}
                $("#filtertypes").val($("#filtertypes").val().concat("{{type}}"));
            {%endfor%}
            $('#filtertypes').trigger('change');
        {% endif %}
        $('#filtertypes').on("select2:select", function(e) {
            filtertypes(); 
        });
        $('#filtertypes').on("select2:unselect", function(e) { 
            filtertypes();
        });

        $('#filterlabels').select2();
        {% if filterlabels %}
            {% for label in filterlabels %}
                $("#filterlabels").val($("#filterlabels").val().concat("{{label}}"));
            {%endfor%}
            $('#filterlabels').trigger('change');
        {% endif %}
        $('#filterlabels').on("select2:select", function(e) {
            filterlabels(); 
        });
        $('#filterlabels').on("select2:unselect", function(e) { 
            filterlabels();
        });

        $('#filterassignees').select2();
        {% if filterassignees %}
            {% for assignee in filterassignees %}
                $("#filterassignees").val($("#filterassignees").val().concat("{{assignee}}"));
            {%endfor%}
            $('#filterassignees').trigger('change');
        {% endif %}
        $('#filterassignees').on("select2:select", function(e) {
            filterassignees(); 
        });
        $('#filterassignees').on("select2:unselect", function(e) { 
            filterassignees();
        });

        $('#filterexcludes').select2();
        {% if filterexcludes %}
            {% for label in filterexcludes %}
                $("#filterexcludes").val($("#filterexcludes").val().concat("{{label}}"));
            {%endfor%}
            $('#filterexcludes').trigger('change');
        {% endif %}
        $('#filterexcludes').on("select2:select", function(e) {
            filterexcludes(); 
        });
        $('#filterexcludes').on("select2:unselect", function(e) { 
            filterexcludes();
        });

        table = $('#dataTables').DataTable({
            columnDefs: [ { "targets": "no-sort", "orderable": false }, { "targets": "no-string", "type" : "num" } ],
            responsive: true,
            iDisplayLength: 100,
            order: [[ 1, "asc" ]],
        });

        {% if not showfilters %}
        $("#filters").addClass("d-none");
        $("#filters").removeClass("d-flex");
        {% endif %}

        showhide();   

        $("#mycontent").show();
    });

    {% if wssuse and fgpoker %}
        var conn;

        function connect() {
            conn = new WebSocket("{{wssurl}}");
            
            conn.onopen = function(e) {
                console.log("== CONNECT");
                {% set userkey = "" %}
                {% if app.user %}
                    {% set userkey = app.user.apikey %}
                {%endif%}

                subscribe("home",{{id}},"{{userkey}}");
                sendMessage({command: "alive"});
            };

            conn.onmessage = function(e) {
                ret=JSON.parse(e.data);
                console.log("MESSAGE REU ="+ret.command);

                switch(ret.command) {
                    case "alive" :
                        if(!$('#online'+ret.from.id).length) {
                            img='<img id="online'+ret.from.id+'" src="'+ret.from.avatar+'" class="avatar ml-2 mr-2" title="'+ret.from.displayname+'">';
                            $("#online").append(img);

                            $("tr").each(function(){
                                line=$(this);
                                issueid=$(this).data("id");
                                url="{{path("app_poker_get",{userid:"xxx",issueid:"yyy"})}}";
                                url=url.replace("xxx",ret.from.id);
                                url=url.replace("yyy",issueid);
                                $.ajax({
                                    method: "POST",
                                    url: url,
                                    async: false,
                                    success: function(data) {
                                        html ='<div class="d-flex flex-column align-items-center"  data-user="'+ret.from.id+'">';
                                        html+='<img src="'+ret.from.avatar+'" class="avatar mb-1" style="zoom:80%;" title="'+ret.from.displayname+'">';
                                        html+='<input class="pokervalue" id="poker-'+ret.from.id+'-'+issueid+'" data-user="'+ret.from.id+'" data-issue="'+issueid+'" type="number" style="width:60px" value="'+data+'"></input>';
                                        html+='</div>';
                                        line.find(".pokertd").append(html);
                                    },
                                });       

                            })
                        }
                        
                        if(ret.from.id!={{app.user.id}}) {
                            console.log("meto");
                            sendMessage({command: "meto"});
                        }
                    break;

                    case "adead" :
                        $('#online'+ret.from.id).remove();
                        $('[data-user='+ret.from.id+']').remove();
                    break;

                    case "meto" :
                        if(!$('#online'+ret.from.id).length) {
                            html='<img id="online'+ret.from.id+'" src="'+ret.from.avatar+'" class="avatar ml-2 mr-2" title="'+ret.from.displayname+'">';
                            $("#online").append(html);
                            $(".pokertd").append(html);
                        }
                    break;
                }
            };

            conn.onclose = function(e) {
                console.log("== DISCONNECT");
                $('#online img').remove();
                console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
                setTimeout(function() { connect(); }, 1000);        
            };
        }

        connect();

        $("body").on("input", ".pokervalue", function () {
            console.log($(this).val());             
        });        
    {% endif %}    
{% endblock %}