{% extends "base.html.twig" %}
{% block localstyle %}
<style>
    h1 {
        border-color: var(--colorbgbodydark);
        border-block-width: 3px;
    }

    .tag, .tagalpha, .tagname {
        background-color: var(--colorbgbodylight);
        border-radius: 10px;
        padding:5px 10px;
        margin-bottom:5px;
        display:inline-block;
        min-width:35px;
        text-align: center;
    }
    #selectcatparent, #selecttype, #selecttag {width:100%}
</style>
{% endblock %}

{% block body %}

    <div class="row mb-5">
        <div class="col-md-12 pt-3">
            <div style="display:none">
            <button data-types="16,17"  class="btn btn-search mb-1 {% if childtypes=="16,17" %} btn-success{%else%} btn-primary{%endif%}">Ressources</button>
            <button data-types="1,2"    class="btn btn-search mb-1 {% if childtypes=="1,2"   %} btn-success{%else%} btn-primary{%endif%}">Articles</button>
            <button data-types="12,13"  class="btn btn-search mb-1 {% if childtypes=="12,13" %} btn-success{%else%} btn-primary{%endif%}">Images</button>
            <button data-types="10"     class="btn btn-search mb-1 {% if childtypes=="10"    %} btn-success{%else%} btn-primary{%endif%}">Visites Guidées</button>
            <button data-types="11"     class="btn btn-search mb-1 {% if childtypes=="11"    %} btn-success{%else%} btn-primary{%endif%}">Sentiers</button>
            <button data-types="14,15"  class="btn btn-search mb-1 {% if childtypes=="14,15" %} btn-success{%else%} btn-primary{%endif%}">Vidéos</button>
            <button data-types="18,19"  class="btn btn-search mb-1 {% if childtypes=="18,19" %} btn-success{%else%} btn-primary{%endif%}">Interviews</button>
            <button data-types="22"     class="btn btn-search mb-1 {% if childtypes=="22"    %} btn-success{%else%} btn-primary{%endif%}">Bibliographies</button>
            <button data-types="30"     class="btn btn-search mb-1 {% if childtypes=="30"    %} btn-success{%else%} btn-primary{%endif%}">Photos Aériennes</button>

            {% if is_granted('ROLE_ADMIN') %}
            <button data-types="20"     class="btn btn-search mb-1 {% if childtypes=="20"    %} btn-success{%else%} btn-primary{%endif%}">Contacts</button>
            <button data-types="21"     class="btn btn-search mb-1 {% if childtypes=="21"    %} btn-success{%else%} btn-primary{%endif%}">Liens</button>
            {% endif %}
            </div>

            <div class="card card-body mt-3">
                <div class="row">
                    <div class="col col-md-6">
                        <div class="form-group ">
                            <label class="control-label">Recherche</label>
                            <input id="searchname" class="form-control rounded" placeholder="Recherche" value="{{query}}"/>
                        </div>
                    </div>

                    <div class="col col-md-6" style="display:none">
                        <div class="form-group ">
                            <label for="selectcatparent">Types de Contenus</label>
                            <select id="selectcatparent">
                                {% for catparent in catparents %}
                                    {% set selected ="" %}
                                    {% if catparent == "map" %}
                                        {% set selected ="selected" %}
                                    {% endif %}
                                    <option value="map" {{selected}}>Cartes</option>

                                    {% set selected ="" %}
                                    {% if catparent == "blog" %}
                                        {% set selected ="selected" %}
                                    {% endif %}
                                    <option value="blog" {{selected}}>Actualités</option>

                                    {% set selected ="" %}
                                    {% if catparent == "page" %}
                                        {% set selected ="selected" %}
                                    {% endif %}
                                    <option value="page" {{selected}}>Pages</option>

                                {% endfor %}
                            </select> 
                        </div>
                    </div>

                    <div class="col col-md-6">
                        <div class="form-group ">
                            <label for="selecttag">Tags</label>
                            <select id="selecttag" multiple="multiple">
                                {% for tag in lsttags %}
                                    {% set selected ="" %}
                                    {% for selectag in tags %}
                                        {% if tag.id == selectag %}
                                            {% set selected ="selected" %}
                                        {% endif %}
                                    {% endfor %}
                                    <option value="{{tag.id}}" {{selected}}>{{tag.id}}</option>     
                                {% endfor %}
                            </select> 
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-9 pt-3">
            {% set idchildtype=-100 %}
            {% set idparent=-100 %}
            {% set tbtag=[] %}
            {% set tbname=[] %}

            {% for child in childs %}
                {% if loop.first %}
                    <h1 class="mt-3 mb-3">{{ child.childtype.name|replace({"Embed ":""}) }}</h1>

                    {% if not nopagination %}
                        <div class="mypaginationup mb-3" style="text-align:center;zoom:120%";></div>          
                    {% endif %} 

                    {% if not isalpha and child.childtype.id!=30 %}
                        <div class="grid">
                            <div class="grid-sizer"></div>
                            <div class="gutter-sizer"></div>                       
                    {% endif %}
                {% endif %}

                {% if isalpha or child.childtype.id==30 %}
                    {% if child.idparent != idparent %}
                        {% if not loop.first %} </div> {% endif %}
                        <h2 class="mt-3 mb-3 MAP{{child.idparent}}">{{ child.nameparent }}</h2>
                        <div class="grid MAP{{child.idparent}}">
                            <div class="grid-sizer"></div>
                            <div class="gutter-sizer"></div>                       
                        {% set idparent=child.idparent %}
                        {% set tbname = tbname|merge({("MAP"~child.idparent):child.nameparent}) %}
                    {% endif %}
                {% endif %}

                {% set tagsclass="" %}
                {% for tag in child.tags %}
                    {% set tagid=tag.id|replace({" ":""}) %}
                    {% if tag.id not in tbtag %}
                        {% set tbtag = tbtag|merge({(tagid):tag.id}) %}
                    {% endif %}
                    {% set tagsclass=tagsclass~" tag-"~tagid %}
                {%endfor%}
                
                {% if child.childtype.id==10 %}
                    <!--
                    {% set style="" %}
                    {% set url = "/"~appAlias~"/uploads/child/"~child.id~"/"~child.filename %}
                    <a href="{{url}}" target="_blank" class="d-block text-center">
                        <div class="grid-item grid-item-size-2 grid-square d-flex align-items-stretch {{tagsclass}}">
                            <div class="grid-image d-flex align-items-center pr-2 pl-2" style="{{style}}">
                                <div class="grid-item-title">{{ child.name }}</div>
                            </div>
                        </div>
                    </a>
                    -->
                    {% set url = "/"~appAlias~"/uploads/child/"~child.id~"/"~child.filename %}
                    <h2>{{ child.name }}</h2>
                    <a href="{{path("app_child_view",{catparent:child.catparent,idparent:child.idparent,idchild:0})}}">En savoir plus</a>
                    <iframe src="{{url}}" class="align-self-stretch" style="width:100%; background-color:#000;border:none; height:400px;"></iframe>
                    <a href="{{url}}" target="_blank" class="d-block text-center mb-5"><i class="fas fa-search-plus fa-2x"></i></a>

                {% elseif child.childtype.id==12 or child.childtype.id==13 or child.childtype.id==30 %}
                    {% if child.childtype.id==12 or child.childtype.id==30 %}
                        {% set background="/"~appAlias~"/uploads/child/"~child.id~"/thumb/"~child.filename %}
                    {% else %}
                        {% set background=child.url %}
                    {% endif %}

                    {% set style="height:auto;background-position: center ; background-size: cover; background-image: url("~background~")" %}

                    <div class="grid-item grid-item-size-2 grid-square grid-modal d-flex align-items-stretch {{tagsclass}}" data-catparent="{{child.catparent}}" data-idparent="{{child.idparent}}" data-idchild="{{child.id}}">
                        <div class="grid-image d-flex align-items-center pr-2 pl-2" style="{{style}}"></div>
                    </div>
                {% elseif child.childtype.id==16 or child.childtype.id==17 %}
                    {% set style="" %}
                    {%if child.image %}
                        {% set background=child.image|replace({"**appAlias**":appAlias}) %}
                        {% set style="height:auto;background-position: center ; background-size: cover; background-image: url("~background~")" %}
                    {% else %}

                    {%endif%}
                    <a href="{{path("app_child_view",{catparent:child.catparent,idparent:child.idparent,idchild:child.id})}}">
                        <div class="grid-item grid-item-size-2 grid-a4 d-flex align-items-stretch {{tagsclass}}">
                            <div class="grid-image d-flex align-items-center pr-2 pl-2" style="{{style}}">
                                <div class="grid-item-title">{{ child.name }}</div>
                            </div>
                        </div>
                    </a>                 
                {%else%}
                    {% set style="" %}
                    {%if child.image %}
                        {% set background=child.image|replace({"**appAlias**":appAlias}) %}
                        {% set style="height:auto;background-position: center ; background-size: cover; background-image: url("~background~")" %}
                    {%endif%}
                    <a href="{{path("app_child_view",{catparent:child.catparent,idparent:child.idparent,idchild:child.id})}}">
                        <div class="grid-item grid-item-size-2 grid-square d-flex align-items-stretch {{tagsclass}}">
                            <div class="grid-image d-flex align-items-center pr-2 pl-2" style="{{style}}">                        
                                <div class="grid-item-title">{{ child.name }}</div>
                            </div>
                        </div>
                    </a>    
                {% endif %}
        
                {% if loop.last %}
                    </div>
                {% endif %}
            {%endfor%}

            {% if not nopagination %}
                <div class="mypaginationdown" style="text-align:center;zoom:120%";></div>          
            {% endif %}            
        </div>
        <div class="col-md-3">
            <div class="mt-3 p-3" style="height:100%; background-color:#efefef;">
                {% if isalpha %}
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"a"})}}">A</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"b"})}}">B</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"c"})}}">C</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"d"})}}">D</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"e"})}}">E</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"f"})}}">F</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"g"})}}">G</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"h"})}}">H</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"i"})}}">I</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"j"})}}">J</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"k"})}}">K</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"l"})}}">L</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"m"})}}">M</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"n"})}}">N</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"o"})}}">O</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"p"})}}">P</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"q"})}}">Q</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"r"})}}">R</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"s"})}}">S</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"t"})}}">T</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"u"})}}">U</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"v"})}}">V</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"w"})}}">W</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"x"})}}">X</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"y"})}}">Y</a>
                <a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"z"})}}">Z</a>
                <br><br>
                {% endif %}

                {% if isalpha %}
                    <div style="zoom:80%">
                    <span data-id="tag-all" class="btn-link tagname"><i class="fas fa-tag"></i> Afficher Tout</span>
                    {% for key, name in tbname %}
                        <span data-id="{{key}}" class="btn-link tagname"><i class="fas fa-tag"></i> {{name}}</span>
                    {% endfor %}
                    </div>
                {%else%}                
                    <span data-id="tag-all" class="btn-link tag"><i class="fas fa-tag"></i> Afficher Tout</span>
                    {% for key, tag in tbtag %}
                        <span data-id="tag-{{key}}" class="btn-link tag"><i class="fas fa-tag"></i> {{tag}}</span>
                    {% endfor %}
                {%endif%}
            </div>
        </div>
    </div>
{% endblock %}

{% block localscript %}
<script>
    $(window).resize(function() {
        resizegrid();
    }); 
    $(document).ready(function() {
        $("#selectcatparent").select2();
        $("#selecttag").select2();
        $("#selecttype").select2();
        
        {% if not nopagination and count>maxresult%}
        var itemsCount = {{count}};
        var itemsOnPage = {{maxresult}};

        url="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,first:"{{page}}"})}}";
        url=url.replaceAll("&amp;","&");
        url=url.replaceAll("%7B","{");
        url=url.replaceAll("%7D","}");

        var pagination = new Pagination({
            container: $(".mypaginationup"),
            pageClickUrl: url
        });
        pagination.make(itemsCount, itemsOnPage, {{first}});

        var pagination = new Pagination({
            container: $(".mypaginationdown"),
            pageClickUrl: url
        });
        pagination.make(itemsCount, itemsOnPage, {{first}});
        {% endif %}
        resizegrid();
    });
    function resizegrid() {
        width=$('.grid-item').width();
        console.log(width);
        $('.grid-square').not('.grid-video').height(width);
        $('.grid-a4').not('.grid-video').height(width/0.7);

        $('.grid').masonry({
            columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer',
            itemSelector: '.grid-item',
            percentPosition: true,
            horizontalOrder: false,
        });
    } 
    $(".tag").click(function(){
        id=$(this).data("id");
        if(id=="tag-all") {
            $('.grid-item').each(function() {
                $(this).addClass("d-flex");
                $(this).show();
            });
        }
        else {
            $('.grid-item').each(function() {
                $(this).removeClass("d-flex");
                $(this).hide();
            });
            
            $('.'+id).each(function() {
                $(this).addClass("d-flex");
                $(this).show();
            });
        }
        $('.grid').masonry();
    });

    $(".tagname").click(function(){
        id=$(this).data("id");
        if(id=="tag-all") {
            $('.grid').show();
            $('h2').show();
        }
        else {
            $('.grid').hide();
            $('h2').hide();
            
            $('.'+id).each(function() {
                $(this).show();
            });
        }
        $("html, body").animate({ scrollTop: 0 },200);
    });

    $('#searchname').bind("enterKey",function(e){
        $('.btn-success').click();    
    });
    $('#searchname').keyup(function(e){
        if(e.keyCode == 13)
        {
            $('.btn-success').click();    
        }
    });

    $('.grid-modal').click(function(){
        url='{{path("app_child_view",{catparent:"ccc",idparent:"ppp",idchild:"iii"})}}';
        url=url.replace("ccc",$(this).data("catparent"));
        url=url.replace("ppp",$(this).data("idparent"));
        url=url.replace("iii",$(this).data("idchild"));
        ModalLoad('mymodallarge','Galerie',url );
    });

    $('.btn-search').click(function(){
        catparent=$("#selectcatparent").val();
        types=$(this).data("types");
        tags=$("#selecttag").val().join(',');
        query=$("#searchname").val();

        url="{{path("app_child_search",{tags:"ttt",childtypes:"ppp",query:"qqq",catparents:"ccc"})}}";
        url=url.replace("ccc",catparent);
        url=url.replace("qqq",query);
        url=url.replace("ppp",types);
        url=url.replace("ttt",tags);
        url=url.replaceAll("&amp;","&");
        
        document.location=url;
    });

    $( ".grid-item" ).hover(function() {
        $( this ).children(".grid-image").css("transform","scale(1.05)");
    }, function() {
        $( this ).children(".grid-image").css("transform","scale(1)");
    });
</script>
{% endblock %}