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

{% set color = app.session.get('color') %}
{% set colormain = color['main'] %}

{% block pagewrapper %}
    <div id="pagecontainer" style="margin: 0px -30px;"></div>
    <div id="gridtemplate" style="max-width:1500px; margin:auto; margin-bottom:30px">
        <div class="col-md-3">qsdfqsdfqsd</div>

        <div class="col-md-9">
            {% if bookmarks is not empty %}
                <div class="bookmark-container">
                    {% if items is not empty %}
                        <h3 class="grid-title" data-idcategory="bookmark" style="{{ colorbodyfont }}">Favoris</h3>
                    {% else %}
                        <p></p>
                    {% endif %}                    
                    <div class="grid clearfix">
                        <div class="grid-sizer grid-small"></div>
                        <div class="grid-gutter-sizer"></div>
                        {% for bookmark in bookmarks %}
                            <div class="grid-item grid-small">
                                <div class="grid-item-content" style="background-color: {{ bookmark.color ? "#"~bookmark.color : '#'~colormain }};">
                                    <a  style="cursor:pointer" onClick="modBookmark({{ bookmark.id }})" class="item-update"><i style="color: #FFF" class="fa fa-file" title="Modifier le favori"></i></a>

                                    {% if bookmark.target == 'frame' %}
                                        <a class="linktosonde" data-sonde="{{ bookmark.title }}" style="cursor:pointer" onClick="showFrameitem('bookmark{{ bookmark.id }}','{{ bookmark.url }}')">
                                    {% elseif bookmark.target == "_self" %}
                                        <a class="linktosonde" data-sonde="{{ bookmark.title }}" href="{{ bookmark.url }}" target="{% if access=="user" %}_top{% else %}{{ bookmark.target }}{% endif %}">
                                    {% else %}
                                        <a class="linktosonde" data-sonde="{{ bookmark.title }}" href="{{ bookmark.url }}" target="{{ bookmark.target }}">
                                    {% endif %}

                                    <div class="item-link clearfix">
                                        <div class="grid-item-logo">
                                            {% if bookmark.icon %}
                                                <img class="grid-item-img" height="110" src="/{{ alias }}/{{ bookmark.icon.label }}">
                                            {% else %}
                                                <img class="grid-item-img" height="110" src="/{{ alias }}/uploads/icon/icon_pin.png">
                                            {% endif %}
                                        </div>

                                        <div class="grid-item-title">
                                            <h2>{{ bookmark.title }}</h2>
                                            <span>{{ bookmark.subtitle|nl2br }}</<span>
                                        </div>                    
                                    </div>
                                    </a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% else %}
                <div class="bookmark-container" style="display:none">
                    <h3 class="grid-title" data-idcategory="bookmark"">Favoris</h3>
                    <div class="grid clearfix">
                        <div class="grid-sizer grid-small"></div>
                        <div class="grid-gutter-sizer"></div>
                    </div>
                </div>
            {% endif %}

            {% set mycategs = [] %}
            {% for itemcategory in itemcategorys %}
                {% set haveitem=false %}

                {% for item in items if item.itemcategory==itemcategory %}

                    {% if loop.index ==1 %}
                        {% set mycategs = mycategs|merge({ (loop.index) : itemcategory}) %}
                    {% endif %}
                {% endfor %}
            {% endfor %}

            {% for itemcategory in mycategs %}
                {% set haveitem=false %}

                {% for item in items if item.itemcategory==itemcategory %}

                    {% if loop.index ==1 %}
                    {% set haveitem=true %}

                    {% if mycategs|length > 1 or bookmarks is not empty %}
                        <h3 class="grid-title" data-idcategory="{{ itemcategory.id }}">{{ itemcategory.label }}</h3>
                    {% else %}
                        <p></p>
                    {% endif %}

                    <div class="grid clearfix">
                        <div class="grid-sizer grid-small"></div>
                        <div class="grid-gutter-sizer"></div>
                    {% endif %}
                                    
                        <div class="grid-item grid-small" data-idcategory="{{ item.itemcategory.id }}" data-iditem="{{ item.id }}">
                            <div class="grid-item-content" style="background-color: {{ item.color ? "#"~item.color : '#'~colormain }};">
                                {% if item.content %}
                                <a  style="cursor:pointer" class="item-preview"><i style="color: #FFF" class="fa fa-info" title="Informations sur ce service"></i></a>
                                {% endif %}
                                
                                {% if item.protected and not app.user %}
                                    {% if mode_auth == "SAML" %}
                                        <a href="{{ path('lightsaml_sp.login') }}" {% if access=="user" %}target="_top"{% endif %}>
                                    {% elseif mode_auth == "CAS"  %}
                                        <a href="{{ path('cas_sp.login') }}" {% if access=="user" %}target="_top"{% endif %}>
                                    {% elseif mode_auth == "MYSQL"  %}
                                        <a href="{{ path('cnous_portal_user_login') }}" {% if access=="user" %}target="_top"{% endif %}>
                                {% endif %}
                                
                                {% else %}
                                    {% if item.target == 'frame' %}
                                        <a class="linktosonde" data-sonde="{{ item.title }}" style="cursor:pointer" onClick="showFrameitem({{ item.id }},'{{ item.url }}')">
                                    {% elseif item.target == "_self" %}
                                        <a class="linktosonde" data-sonde="{{ item.title }}" href="{{ item.url }}" target="{% if access=="user" %}_top{% else %}{{ item.target }}{% endif %}">
                                    {% else %}
                                        <a class="linktosonde" data-sonde="{{ item.title }}" href="{{ item.url }}" target="{{ item.target }}">
                                    {% endif %}
                                {% endif %}

                                <div class="item-link clearfix">
                                    <div class="grid-item-logo">
                                        {% if item.icon %}
                                            <img class="grid-item-img" height="110" src="/{{ alias }}/{{ item.icon.label }}">
                                        {% else %}
                                            <img class="grid-item-img" height="110" src="/{{ alias }}/uploads/icon/icon_pin.png">
                                        {% endif %}
                                    </div>

                                    <div class="grid-item-title">
                                        <h2>{{ item.title }}</h2>
                                        <span>{{ item.subtitle|nl2br }}</<span>
                                    </div>                    
                                </div>
                                </a>

                                <div class="grid-item-body" style="display:none">
                                {{ item.content|raw }}
                                </div>
                            </div>
                        </div>
                {% endfor %}
                {% if haveitem %}            
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>  
{% endblock %}

{% block localjavascript %}
    $('document').ready(function(){
        // Ajustement des frames
        $(window).resize(function() {
            AjustFrame();
        });  
		

        // Création des grilles d'items
        var optiongrid={columnWidth: '.grid-sizer', itemSelector: '.grid-item', gutter: '.grid-gutter-sizer'};
        $('body').imagesLoaded(function() {
            var grid = $('.grid').masonry(optiongrid);        
        });

        // Preview item de bureau
        $( ".grid .item-preview" ).click(function() {
            if($(this).parent().children(".grid-item-body").css('display') == 'none') {
                $(this).html('<i style="color: #FFF" class="fa fa-minus" title="Informations sur ce service"></i>');
                heightbody=$(this).parent().children(".grid-item-body").height()+30;
                heightitem=$(this).parent().parent().height();


                $(this).parent().children(".grid-item-body").show();
                $(this).parent().parent().css("width","100%");

                $(this).parent().parent().css("height",heightitem+heightbody);
                $(this).parent().children(".grid-item-content").css("height",heightitem+heightbody);
                $(this).parent().children(".item-preview").css("height",heightitem+heightbody);

                var grid = $('.grid').masonry(optiongrid);        
            }
            else {
                $(this).html('<i style="color: #FFF" class="fa fa-plus" title="Informations sur ce service"></i>');

                $(this).parent().children(".grid-item-body").hide();
                $(this).parent().parent().css("width","");
                $(this).parent().parent().css("height","");
                $(this).parent().children(".grid-item-content").css("height","");
                $(this).parent().children(".item-preview").css("height","");

                var grid = $('.grid').masonry(optiongrid);
            }
        });

        // Sur click item à sonder
        {% if activate_widsonde %}
        $( ".linktosonde" ).click(function() {
            title=$(this).attr("data-sonde");
            //$.getScript( "{{ widsonde_url }}?appli="+title );
        });        
        {% endif %}

    });


    // Ajout d'un bookmark
    function addBookmark(idwidget,touser) {
        var url="{{ path('cadoles_portal_user_bookmark_submit',{idpage:0,idwidget:'xx',touser:'yy'})}}";
        url=url.replace('xx',idwidget);
        url=url.replace('yy',touser);

        $(location).attr('href', url);
    }

    // Modifciation d'un bookmark
    function modBookmark(idbookmark) {
        var url="{{ path('cadoles_portal_user_bookmark_update',{idpage:0,id:'xx'})}}";

        url=url.replace('xx',idbookmark);
        $(location).attr('href', url);
    }

    // Ajouter un item aux bookmark
    function heartBookmark(iditem) {
        var idbookmark;

        $.ajax({
            method: "POST",
            url: "{{ path('cadoles_portal_user_bookmark_heart') }}",
            data: {
                iditem:iditem
            },
            success: function(idbookmark) {
                 location.reload();
            }            
        });

    }

    // Supprimer un fichier 
    function delFile(directory,filename) {
        var r = confirm("Confirmez-vous la suppression de ce fichier ?");
        if (r == true) {        
            $.ajax({
                method: "POST",
                url: "{{ path('cadoles_core_user_file_delete') }}",
                data: {
                    directory:directory,
                    filename:filename
                },
                success: function() {
                    location.reload();
                }            
            });        
        }
    }

    // Ajustement des frames
	function AjustFrame() {
		$('.frameajust').iframeAutoHeight({
			minHeight: 500, // Sets the iframe height to this value if the calculated value is less
			heightOffset: 0, // Optionally add some buffer to the bottom
			callback: function(callbackObject) { $(this).parent().css("height",callbackObject.newFrameHeight) ;}
		});

        if($(".frameitem").length>0) {
            var heightbody = $('html').height();
            var heightheader = $('.header').height();
            if($('.pagemenu').css("display")=="none")
                var heightmenu  = 0;
            else
                var heightmenu  = $('.pagemenu').height();

            var heightframe = heightbody-heightheader-heightmenu;

            $(".frameitem").height(heightframe);
        }
        
	}    


    // Affichage d'un Flux 
    function showFlux(idwidget, id) {
        if(id=="all")
            $(".widget[data-id="+idwidget+"]").find(".feed").show();
        else {
            $(".widget[data-id="+idwidget+"]").find(".feed").hide();
            $(".widget[data-id="+idwidget+"]").find(".flux-"+id).show();
        }

        var optiongrid={columnWidth: '.grid-sizer',itemSelector: '.grid-item'};
        var grid = $('.grid').masonry(optiongrid);         
    }

    // Affichage des frames associés aux items de bureau
    function resizeFrame() {
        var iFrame = document.getElementById('frameContent');

        var heightbody = $('html').height();
        var heightheader = $('.header').height();
        if($('#appmenu').css("display")=="none")
            var heightmenu  = 0;
        else
            var heightmenu  = $('#appmenu').height();
        

        var heightframe = heightbody-heightheader-heightmenu;
        
        $(".pageframe").each(function( index ) {
            $(this).height(heightframe);
        });
    }


    function showFrameitem(id,url,forcereload) {
        $(".pageframe").hide();

        // Si force le rechargement et frame existante on la détruit
        if(forcereload&&$("#frameitem-"+id).length)
            $("#frameitem-"+id).remove();

        // Si la frame en cours existe déjà on l'affiche
        if($("#frameitem-"+id).length)
            $("#frameitem-"+id).show();         
        // Sinon on la génère
        else
            $("#pagecontainer").append("<iframe id='frameitem-"+id+"' class='pageframe' src='"+url+"' style='border:none; width:100%'></iframe>");
        
        
        resizeFrame();
    }    
      
{% endblock %}