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

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

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

{% block beforebody %}
    {% if not child.childheaders is empty %}
        <div class="heroheader" style="display:none;width:100%;" >
            {% for childheader in child.childheaders %}
                <div class="p-0 m-0" style="height:100%;background-size:cover;background-image:url({{path("app_minio_image",{file:childheader.filename})}})">
                    <div style="padding-left:150px;padding-top:70px; height:auto;">
                        <h1>
                            <div style="font-size:16px; margin-bottom: 10px;">
                                {% set haveother=false %}
                                {% if catparent=="blog" and parent.blogtype.blogs|length > 1%}
                                {% set haveother=true %}
                                <a href="{{path("app_typeblog_home",{id:parent.blogtype.id}) }}">
                                {% elseif catparent=="page" and parent.pagetype.pages|length > 1 %}
                                {% set haveother=true %}
                                <a href="{{path("app_typepage_home",{id:parent.pagetype.id}) }}">
                                {%endif%}
                                {{ typeparent }}
                                {%if haveother %}
                                </a>
                                {%endif%}
                            </div>   
                            {{child.name}}
                        </h1>

                        {% if catparent=="page" %}
                            {% for page in parent.pagetype.pages %}
                                {% set url=path("app_child_view",{catparent:'page', idparent:page.id, idchild:page.childs[0].id }) %}
                                <a class="p-2 me-1" style="background-color:var(--colorbgbodyimportant" href="{{url}}">{{page.childs[0].name}}</a>
                            {% endfor %}    
                        {% endif %}
                        <span style="line-height:20px; display:block">{{ child.subname|nl2br }}</span>

                    </div>
                    {% if childheader.credit %}<div class="herocredit position-absolute d-flex align-items-end justify-content-end" style="top:0px;padding:5px;font-size:80%;">© {{ childheader.credit }}</div>{% endif %}
                </div>
            {%endfor%}
        </div>
    {% endif %}
{% endblock %}

{% block body %}
    {% set haveside=true %}
    {% if catparent!="blog" and
          child.tags is empty and
          contacts is empty and
          ressources is empty and 
          links is empty %}
        {% set haveside=false %}
    {% endif %}

    {%if pages and pages|length > 1%}
        <div class="child-pages">
            {% for page in pages %}
                <a class="btn btn-primary mb-1" href="{{path("app_child_view",{catparent:catparent,idparent:parent.id,idchild:page.id,framed:framed,size:size})}}">
                    {{ page.name }}
                </a>                        
            {% endfor %}              
        </div>
    {% endif %}

    <div class="mt-5">
        {%if haveside %}
            <div class="row mb-5">
                <div class="col-md-8">
        {% endif %}

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

        <div class="child-content mt-3">
            <div class="child-attributs">
                {% if child.childtype.haveurl and child.url %}<strong>Site</strong> = <a target="_blank" href="{{ child.url }}">{{child.url}}</a><br>{%endif%}
            </div>            

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

            {% if images %}
                <div class="child-images">
                    <h3 class="mt-5">Galerie Photos</h3>
                    <div class="grid">
                        <div class="grid-sizer"></div>
                        <div class="gutter-sizer"></div>                
                        {% for image in images %}
                            {% if image.childtype.id==12 %}
                            {% set background=path("app_minio_image",{file:"child/"~image.id~"/thumb/"~image.filename}) %}
                            {% else %}
                            {% set background=image.url %}
                            {% endif %}

                            {% set style="height:auto;background-position: center ; background-size: cover; background-image: url("~background~")" %}
                            <button class="btn-modal" data-modalid="mymodalfull" data-modaltitle="Galerie" data-modalurl="{{path("app_child_view",{catparent:catparent,idparent:parent.id,idchild:image.id})}}">
                                <div class="grid-item grid-item-size-4 grid-square d-flex align-items-stretch">
                                    <div class="grid-image d-flex align-items-center pr-2 pl-2" style="{{style}}">
                                    </div>
                                </div>
                            </button>                        
                        {% endfor %}
                    </div>  
                </div>
            {% endif %}

            {% if videos %}
                <div class="child-videos">
                    <h3 class="mt-5">Videos</h3>
                    <div class="d-flex">
                        {% for video in videos %}
                            {% if video.childtype.id==14 %}
                                {% set url = path("app_minio_image",{file:"child/"~video.id~"/"~video.filename }) %}
                                <video class="align-self-stretch" style="width:50%;background-color:#000; height:240px;" controls="" name="media"><source src="{{url}}"></video>                        
                            {% else %}
                                <iframe class='widyoutube' src='{{video.url}}' allowfullscreen="allowfullscreen" class="align-self-stretch" style="width:50%; background-color:#000;border:none; height:240px;"></iframe>
                            {% endif %}
                        {% endfor %}
                    </div>  
                </div>
            {% endif %}

            {% if bibliographys %}
                <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-links">
                    {% for bibliography in bibliographys %}
                        {% if loop.first %}
                            <h3 class="mt-5">Bibliographies</h3>
                        {%endif%}
                        {% if bibliography.url %}
                        <a class="btn-link" target="_blank" href="{{bibliography.url}}">
                        {% endif %}
                        <div class="mb-2" style="line-height:16px">
                            {{ bibliography.name}}<br>
                            <small>{{ bibliography.subname}}</small>
                        </div>
                        {% if bibliography.url %}
                        </a>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}                               
        </div>

        {% if haveside %}
            </div>
            <div class="col-md-4">
                <div class="p-3 child-sidebar">
                    {% if not child.tags is empty %}
                        <div class="mb-3 child-tags">
                            {% for tag in child.tags %}
                                {% if loop.first %}
                                    <h3 class="mt-5">Tags</h3>
                                {%endif%}

                                <span class="tag"><a class="btn-link" href="{{path("app_child_search",{tags:tag.id}) }}"><i class="fas fa-tag"></i> {{tag.id}}</a></span>
                            {% endfor %}
                        </div>
                    {% endif %}

                    <div class="child-other">
                        <h3>Autres Publications</h3>
                        {% for otherchidblog in child.childblogs[0].blog.childblogs[0] %}
                            {{otherchidblog.child.name}}<br>
                        {% endfor %}
                    </div>
                    {% if not ressources is empty %}
                        <div class="child-ressources">
                            <h3>Ressources</h3>
                            {% for ressource in ressources %}
                                {% if ressource.childtype.id==16 %}
                                    {% set filename="/"~appAlias~"/uploads/child/"~ressource.id~"/"~ressource.filename %}
                                {% else %}
                                    {% set filename=ressource.url %}
                                {% endif %}
                                
                                <a class="btn-link" target="_blank" href="{{filename}}">
                                    <div class="d-flex align-items-center mb-3">
                                        <i class="fas fa-file-alt fa-2x mr-4"></i>
                                        <div style="line-height: 15px;">
                                            {{ ressource.name}}<br>
                                            <small>{{ ressource.subname}}</small>
                                        </div>
                                    </div>
                                </a>
                            {% endfor %}
                        </div> 
                    {% endif %}

                    {% if not links is empty %}
                        <div class="mb-3 child-links">
                            <h3 >Liens Externes</h3>
                            {% for link in links %}
                                <a class="btn-link" target="_blank" href="{{link.url}}">
                                    <div class="d-flex align-items-center mb-3">
                                        <i class="fas fa-link fa-2x me-2"></i>
                                        <div style="line-height: 15px;">
                                            <big>{{ link.name}}</big><br>
                                            <small>{{ link.subname}}</small>
                                        </div>
                                    </div>
                                </a>
                            {% endfor %}
                        </div>  
                    {% endif %}              
                </div>
                
                {% if is_granted('ROLE_ADMIN') %}
                <div class="text-right p-1" style="line-height:10px">
                    <small><i>
                    {% if not parent.externalcode is empty %}
                        {{parent.externalcode}} = {{parent.externalid}}<br>
                    {%endif%}
                    </i> 
                    </small>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}

    </div>
{% endblock %}