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

{% block title %}{{app.session.get("appname")}} - {{child.name}}{% endblock %}

{% block useractions %}
    {% if is_granted('ROLE_ADMIN') %}
        <li>
            <a href="{{path("app_child",{catparent:catparent,idparent:parent.id})}}"><i class="fa fa-file fa-2x"></i></a>
        </li>  
    {% endif %}
{% endblock %}

{% block body %}
    <h1 class="child-name pt-0 text-uppercase mb-4" style="margin-top:30px">{{child.name}}</h1>
    {% if child.subname %}<div style="margin-top:-23px"><small class="child-subname">{{child.subname}}</small></div>{% endif %}

    <center>
        {% if child.childtype.id==14 or child.childtype.id==18 %}
            {% set url = "/"~appAlias~"/uploads/child/"~child.id~"/"~child.filename %}
            <video class="align-self-stretch" style="width:100%;background-color:#000;" controls="" name="media"><source src="{{url}}"></video>                        
        {% elseif child.childtype.id==10 %}
            {% set url = "/"~appAlias~"/uploads/child/"~child.id~"/"~child.filename %}
            <iframe src='{{url}}' class="align-self-stretch" style="width:100%; background-color:#000;border:none; height:500px;"></iframe>
        {% else %}
            <iframe class='widyoutube' src='{{child.url}}' class="align-self-stretch" style="width:100%; background-color:#000;border:none; height:500px;"></iframe>
        {% endif %}
    </center>

    {% for attributorder in child.childtype.childtypeattributs %}
        {% if attributorder.childattribut.name in child.attributs|keys and not child.attributs[attributorder.childattribut.name] is empty %}
            <strong>{{ attributorder.childattribut.label }}</strong> = {{ child.attributs[attributorder.childattribut.name]}}<br>
        {% endif %}
    {% endfor %}

    <div class="mt-2">{{child.description|raw}}</div>

    {% set separator="g" %}
    {%if otherpages %}
        <div class="child-separator mt-5" >
            <img src="/{{appAlias}}/images/separateur-{{separator}}.png" width="100%">
            {% if separator=="d" %} {% set separator="g" %} {%else%} {% set separator="d" %} {%endif%}
        </div>

        <div class="child-pages mb-5">
            <h3 class="mt-5">Articles associés</h3>
            <div class="grid">
                <div class="grid-sizer"></div>
                <div class="gutter-sizer"></div>                
                {% for page in otherpages %}
                    {% set style="" %}
                    {%if page.image %}
                        {% set background=page.image|replace({"**appAlias**":appAlias}) %}
                        {% set style="height:auto;background-position: center ; background-size: cover; background-image: url("~background~")" %}
                    {%endif%}
                    <a href="{{path("app_child_view",{catparent:catparent,idparent:parent.id,idchild:page.id,framed:framed,size:size})}}">
                        <div class="grid-item grid-item-size-2 grid-square 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">{{ page.name }}</div>
                            </div>
                        </div>                            
                    </a>                        
                {% endfor %}
            </div>                
        </div>
    {% endif %}     
{% endblock %}

{% block localscript %}
<script>
    $(window).resize(function() {
        resizegrid();
    }); 

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

            resizegrid();
        });

  
        
    });

    function resizegrid() {
        $('.grid-square').each(function() {
            $(this).height($(this).width());
        });  
    
        $('.grid').masonry({
            columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer',
            itemSelector: '.grid-item',
            percentPosition: true,
            horizontalOrder: false,
        });        
    } 

    $( ".grid-item" ).hover(function() {
        $( this ).children(".grid-image").css("transform","scale(1.05)");
    }, function() {
        $( this ).children(".grid-image").css("transform","scale(1)");
    });
</script>
{% endblock %}