{% 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 %}
{% endblock %}

{% block body %}

<!-- FOLIOMENU -----------------------------------------------------------------------------------------------------------------------------------------------!-->
    <div class="foliomenu">
        <a href="#top"><img src="{{ asset("uploads/logo/"~app.session.get("logodark")) }}" class="logo"></a>

        <div>
            {% if users is not empty %}
                <i class="fa fa-circle fa-fw"></i> <a href="#membre">Membres</a>&nbsp;
            {% endif %}

            {% if illustrations is not empty %}
            <i class="fa fa-circle fa-fw"></i> <a href="#illustration">Illustrations</a>&nbsp;
            {% endif %}

            {% if not webzines is empty %}
            <i class="fa fa-circle fa-fw"></i> <a href="#webzine">Webzines</a>&nbsp;
            {% endif %}
            
            {% if not links is empty %}
            <i class="fa fa-circle fa-fw"></i> <a href="#link">Liens</a>&nbsp;
            {% endif %}
        </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" 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 app.session.get("hero01") is empty %}
            <div class="cssfilter" style="background-image:url(/{{appAlias}}/uploads/hero/{{app.session.get("hero01")}})"></div>
        {%endif%}

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

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

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

        {%if not app.session.get("hero05") is empty %}
            <div class="cssfilter"style="background-image:url(/{{appAlias}}/uploads/hero/{{app.session.get("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" 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><a href="#site">{{ (app.session.get("appname")) }}</a></h1>

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

            <div class="linkmenu" style="clear:both">
                {% if app.session.get('email') is not empty %}
                <a href="mailto:{{ app.session.get('email') }}" target="_blank" title="Email"><i class="fas fa-envelope fa-2x"></i></a>
                {% endif %}            
                {% if app.session.get('facebook') is not empty %}
                <a href="{{ app.session.get('facebook') }}" target="_blank" title="Facebook"><i class="fab fa-facebook fa-2x"></i></a>
                {% endif %}
                {% if app.session.get('instagram') is not empty %}
                <a href="{{ app.session.get('instagram') }}" target="_blank" title="Instagram"><i class="fab fa-instagram fa-2x"></i></a>
                {% endif %}
                {% if app.session.get('twitter') is not empty %}
                <a href="{{ app.session.get('twitter') }}" target="_blank" title="Twitter"><i class="fab fa-twitter fa-2x"></i></a>
                {% endif %}
                {% if app.session.get('google') is not empty %}
                <a href="{{ app.session.get('google') }}" target="_blank" title="Google"><i class="fab fa-google-plus fa-2x"></i></a>
                {% endif %}
                {% if app.session.get('youtube') is not empty %}
                <a href="{{ app.session.get('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">
                {% if not users is empty %}
                    <a href="#membre"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Membres</a><br>
                {% endif %}

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

                {% 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 %}
            </div>   
        </div>
    </div>

    <div class="herologo">
        <img src="/{{ appAlias }}/uploads/logo/{{ app.session.get('logodark') }}">
    </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>

<!-- SITE ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
        <div>
            <div id="site" class="grid-item grid-item-full"><h1 class="mt-5 mb-3"></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/{{ app.session.get("imgcontact")}});">
            </div>
            
            <div class="grid-item grid-item-size grid-item-size-6 grid-item-size-noresize" style="padding:0px 15px;">
                <h1 style="border:none; padding:0px;">{{ app.session.get("appname")}}</h1>
                
                {% if not app.session.get("appsubname") is empty %}
                    {{ app.session.get("appsubname")}}<br>
                {%endif%}

                {% if not app.session.get("appdescription") is empty %}
                    <br>{{ app.session.get("appdescription")|raw}}
                {%endif%}
                
                {% if app.session.get('email') is not empty or app.session.get('facebook') is not empty or app.session.get('instagram') is not empty or app.session.get('twitter') is not empty or app.session.get('google') is not empty or app.session.get('youtube') is not empty %}
                    <br><br>
                {% endif %}

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

<!-- MEMBRE ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
        {% if not users is empty %}
            <div>
                <div id="membre" class="grid-item grid-item-full"><h1 class="mt-5 mb-3">Membres</h1></div>
                
                {% for user in users %}
                    <div class="grid-item grid-item-size grid-item-size-15 grid-item-size-small-3 grid-item-size-noresize" style="padding:0px 5px;">
                        <a class="member" href="{{path("app_home_user",{userpseudo:user.slug})}}">
                            <img src="/{{ appAlias }}/uploads/avatar/{{ user.avatar }}" class="mb-2">
                            <small>{{user.pseudo}}</small>
                        </a>
                    </div>
                {% endfor %}
            </div>
        {% endif %}

<!-- ILLUSTRATION ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
        {% if not illustrations is empty %}
            <div>
                <div id="illustration" class="grid-item grid-item-full"><h1 class="mt-5 mb-3">Illustrations</h1></div>

                {% for illustration in illustrations %}
                    {% set appthumbwidth=app.session.get("appthumbwidth") %}
                    {% set appthumbheight=app.session.get("appthumbheight") %}

                    {% 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":"home","idcat":illustration.category.id,"id":illustration.id}) }}">
                        <div id="illustration{{illustration.id}}" class="grid-item grid-item-size {{class}} cssfilter 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 %}        
            </div>
        {% endif %}

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

                {% 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",{"by":"home","idcat":webzine.id,"id":page.id}) }}">
                        <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 %}
            </div>
        {% endif %}

<!-- LINK ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
        {% if not links is empty %}
            <div>
                <div id="link" class="grid-item grid-item-full"><h1 class="mt-5 mb-3">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/{{ app.session.get("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>
            </div>
        {% endif %}

<!-- BOTTOM ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
        <div id="bottom" class="grid-item grid-item-full" style="height:300px">
    </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 %}