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


{% block localstyle %}
<style>
    .childsize-1 {
        zoom:80%;
    }

    .child-name {
        border-color: var(--colorbgbodydark);
        border-block-width: 3px;
        //border-bottom-style:dotted;
    }

    .child-description h1, .child-description h2 {
        margin-top:30px;
    }

    .child-sidebar {
        color:  var(--colorfttitlelight);
    }

    .child-sidebar h3 {
        font-size:1.4rem;
    }

    .grid-sizer { width: 10% }

    .grid-item {
        background-color:var(--colorbgbodydark);
        color: var(--colorfttitledark);
        overflow:hidden;
    }

    .grid-image {
        width:100%;
        transition: transform 0.3s;
    }

    .grid-item-title {
        background-color:var(--colorbgbodydark);
        color: var(--colorfttitledark);
        width:auto;
        padding:15px;
        text-align:center;
        margin:auto;

    }

    .grid-item-size-1 { width: 10% }
    .grid-item-size-2 { width: 20% }
    .grid-item-size-3 { width: 33.333333% }
    .grid-item-size-4 { width: 40% }
    .grid-item-size-5 { width: 50% } 

    .grid-tag {font-style:italic}
</style>
{% endblock %}

{% block beforebody %}
    {%if heros %}
        <div class="heroheader" style="top:55px;margin-bottom:30px;display:none;" >
            {% for hero in heros %}
                <div class="btn btn-link 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 style="padding-left:150px;">
                        <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>
                </div>
            {%endfor%}
        </div>
    {% endif %}
{% endblock %}

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

{% block body %}
    <div class="container">
        <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 page in pages %}
                {% if not page.childpages is empty %}
                    {% set background="" %}
                    {% if not page.childpages[0].child.childheaders is empty and page.childpages[0].child.childheaders[0] %}
                        {% set background="/"~appAlias~"/uploads/childheader/"~page.childpages[0].child.id~"/"~page.childpages[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:'page',idparent:page.id,idchild:page.childpages[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;">{{ page.childpages[0].child.name }}</span>
                                    <small><br><span class="p-1" style="background-color:var(--colorbgbodylight);color:var(--colorftbodylight)">{{ page.pagetype.name }}</span></small>
                                    <small class="p-2" style="line-height:15px; display:block;">
                                        {% if page.childpages[0].child.subname %}
                                            {{ page.childpages[0].child.subname|nl2br }}<br>
                                        {% endif %}
                                        {% for tag in page.childpages[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);
        }
        resizegrid();
    }); 

    $(document).ready(function() {
        if($('.heroheader').length) {
            heighthero=$('.heroheader').width()/4;
            $('.heroheader').height(heighthero);
            $('.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_searchbytag",{id:"xxx"}) }}"
        url=url.replace("xxx",$(this).data("id"));
        document.location = url;
        return false;
    });
</script>
{% endblock %}