{% 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 %}
    {% if child.childtype.id==16 %}
        {% set filename="/"~appAlias~"/uploads/child/"~child.id~"/"~child.filename %}
    {% else %}
        {% set filename=child.url %}
    {% endif %}

    <div class="mt-3" style="width:80%; margin:auto;">
        <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 %}

        {%if child.image %}
            {% set background=child.image|replace({"**appAlias**":appAlias}) %}
            <center>
                <a class="btn-link" target="_blank" href="{{filename}}" download>
                    <img src="{{background}}" class="mb-3" style="margin:auto; max-width:300px;">
                </a>
            </center>
        {% endif %}

        <div class="card card-body mt-3 mb-3">
            <a class="btn-link" target="_blank" href="{{filename}}" download>
                <div class="d-flex align-items-center">
                    <i class="fas fa-file-alt fa-2x mr-4"></i>
                    <div style="line-height: 15px;">
                        {{ child.name}}<br>
                        <small>{{ child.subname}}</small>
                    </div>
                </div>
            </a>
        </div>

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

        {{child.description|raw}}   

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