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

{% block beforebody %}
    {%if heros %}
        <div class="heroheader" style="top:55px;display:none;" >
            {% for hero in heros %}
                <div class="p-0 m-0" style="background-image:url(/{{appAlias}}/uploads/childheader/{{hero.childid}}/{{hero.filename}})">
                    <img id="separateur" src="/{{appAlias}}/images/separateur-g.png">
                    <div id="herotitle">
                        <h1>
                            {{hero.name}}<br>
                            <small>
                                <div style="font-size:16px">{{ hero.parenttype }}</div>
                                <span style="font-size:20px; line-height:20px; display:block">{{ hero.subname|nl2br }}</span>
                            </small>
                        </h1>

                        <a class="btn btn-success" href="{{path("app_child_view",{catparent:hero.catparent,idparent:hero.parentid,idchild:hero.childid})}}">En savoir plus</a>
                    </div>
                    {% if hero.credit %}<div class="herocredit position-absolute d-flex align-items-end justify-content-end" style="top:0px;padding:5px;font-size:80%;">© {{ hero.credit }}</div>{% endif %}
                </div>
            {%endfor%}
        </div>
    {% endif %}
{% endblock %}

{% block useractions %}
    {% if is_granted('ROLE_ADMIN') %}
        <li>
            <a href="{{path("app_blog_submit")}}"><i class="fa fa-plus fa-2x"></i></a>
        </li>  
    {% endif %}
{% endblock %}

{% block body %}
    <div class="container" style="padding-top:100px">
        <h1 class="child-name pt-0 text-uppercase mb-4">Actualités</h1>
        <div class="grid">
            <div class="grid-sizer"></div>
            <div class="gutter-sizer"></div>    
            {% for blog in blogs %}
                {% if not blog.childblogs is empty %}
                    {% set background="" %}
                    {% if not blog.childblogs[0].child.childheaders is empty and blog.childblogs[0].child.childheaders[0] %}
                        {% set background="/"~appAlias~"/uploads/childheader/"~blog.childblogs[0].child.id~"/"~blog.childblogs[0].child.childheaders[0].filename %}
                    {% endif %}

                    {% set style="height:auto;background-position: center ; background-size: cover; background-image: url("~background~")" %}
                    <a href="{{path("app_child_view",{catparent:'blog',idparent:blog.id,idchild:blog.childblogs[0].child.id})}}" class="d-block text-center">
                        <div class="grid-item grid-item-size-5 d-flex align-items-stretch">
                            <div class="grid-image d-flex align-items-center pr-2 pl-2"  style="{{style}}">
                                <div class="grid-item-title">
                                    <span class="p-1" style="font-weight:bold; text-transform:uppercase;">{{ blog.childblogs[0].child.name }}</span>
                                    <small><br><span class="p-1" style="background-color:var(--colorbgbodylight);color:var(--colorftbodylight)">{{ blog.blogtype.name }}</span></small>
                                    <small class="p-2" style="line-height:15px; display:block;">
                                        {% if blog.childblogs[0].child.subname %}
                                            {{ blog.childblogs[0].child.subname|nl2br }}<br>
                                        {% endif %}
                                        {% for tag in blog.childblogs[0].child.tags %}
                                            {% if loop.first %}<br>{%endif%}
                                            <span class="grid-tag" data-id="{{tag.id}}">#{{tag.id}}</span>
                                        {% endfor %}
                                        </small>                                    
                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>   
                {% endif %}
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block localscript %}
<script>
    function resizegrid() {
        height=$('.grid-item').width();
        height=Math.min(height,300);
        $('.grid-item').not('.grid-video').height(height)  
        
        $('.grid').masonry({
            columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer',
            itemSelector: '.grid-item',
            percentPosition: true,
            horizontalOrder: false,
        });
    } 

    $(window).resize(function() {
        if($('.heroheader').length) {
            heighthero=$('.heroheader').width()/4;
            $('.heroheader').height(heighthero);
            $('.herocredit').css({ top: (heighthero-30)+'px' });
            if($('.heroheader').width()>980) $('.heroheader').show();
        }
        resizegrid();
    }); 

    $(document).ready(function() {
        if($('.heroheader').length) {
            heighthero=$('.heroheader').width()/4;
            $('.heroheader').height(heighthero);
            $('.herocredit').css({ top: (heighthero-30)+'px' });
            if($('.heroheader').width()>980) $('.heroheader').show();
            
            {% if heros|length > 1 %}
                $('.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>';
                    }
                });  
            {% endif %}
        }
        resizegrid();
    });

    $( ".grid-item" ).hover(function() {
        $( this ).children(".grid-image").css("transform","scale(1.05)");
    }, function() {
        $( this ).children(".grid-image").css("transform","scale(1)");
    });

    $( ".grid-tag" ).hover(function() {
        $( this ).css("text-decoration","underline");
    }, function() {
        $( this ).css("text-decoration","none");
    });

    $( ".grid-tag" ).click(function() {
        url="{{path("app_child_search",{tags:"xxx"}) }}"
        url=url.replace("xxx",$(this).data("id"));
        document.location = url;
        return false;
    });
</script>
{% endblock %}