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

{% block localstyle %}
    #main {
        padding: 0px; 
        display:none;
        margin-bottom:200px;
    }
    
    {% if app.session.get("appthumbfilter")=="1" %}
    .cssfilter {
        filter: grayscale({{app.session.get("appthumbfiltergrayscale")}}%) opacity({{app.session.get("appthumbfilteropacity")}}%) sepia({{app.session.get("appthumbfiltersepia")}}%);
        transition: -webkit-filter 0.1s;    
    }

    .cssfilter:hover {
        filter: unset;
        -webkit-filter: unset;
        -moz-filter: unset;
        -o-filter: unset;
        -ms-filter: unset;

        -webkit-transition: -webkit-filter 0.1s;
        transition: -webkit-filter 0.1s;    
    }
    {% endif %}

    {% for category in categorys|sort((a, b) => a.order <=> b.order) %}    
        {% if category.usecategoryconfig and category.appthumbfilter %}
            .cssfilter-{{category.id}} {
                filter: grayscale({{category.appthumbfiltergrayscale}}%) opacity({{category.appthumbfilteropacity}}%) sepia({{category.appthumbfiltersepia}}%);
                transition: -webkit-filter 0.1s;    
            }

            .cssfilter-{{category.id}}:hover {
                filter: unset;
                -webkit-filter: unset;
                -moz-filter: unset;
                -o-filter: unset;
                -ms-filter: unset;

                -webkit-transition: -webkit-filter 0.1s;
                transition: -webkit-filter 0.1s;    
            }
        {% endif %}
    {% endfor %}
{% endblock %}

{% block body %}

<!-- FOLIOMENU -----------------------------------------------------------------------------------------------------------------------------------------------!-->

<div class="foliomenu">
    <a href="#top"><img src="/{{ appAlias }}/uploads/avatar/{{ user.avatar }}" class="logo"></a>

    <div>
        <i class="fa fa-circle fa-fw"></i> <a href="{{ path("app_home") }}">Accueil</a>&nbsp;
        {% for category in categorys|sort((a, b) => a.order <=> b.order) %}
            {% if not category.illustrations is empty %}
                <i class="fa fa-circle fa-fw"></i> <a href="#{{ category.name }}">{{category.name}}</a>&nbsp;
            {% endif %}
        {% endfor %}
        {% if not webzines is empty %}
        <i class="fa fa-circle fa-fw"></i> <a href="#webzine">Webzines</a>&nbsp;
        {% endif %}
        <i class="fa fa-circle fa-fw"></i> <a href="#link">Liens</a>&nbsp;
        <i class="fa fa-circle fa-fw"></i> <a href="#contact">Contact</a>&nbsp;
    </div>

    <div class="float-right">
        {% if app.user %}
            <a href="{{path("app_user_profil")}}">
                <img src="{{app.user.avatar|urlavatar}}" class="avatar">
            </a>

            {% if is_granted('ROLE_ADMIN') %}
                <a href={{ path("app_admin") }} class="btn btn-link" title="Configuration">
                    <i class="fa fa-cog fa-fw"></i>
                </a>
            {% endif %}

            <a href="" data-toggle="modal" class="btn btn-link" title="Ajouter" data-target="#addmodal">
                <i class="fa fa-plus fa-fw"></i>
            </a>

            <a href={{ path("app_logout") }} class="btn btn-link" title="Déconnexion">
                <i class="fa fa-sign-out-alt fa-fw"></i>
            </a>           
        {% else %}
            <a href={{ path("app_login") }} class="btn btn-link" title="Connexion">
                <i class="fa fa-sign-in-alt fa-fw"></i>
            </a>  
        {% endif %}      
    </div>
</div>

<div class="foliotop">
    <a href="#top"><i class="fa fa-chevron-up"></i></a>
</div>

<!-- HEROHEADER ------------------------------------------------------------------------------------------------------------------------------------------------!-->
    <div id="top" class="heroheader" displaynone>
        {%if not config.hero01 is empty %}
            <div class="cssfilter" style="background-image:url(/{{appAlias}}/uploads/hero/{{config.hero01}})"></div>
        {%endif%}

        {%if not config.hero02 is empty %}
            <div class="cssfilter" style="background-image:url(/{{appAlias}}/uploads/hero/{{config.hero02}})"></div>
        {%endif%}

        {%if not config.hero03 is empty %}
            <div class="cssfilter" style="background-image:url(/{{appAlias}}/uploads/hero/{{config.hero03}})"></div>
        {%endif%}

        {%if not config.hero04 is empty %}
            <div class="cssfilter" style="background-image:url(/{{appAlias}}/uploads/hero/{{config.hero04}})"></div>
        {%endif%}

        {%if not config.hero05 is empty %}
            <div class="cssfilter" style="background-image:url(/{{appAlias}}/uploads/hero/{{config.hero05}})"></div>
        {%endif%}
    </div>

    <div class="herofloatmenu" style="position: absolute; top: 0px; right: 10px;">
        {% if app.user %}
            <a href="{{path("app_user_profil")}}">
                <img src="{{app.user.avatar|urlavatar}}" class="avatar">
            </a>

            {% if is_granted('ROLE_ADMIN') %}
                <a href={{ path("app_admin") }} class="btn btn-link" title="Configuration">
                    <i class="fa fa-cog fa-fw"></i>
                </a>
            {% endif %}

            <a href="" data-toggle="modal" class="btn btn-link" title="Ajouter" data-target="#addmodal">
                <i class="fa fa-plus fa-fw"></i>
            </a>

            <a href={{ path("app_logout") }} class="btn btn-link" title="Déconnexion">
                <i class="fa fa-sign-out-alt fa-fw"></i>
            </a>           
        {% else %}
            <a href={{ path("app_login") }} class="btn btn-link" title="Connexion">
                <i class="fa fa-sign-in-alt fa-fw"></i>
            </a>  
        {% endif %}   
    </div>
    <div class="herobox"></div>
    <div class="herotitle">
        <h1 style="text-transform:uppercase">{{ (user.pseudo?user.pseudo:user.displayname) }}</h1>

        <div class="heromenu" >
            {% if not config.appsubname is empty %}
                <i style="font-size:80%;">{{ config.appsubname }}</i><br>
            {% endif %}

 

            <div class="linkmenu" style="clear:both">
                {% if user.email is not empty %}
                <a href="mailto:{{ user.email }}" target="_blank" title="Email"><i class="fas fa-envelope fa-2x"></i></a>
                {% endif %}            
                {% if config.facebook is not empty %}
                <a href="{{ config.facebook }}" target="_blank" title="Facebook"><i class="fab fa-facebook fa-2x"></i></a>
                {% endif %}
                {% if config.instagram is not empty %}
                <a href="{{ config.instagram }}" target="_blank" title="Instagram"><i class="fab fa-instagram fa-2x"></i></a>
                {% endif %}
                {% if config.twitter is not empty %}
                <a href="{{ config.twitter }}" target="_blank" title="Twitter"><i class="fab fa-twitter fa-2x"></i></a>
                {% endif %}
                {% if config.google is not empty %}
                <a href="{{ config.google }}" target="_blank" title="Google"><i class="fab fa-google-plus fa-2x"></i></a>
                {% endif %}
                {% if config.youtube is not empty %}
                <a href="{{ config.youtube }}" target="_blank" title="Youtube"><i class="fab fa-youtube fa-2x"></i></a>
                {% endif %}     
                <a href="{{ path("app_feed") }}" target="_blank" title="RSS"><i class="fa fa-rss-square fa-2x"></i></a>    
            </div>                    


            <div class="catmenu">
                <a href="{{ path("app_home") }}"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Accueil</a><br>
                
                {% for category in categorys|sort((a, b) => a.order <=> b.order) %}
                    {% if not  category.illustrations is empty %}
                        <a href="#{{ category.name }}"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> {{category.name}}</a><br>
                    {% endif %}
                {% endfor %}

                {% if not webzines is empty %}
                    <a href="#webzine"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Webzines</a><br>
                {% endif %}

                {% if not links is empty %}
                    <a href="#link"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Liens</a><br>
                {% endif %}
                
                <a href="#contact"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Contact</a><br>
            </div>   

        </div>
    </div>
    <div class="herologo">
        <img src="/{{ appAlias }}/uploads/avatar/{{ user.avatar }}">
    </div>

<!-- GRID ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
    {% set style="margin:30px" %}
    {% if app.session.get("appmaxthumbwidth")!="0" %}
        {% set style="max-width:"~app.session.get("appmaxthumbwidth")~"px; margin:30px auto;" %}
    {% endif %}
    <div class="grid" style="{{ style }}">
        <div class="grid-sizer"></div>
        <div class="gutter-sizer"></div>

        {% for category in categorys|sort((a, b) => a.order <=> b.order) %}
            {% if not category.illustrations is empty %}
                <div id="{{ category.name }}" class="grid-item grid-item-full"><h1 class="mt-5">{{ category.name }}</h1></div>
                {% for illustration in category.illustrations %}
                    {% set appthumbwidth=app.session.get("appthumbwidth") %}
                    {% set appthumbheight=app.session.get("appthumbheight") %}
                    {% if category.usecategoryconfig %}
                        {% set appthumbwidth=category.appthumbwidth %}
                        {% set appthumbheight=category.appthumbheight %}
                    {% endif %}

                    {% if appthumbwidth==0 %}
                        {% set class="" %}    
                        {% if loop.index < 40 %}     
                            {% if loop.index == 1 %}
                                {% set class="grid-item-size-4" %}            
                            {% elseif loop.index is divisible by(28) %}
                                {% set class="grid-item-size-4" %}            
                            {% elseif loop.index is divisible by(7) %}
                                {% set class="grid-item-size-2" %}            
                            {% elseif loop.index is divisible by(46) %}
                                {% set class="grid-item-size-4" %}            
                            {% endif %}
                        {% elseif loop.index > 48 %}
                            {% if loop.index == 49 %}
                                {% set class="grid-item-size-4" %}            
                            {% elseif (loop.index-49) is divisible by(28) %}
                                {% set class="grid-item-size-4" %}            
                            {% elseif (loop.index-49) is divisible by(7) %}
                                {% set class="grid-item-size-2" %}            
                            {% endif %}
                        {% endif %}
                    {% elseif appthumbwidth==1 %} {% set class="" %}
                    {% elseif appthumbwidth==2 %} {% set class="grid-item-size-2" %}
                    {% endif %}

                    {%if appthumbheight==0 %}
                        {% set class=class~" grid-item-size-square" %}
                    {% elseif appthumbheight==1 %}
                        {% set class=class~" grid-item-size-proportion" %}
                    {% else %}
                        {% set class=class~" grid-item-size-page" %}
                    {% endif %}

                    {% set source="thumb_"~illustration.illustration %}
                    {% if appthumbheight!=0  %}
                        {% set source="thumbori_"~illustration.illustration %}
                    {% endif %}

                    <a href="{{ path("app_illustration_view",{"by":"user","idcat":category.id,"id":illustration.id}) }}">
                        <div id="illustration{{illustration.id}}" class="grid-item grid-item-size {{class}} cssfilter cssfilter-{{category.id}} no-cache-bg" data-width="{{illustration.width}}"  data-background-image="/{{ appAlias }}/uploads/illustration/{{source}}"  data-height="{{illustration.height}}" style="height:auto;background-position: center ; background-size: cover; background-image: url(/{{ appAlias }}/uploads/illustration/{{source}}");">
                        </div>
                    </a>
                {% endfor %}        
            {% endif %}
        {% endfor %}

<!-- WEBZINE ------------------------------------------------------------------------------------------------------------------------------------------------------!-->

        {% if not webzines is empty %}
            <div id="webzine" class="grid-item grid-item-full"><h1 class="mt-5">Webzines</h1></div>
        {% endif %}

        {% set setname="" %}
        {% for webzine in webzines %}
            {% if not webzine.webzinepages is empty %}
                {% if setname!=webzine.set %}
                    {% if not webzine.set is empty %}
                        <div id="webzine" class="grid-item grid-item-full"><h2 class="mt-3 pl-3">{{webzine.set}}</h2></div>
                    {% endif %}
                    {% set setname=webzine.set %}
                {% endif %}
                {% set page=webzine.webzinepages[0] %}
                {% set source="thumbori_"~page.illustration %}
                {% set class=" grid-item-size-2 grid-item-size-page" %}

                <a href="{{ path("app_webzine_view",{"idcat":webzine.id,"id":page.id,"by":"user"}) }}">
                <div id="webzine{{webzine.id}}" class="grid-item grid-item-size {{class}} cssfilter no-cache-bg" data-width="{{page.width}}"  data-background-image="/{{ appAlias }}/uploads/webzine/{{source}}"  data-height="{{page.height}}" style="height:auto;background-position: center ; background-size: cover; background-image: url(/{{ appAlias }}/uploads/webzine/{{source}}");">
                </div>
                </a>
            {% endif %}
        {% endfor %}

<!-- LINK ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
        {% if not links is empty %}
            <div id="link" class="grid-item grid-item-full"><h1 class="mt-5">Liens</h1></div>
            
            <div class="grid-item grid-item-size grid-item-size-3 grid-item-size-square cssfilter" style="height:200px;background-position: center; background-size: cover; background-image: url(/{{ appAlias }}/uploads/image/{{ config.imglink }});">
            </div>

            <div class="grid-item grid-item-size grid-item-size-6 grid-item-size-noresize linkurl" style="padding:0px 15px;">
                {% for link in links|sort((a, b) => a.order <=> b.order) %}
                    <a href="{{link.url}}" target="_blank">{{ link.name }}</a>
                {% endfor %}
            </div>
        {%endif%}

<!-- CONTACT ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
        <div id="contact" class="grid-item grid-item-full"><h1 class="mt-5">Contact</h1></div>
        
        <div class="grid-item grid-item-size grid-item-size-3 grid-item-size-square cssfilter" style="height:200px;background-position: center; background-size: cover; background-image: url(/{{ appAlias }}/uploads/image/{{ config.imgcontact }});">

        </div>
        
        <div class="grid-item grid-item-size grid-item-size-6 grid-item-size-noresize" style="padding:0px 15px;">
            <h3>{{ user.pseudo }}</h3>
            {% if not config.appsubname is empty %}
                {{ config.appsubname }}<br>
            {%endif%}
            {% if not config.appdescription is empty %}
                
                <small><br>{{ config.appdescription|raw }}</small><br>
                
            {%endif%}

            <br>
            
            {% if user.email is not empty %}
            <i class="fas fa-envelope"></i> Email = <a href="mailto:{{ user.email }}" target="_blank" title="Email">{{ user.email }}</a><br>
            {% endif %}            
            {% if config.facebook is not empty %}
            <i class="fab fa-facebook"></i> Facebook = <a href="{{ config.facebook }}" target="_blank" title="Facebook">{{ config.facebook }}</a><br>
            {% endif %}
            {% if config.instagram is not empty %}
            <i class="fab fa-instagram"></i> Instagram = <a href="{{ config.instagram }}" target="_blank" title="Instagram">{{ config.instagram }}</a><br>
            {% endif %}
            {% if config.twitter is not empty %}
            <i class="fab fa-twitter"></i> Twitter = <a href="{{ config.twitter }}" target="_blank" title="Twitter">{{ config.twitter }}</a><br>
            {% endif %}
            {% if config.google is not empty %}
            <i class="fab fa-google-plus"></i> Google = <a href="{{ config.google }}" target="_blank" title="Google">{{ config.google }}</a><br>
            {% endif %}
            {% if config.youtube is not empty %}
            <i class="fab fa-youtube"></i> Youtube = <a href="{{ config.youtube }}" target="_blank" title="Youtube">{{ config.youtube }}</a><br>
            {% endif %}         
            
        </div>
    </div>    

<!-- ADDMODAL ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
    {% if app.user %}
        <div id="addmodal" class="modal" tabindex="-1" role="dialog" style="z-index:100000">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Ajouter</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    
                    <div class="modal-body" style="display:flex; flex-direction: column;">
                        <a href={{ path("app_illustration_submit",{"by":"user","userid":app.user.id}) }} class="btn btn-link" title="Créer une Illustration">
                            Ajouter une illustration
                        </a>

                        <a href={{ path("app_webzine_submit",{"by":"user","userid":app.user.id}) }} class="btn btn-link" title="Créer une Illustration">
                            Ajouter un Webzine
                        </a>                        
                    </div>            
                </div>
            </div>
        </div>    
    {% endif %}
{% endblock %}

{% block localjavascript %}
function getNoCacheBgElements() {
  return document.querySelectorAll('.no-cache-bg');
}

function loadBgImageForElement(element) {
  element.style['background-image'] = 
    'url('+ element.attributes['data-background-image'].value + '?' + (new Date()).getTime() +')';
}

function loadBgImages() {
  for(
    var i = 0, elements = getNoCacheBgElements();
    i < elements.length;
    loadBgImageForElement(elements[i]), i++ 
  );
}


window.onload = function() {
  loadBgImages();
};

    $(document).ready(function() {
        $('body').imagesLoaded(function() {
            height=Math.max(500,$(window).height());
            $('.heroheader').height(height);
            himg=$('.herologo img').height();
            $('.herologo').css({ top: (height-himg-50) +'px' });

            $('.heroheader').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 6000,
                dots: true,
                touchMove: false,
                pauseOnDotsHover: true,
                fade: true,
                cssEase: 'linear',
                prevArrow: false,
                nextArrow: false,
                customPaging: function(slider, i) {
                    return '<span class="heroheader-dot fa fa-circle fa-fw"></span>';
                }
            });

            $("#main").show();


            resizeThumb();


            $('.grid').masonry({
                columnWidth: '.grid-sizer',
                gutter: '.gutter-sizer',
                itemSelector: '.grid-item',
                percentPosition: true,
                horizontalOrder: false,
            });

            if (location.hash) {
                console.log(location.hash);
                $(document).scrollTop( $(location.hash).offset().top -60);  
                // = location.hash;
            }            
        });
    });

    $(window).resize(function() {
        $(window).scroll();
        height=Math.max(500,$(window).height());
        $('.heroheader').height(height);
        himg=$('.herologo img').height();
        $('.herologo').css({ top: (height-himg-50) +'px' });
        resizeThumb();
    });  

    $(window).scroll(function () {
        if($(window).width()>=980) {
            // set distance user needs to scroll before we start fadeIn
            if ($(this).scrollTop() > 300) {
                if($('.foliomenu').is(":hidden")) $('.foliomenu').show();
            } else {
                if($('.foliomenu').is(":visible")) $('.foliomenu').hide();
            }
        }
        else {
            if($('.foliomenu').is(":hidden")) $('.foliomenu').show();
        }

        if ($(this).scrollTop() > 300) {
            if($('.foliotop').is(":hidden")) $('.foliotop').show();
        } else {
            if($('.foliotop').is(":visible")) $('.foliotop').hide();
        }
    });    

    function resizeThumb() {
        {% if app.session.get("appmaxthumbwidth")!="0" %}
            width=$(window).width();
            maxwidth={{ app.session.get("appmaxthumbwidth") }};

            if(maxwidth+30>width) {
                $(".grid").css("max-width","none");
                $(".grid").css("margin","30px");
            }
            else {
                $(".grid").css("max-width","{{ app.session.get("appmaxthumbwidth") }}px");
                $(".grid").css("margin","30px auto");
            }
        {% endif %}

        $(".grid-item-size").each(function() {
            if(!$(this).hasClass("grid-item-size-noresize")) {
                if($(this).hasClass("grid-item-size-square")) {
                    $(this).height($(this).width());
                }
                else if($(this).hasClass("grid-item-size-proportion")) {
                    var width=$(this).width();
                    var oriwidth=$(this).data("width")
                    if(oriwidth>0) {
                        pourcentage=width*100/oriwidth;
                        height=$(this).data("height")*pourcentage/100;
                        $(this).height(height);
                    }
                    else {
                        $(this).height($(this).width());
                    }
                }
                else {
                    $(this).height($(this).width()*30/21);
                }
            } 
        }); 
    }
{% endblock %}