{% set style="margin:30px" %}


    <div class="userhero" style="padding:0px 15px;margin-bottom:10px; width:100%; height:400px;">

        <div class="userherobackground" style="height:100%; text-align:left; background-image:url(/{{appAlias}}/uploads/hero/{{config.hero01}});background-size:cover; background-position: center; border-radius:10px;" >
    
            <div class="userherodarker" style="padding:30px; width:100%; height:100%; position:relative; background-color:var(--colorbgbodydarkdarker); opacity:0.7; border:2px solid #fff; border-radius:10px;"></div>
            
            <div class="userherocontainer" style="position:relative; top:-400px; display:flex; padding:30px; width:100%;"%> 

                <a class="herouseravatar" href="{{path("app_home_user",{userpseudo:user.slug})}}" style="width:200px">
                    <div style="padding: 0px 15px 0px 0px; text-align:center;">
                        <img src="/{{ appAlias }}/uploads/avatar/{{ user.avatar }}" class="mb-2" style="border-radius:100%; width:100px;">
                        <h2>{{user.pseudo}}</h2>
                        En voir plus
                    </div>
                </a>

                <div class="userherogrid grid grid-user" style="width:100%">
                    <div class="grid-sizer"></div>
                    <div class="gutter-sizer"></div>

                    {% for illustration in illustrations|slice(0, 19) %}
                        {% set appthumbwidth=app.session.get("appthumbwidth") %}
                        {% set appthumbheight=app.session.get("appthumbheight") %}

                        {% set classmini="" %}
                        {% 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 %}

                            {% set position = (loop.index - 1) % 10 + 1 %}
                            {% if position == 1 or position == 8 %}
                                {% set classmini = 'grid-item-mini-50' %}
                            {% else %}
                                {% set classmini = 'grid-item-mini-25' %}
                            {% 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 %}
                        {% set source=source~"?"~illustration.updatetime|date('ymdHis') %}
                        <a href="{{ path("app_illustration_view",{"by":"home","idcat":illustration.category.id,"id":illustration.id}) }}">
                            <div data-loop="{{loop.index}}" id="illustration{{illustration.id}}" class="grid-item grid-item-size {{class}} {{classmini}} cssfilter" 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}}"); min-width:100px;">
                            </div>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>