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

{#
https://cdn.pixabay.com/photo/2020/08/09/14/25/business-5475661_960_720.jpg
#}

{% block localstyle %}
<style>


</style>
{% endblock %}

{% block beforebody %}

<div class="herobody">
    <div class="p-0 m-0" style="height:100%;background-size:cover;background-image:url({{path("app_minio_image",{file:app.session.get("appimage")})}})">
    
    <div class="title">
        <div class="d-flex align-items-center"> 
            <img src="{{ path('app_minio_image',{file:"logo/"~app.session.get("logodark")}) }}" style="height:120px;">
            
            <div class="ps-3">
                <h1>{{app.session.get("appname")}}</h1>
                <span style="line-height:20px; display:block">{{app.session.get("appsubname")}}</span>
            </div>
        </div>

        <div class="mt-5">    
            <iframe width="100%" height="315" src="https://www.youtube.com/embed/HuFdX7K6xik?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>        
        </div>

        {% if not app.session.get("appdescription") is empty %}
        <div class="mt-5 p-3" style="background-color: var(--colorbgbodyimportant)">
        {{app.session.get("appdescription")|raw}}
        </div>
        {% endif %}
    </div>

    <div class="navigation">
        <div class="grid">
            <div class="grid-sizer"></div>
            <div class="gutter-sizer"></div>   

            {% if app.session.get("menuheader").menuchilds is defined %}
                {% for menuchild in app.session.get("menuhome").menuchilds %}
                    {% set active="" %}
                    {% set url="" %}
                    {% set name="" %}

                    {% if menuchild.childtype == "blog" %}
                        {% set url=path("app_child_view",{catparent:'blog', idparent:menuchild.blog.id, idchild:menuchild.blog.childs[0].id }) %}
                        {% set name=menuchild.blog.name %}
                        {% set image=(menuchild.blog.childs[0].childheaders is empty ? "" : menuchild.blog.childs[0].childheaders[0].filename) %}
                    {% elseif menuchild.childtype == "blogtype" %}
                        {% set url=path("app_typeblog_home",{id:menuchild.blogtype.id}) %}
                        {% set name=menuchild.blogtype.name %}
                        {% set image=(menuchild.blogtype.image is empty ? "" : menuchild.blogtype.image) %}                    
                    {% elseif menuchild.childtype == "page" %}
                        {% set url=path("app_child_view",{catparent:'page', idparent:menuchild.page.id, idchild:menuchild.page.childs[0].id }) %}
                        {% set name=menuchild.page.name %}
                        {% set image=(menuchild.page.childs[0].childheaders is empty ? "" : menuchild.page.childs[0].childheaders[0].filename) %}                    
                    {% elseif menuchild.childtype == "pagetype" %}
                        {% set url=path("app_typepage_home",{id:menuchild.pagetype.id}) %}
                        {% set name=menuchild.pagetype.name %}
                        {% set image=(menuchild.pagetype.image is empty ? "" : menuchild.pagetype.image) %}                    
                    {% endif %}                                    

                    <a href="{{url}}" class="d-block text-center">
                        <div class="grid-item grid-item-size-2 d-flex align-items-stretch">
                            <div class="grid-image d-flex align-items-center pr-2 pl-2"  style="background-image:url({{path("app_minio_image",{file:image})}}); background-size:cover;">
                                <div class="grid-item-title">
                                    <span class="p-1" style="font-weight:bold; text-transform:uppercase;">
                                    {{ name }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </a> 
                {% endfor %}
            {% endif %}
    </div>
</div>


{% endblock %}