{%- extends "base/website.html.twig" -%}

{%- block main -%}

    <main class="blog-post">

        <section class="bg-light ses-pt-3">
        
            {%- if document.properties.breadcrumbs_navigation_root and document.properties.breadcrumbs_navigation_root.data -%}

                {%- set navigation = pimcore_build_nav({
                    active: document,
                    root: document.properties.breadcrumbs_navigation_root.data
                }) -%}
                {%- do app_navigation_enrich_breadcrumbs(navigation) -%}
                {%- set renderer = pimcore_nav_renderer('breadcrumbs') -%}
                {%- do renderer.setMinDepth(null) -%}
                {%- do renderer.setPartial('snippets/breadcrumbs/render.html.twig') -%}

                <div class="container-fluid">
                    {{ renderer.renderPartial(navigation) | raw }}
                </div>
              
            {%- endif -%}

        </section>
    
        <section class="bg-light ses-pt-2">

            <div class="container">

                <div class="container-blog-post">

                    {%- set date = document.modificationDate -%}
                    {%- if document.properties.publish_date is defined and document.properties.publish_date.data -%}
                        {%- set date = document.properties.publish_date.data -%}
                    {%- endif -%}

                    <time class="d-block b2 text-primary mb-30" datetime="{{ date | format_datetime(pattern: 'yyyy-MM-dd hh:mm:ss',  locale: app.request.locale) }}">{{ date | format_datetime(pattern: 'dd.MM.yyyy',  locale: app.request.locale) }}</time>
            
                    <h1 class="h3 mb-30">{{ pimcore_input('h1', {
                        placeholder: document.properties.navigation_name.data,
                        defaultValue: document.properties.navigation_name.data,
                    }) }}</h1>

                    {%- if editmode -%}
                        {{ pimcore_image('featuredImage', {
                            height: 654
                        }) }}
                    {%- else -%}
                        {%- set image = pimcore_image('featuredImage') -%}
                        {{ image.thumbnail('blog-detail-featured-image').html({
                            'disableAutoAlt': true,
                            'alt': get_image_i18n_alt(image, ''),
                            'pictureAttributes': {
                                'class': 'd-block user-select-none pointer-events-none mt-n80 featured-image'
                            },
                            'imgAttributes': {
                                'class': 'd-block w-auto object-fit-cover'
                            }
                        }) | raw  }}
                    {%- endif -%}
                
                </div>
            
            </div>

        </section>

        <section class="pt-160 ses-pb-2">

            <div class="container">

                <div class="container-blog-post">
            
                    {{ pimcore_areablock('blogPostBody', {
                        'globalParams': {
                            'parentIndexes': [0]
                        },
                        'allowed': allowed
                    }) }}
                
                </div>
            
            </div>
        
        </section>

        <section class="bg-light ses-py-2">
            <div class="container">
                <div class="h4 cta-heading mb-0">
                    <a href="{{ document.parent.getHref() }}" class="reversed">
                        <span>{{ 'blog.detail_page.listing_cta' | trans }}</span>
                    </a>
                </div>
            </div>
        </section>

    </main>

{%- endblock main -%}