{block name='blog-details'}
    {$lazyLoadImages=$lazyLoadImages|default:true}
    {et_isShopVersionAtLeast value="5.2.0-beta" assign='shopIsAtLeast52'}
    {et_isShopVersionAtLeast value="5.3.0-rc.3" assign='shopIsAtLeast53'}
    {et_isShopVersionAtLeast value="5.5.0-rc.1" assign='shopIsAtLeast55'}
    {block name='blog-details-include-extension'}
        {include file='snippets/extension.tpl'}
    {/block}

    {* News Error *}
    {if !empty($cNewsErr)}
        {block name='blog-details-alert'}
            <div role="alert" class="alert alert-danger">{lang key='newsRestricted' section='news'}</div>
        {/block}
    {* Blog Post *}
    {else}
        {block name='blog-details-article'}
            <article itemprop="mainEntity" itemscope itemtype="https://schema.org/BlogPosting" class="blog-details-article">
                <meta itemprop="mainEntityOfPage" content="{$newsItem->getURL()}">
                {block name="et-blog-details-article-content-header"}
                <div class="container{if isset($Link) && $Link->getIsFluid() === true}-fluid{/if}">
                    {* Blog Post Heading *}
                    {block name='blog-details-heading'}
                        {opcMountPoint id='opc_before_heading'}
                        <h1 itemprop="headline" class="et-blog-title">
                            {$newsItem->getTitle()}
                        </h1>
                    {/block}

                    {* Blog Post Meta *}
                    {block name='blog-details-author'}
                        <div class="author-meta">
                            {if empty($newsItem->getDateValidFrom())}
                                {assign var=dDate value=$newsItem->getDateCreated()->format('Y-m-d H:i:s')}
                            {else}
                                {assign var=dDate value=$newsItem->getDateValidFrom()->format('Y-m-d H:i:s')}
                            {/if}
                            {if $newsItem->getAuthor() !== null}
                                {block name='blog-details-include-author'}
                                    {include file='snippets/author.tpl' oAuthor=$newsItem->getAuthor() dDate=$dDate cDate=$newsItem->getDateValidFrom()->format('Y-m-d H:i:s') lazyLoadImages=$lazyLoadImages}
                                {/block}
                            {else}
                                {block name='blog-details-noauthor'}
                                    <div itemprop="author publisher" itemscope itemtype="https://schema.org/Organization" class="d-none">
                                        <meta itemprop="name" content="{$meta_publisher|strip_tags|escape:'html'}" />
                                        <meta itemprop="logo" content="{$ShopLogoURL}" />
                                        <meta itemprop="url" content="{$ShopURL}" />
                                    </div>
                                    <span class="creation-date">{$newsItem->getDateValidFrom()->format('d.m.Y H:i:s')}</span>
                                {/block}
                            {/if}
                            <meta itemprop="datePublished" content="{$dDate}" />
                            {if isset($newsItem->getDateCreated()->format('Y-m-d H:i:s'))}
                                <meta itemprop="dateModified" content="{$newsItem->getDateCreated()->format('Y-m-d H:i:s')}" />
                            {/if}

                            {if isset($Einstellungen.news.news_kategorie_unternewsanzeigen) && $Einstellungen.news.news_kategorie_unternewsanzeigen === 'Y' && !empty($oNewsKategorie_arr)}
                                {block name='blog-details-sub-news'}
                                    <span class="news-categorylist">
                                        {if $newsItem->getAuthor() === null}/{/if}
                                        {foreach $oNewsKategorie_arr as $oNewsKategorie}
                                            {if is_a($oNewsKategorie, 'JTL\News\Category')}
                                                <a itemprop="articleSection"
                                                    href="{$oNewsKategorie->getURL()}"
                                                    title="{$oNewsKategorie->getDescription()|strip_tags|escape:'html'|truncate:60}"
                                                    class="{if !$oNewsKategorie@last}mr-1{/if} d-inline-block"
                                                >
                                                    {$oNewsKategorie->getName()}
                                                </a>
                                            {else}
                                                <a itemprop="articleSection"
                                                   href="{$oNewsKategorie->cURLFull}"
                                                   title="{$oNewsKategorie->cBeschreibung|strip_tags|escape:'html'|truncate:60}"
                                                   class="{if !$oNewsKategorie@last}mr-1{/if} d-inline-block"
                                            >
                                                    {$oNewsKategorie->cName}
                                                </a>
                                            {/if}
                                        {/foreach}
                                    </span>
                                {/block}
                            {/if}

                            {block name='blog-details-comments-link'}
                                {if $Einstellungen.news.news_kommentare_nutzen === 'Y'}
                                {if $newsItem->getCommentCount() > 0}
                                    <a class="link-discreet text-nowrap-util" href="#comments" title="{lang key='readComments' section='news'}">
                                {else}
                                    <span class="text-nowrap-util">
                                {/if}
                                    /
                                    <span class="{et_getIcon key="comments"}"></span>
                                    <span class="sr-only">
                                        {if $newsItem->getCommentCount() === 1}
                                            {lang key='newsComment' section='news'}
                                        {else}
                                            {lang key='newsComments' section='news'}
                                        {/if}
                                    </span>
                                    <meta itemprop="commentCount" content="{$newsItem->getCommentCount()}">
                                    <span>
                                        {$newsItem->getCommentCount()}
                                        {if $shopIsAtLeast52 && $newsItem->getChildCommentsCount() && $Einstellungen.news.news_kommentare_anzahl_antwort_kommentare_anzeigen === 'Y'}
                                            ({$newsItem->getChildCommentsCount()})
                                        {/if}
                                    </span>
                                {if $newsItem->getCommentCount() > 0}
                                    </a>
                                {else}
                                    </span>
                                {/if}
                                {/if}
                            {/block}
                        </div>
                    {/block}

                    {* Blog Post Image - we only set the meta tag as the preview image itself should not actually appear on the detail page. *}
                    {if $newsItem->getPreviewImage() !== ''}
                        {block name='blog-details-image'}
                            <meta itemprop="image" content="{$imageBaseURL}{$newsItem->getPreviewImage()}">
                        {/block}
                    {/if}
                </div>
                {/block}
                {et_getSetting section='AreaNews' assign='etNewsSettings'}
                {et_getDevice assign='et_device'}
                {if (!isset($bAjaxRequest) || !$bAjaxRequest) && !empty($etNewsSettings.tocPosition) && ($etNewsSettings.tocPosition === 'left' || $etNewsSettings.tocPosition === 'right') && $et_device === 'desktop'}
                    <div class="container et-toc-container et-toc-position-{$etNewsSettings.tocPosition}">
                        <div class="row">
                            <div class="col-12 col-md-9 col-lg-10" data-no-toc='{ "remove": ["col-md-9", "col-lg-10"] }'>
                                {* Blog Post Content *}
                                {block name='et-blog-details-article-content-with-toc'}
                                    {block name='blog-details-article-content'}
                                        {opcMountPoint id='opc_before_content'}
                                        <div itemprop="articleBody" class="blog-details-content">
                                            {et_renderGrid id="news_{$newsItem->getID()}" fallbackId="news_main"}
                                        </div>
                                        {opcMountPoint id='opc_after_content'}
                                    {/block}
                                {/block}
                            </div>
                            <div class="d-none d-md-block col-md-3 col-lg-2 et-toc-col" data-no-toc='{ "remove": ["d-md-block", "col-md-3", "col-lg-2"] }'>
                                {include file="widgets/snippets/table_of_contents.tpl" context="news" settings=$etNewsSettings}
                            </div>
                        </div>
                    </div>
                {else}
                    {* Blog Post Content *}
                    {block name='et-blog-details-article-content-no-toc'}
                        {block name='blog-details-article-content'}
                            {opcMountPoint id='opc_before_content'}
                            <div itemprop="articleBody" class="blog-details-content">
                                {et_renderGrid id="news_{$newsItem->getID()}" fallbackId="news_main"}
                            </div>
                            {opcMountPoint id='opc_after_content'}
                        {/block}
                    {/block}
                {/if}


                {* Blog Post Comments *}
                {if isset($Einstellungen.news.news_kommentare_nutzen) && $Einstellungen.news.news_kommentare_nutzen === 'Y'}
                    {block name='blog-details-article-comments'}
                        <div class="container{if isset($Link) && $Link->getIsFluid() === true}-fluid{/if}">
                            {if $userCanComment === true}
                                {* Comment Form *}
                                {block name='blog-details-form-comment'}
                                    {block name='blog-details-form-comment-hr-top'}
                                        <hr class="blog-details-hr">
                                    {/block}

                                    <div class="row blog-details-comment-form">
                                        <div class="col col-12">
                                            {block name='blog-details-form-comment-heading'}
                                                <div class="h2">{lang key='newsCommentAdd' section='news'}</div>
                                            {/block}

                                            {block name='blog-details-form-comment-form'}
                                                <form method="post"
                                                    action="{if !empty($newsItem->getSEO())}{$newsItem->getURL()}{else}{get_static_route id='news.php'}{/if}"
                                                    class="form jtl-validate label-slide"
                                                    id="news-addcomment"
                                                >
                                                    {csrf_token}
                                                    {if $shopIsAtLeast53}{honeypot}{/if}
                                                    <input type="hidden" name="kNews" value="{$newsItem->getID()}" />
                                                    <input type="hidden" name="kommentar_einfuegen" value="1" />
                                                    <input type="hidden" name="n" value="{$newsItem->getID()}" />
                                                    {block name="et-blog-details-form-comment-form-required-info"}
                                                        {if $shopIsAtLeast55}
                                                            <div class="required-info">{lang key='requiredInfo'}</div>
                                                        {/if}
                                                    {/block}

                                                    {block name='blog-details-form-comment-logged-in'}
                                                        {formgroup
                                                            id="commentText"
                                                            class="{if $nPlausiValue_arr.cKommentar > 0} has-error{/if}"
                                                            label="{lang key='newsComment' section='news'}"
                                                            label-for="comment-text"
                                                            label-class="commentForm"
                                                        }
                                                            {if $nPlausiValue_arr.cKommentar > 0}
                                                                <div class="form-error-msg" role="alert" aria-live="assertive" aria-atomic="true"><i class="{et_getIcon key="missingInput"}"></i>
                                                                    {lang key='fillOut' section='global'}
                                                                </div>
                                                            {/if}
                                                            {if $Einstellungen.news.news_kommentare_freischalten === 'Y'}
                                                                <small class="form-text text-muted-util">{lang key='commentWillBeValidated' section='news'}</small>
                                                            {/if}
                                                            <textarea id="comment-text" class="form-control" name="cKommentar" required aria-invalid="{if $nPlausiValue_arr.cKommentar > 0}true{else}false{/if}"></textarea>
                                                        {/formgroup}
                                                        <div class="row">
                                                            <div class="col col-md-4 col-xl-3 blog-details-save">
                                                                {include file="widgets/base/button.tpl" variant="primary" classes="btn-block" name="speichern" type="submit" label="{lang key='newsCommentSave' section='news'}"}
                                                            </div>
                                                        </div>
                                                    {/block}
                                                </form>
                                            {/block}
                                        </div>
                                    </div>
                                {/block}
                            {else}
                                {block name='blog-details-alert-login'}
                                    <div role="alert" class="alert alert-warning">{lang key='newsLogin' section='news'}</div>
                                {/block}
                            {/if}

                            {* Comments *}
                            {if isset($comments) && count($comments) > 0}
                                {block name='blog-details-comments-content'}
                                    {if $newsItem->getURL() !== ''}
                                        {assign var=articleURL value=$newsItem->getURL()}
                                        {assign var=cParam_arr value=[]}
                                    {else}
                                        {assign var=articleURL value='news.php'}
                                        {assign var=cParam_arr value=['kNews'=>$newsItem->getID(),'n'=>$newsItem->getID()]}
                                    {/if}

                                    {block name='blog-details-form-comment-hr-middle'}
                                        <hr class="blog-details-hr">
                                    {/block}

                                    <div id="comments">
                                        {* Comments Header *}
                                        {block name='blog-details-comments-header'}
                                            <div class="row blog-comments-header">
                                                <div class="col col-auto">
                                                    {block name='blog-details-comments-content-heading'}
                                                        <div class="h2 section-heading">{lang key='newsComments' section='news'}
                                                            <meta itemprop="commentCount" content="{$newsItem->getCommentCount()}">
                                                            <span>
                                                                {$newsItem->getCommentCount()}
                                                                {if $shopIsAtLeast52 && $newsItem->getChildCommentsCount() && $Einstellungen.news.news_kommentare_anzahl_antwort_kommentare_anzeigen === 'Y'}
                                                                    ({$newsItem->getChildCommentsCount()})
                                                                {/if}
                                                            </span>
                                                        </div>
                                                    {/block}
                                                </div>
                                                <div class="col col-12 col-md-6 ml-auto-util">
                                                    {block name='blog-details-include-pagination'}
                                                        {include file='snippets/pagination.tpl' oPagination=$oPagiComments cThisUrl=$articleURL cParam_arr=$cParam_arr}
                                                    {/block}
                                                </div>
                                            </div>
                                        {/block}

                                        {* Comment List *}
                                        {block name='blog-details-comments'}
                                            <div class="blog-details-comments-list">
                                                {foreach $comments as $comment}
                                                    {* Comment *}
                                                    {block name='blog-details-comments-item'}
                                                        <div class="blog-details-comments-list-item" itemprop="comment" itemscope itemtype="https://schema.org/Comment">
                                                            <div class="row">
                                                                {* Comment Meta *}
                                                                <div class="col-12 col-md-2 offset-md-2 order-md-2 blog-details-comments-list-meta">
                                                                    {block name='blog-details-comments-meta'}
                                                                        <div class="comment-author" itemprop="author">{$comment->getName()}</div>
                                                                        <div class="comment-date">{$comment->getDateCreated()->format('d.m.y H:i')}</div>
                                                                        {if !empty($comment->getDateCreated()) && !empty($comment->getDateCreated()->format('Y-m-d H:i:s'))}
                                                                            <meta itemprop="dateCreated" content="{$comment->getDateCreated()->format('Y-m-d H:i:s')}" />
                                                                        {/if}
                                                                    {/block}
                                                                </div>

                                                                {* Comment Content *}
                                                                <div class="col-12 col-md-8 order-md-1 blog-details-comments-list-item-comment">
                                                                    {block name='blog-details-comments-text'}
                                                                        <blockquote itemprop="text">
                                                                            {$comment->getText()}
                                                                        </blockquote>
                                                                    {/block}

                                                                    {block name='blog-details-comments-item-replies'}
                                                                        {foreach $comment->getChildComments() as $childComment}
                                                                            <div class="comment-reply">
                                                                                <span class="subheadline">{lang key='commentReply' section='news'}:</span>
                                                                                <blockquote>
                                                                                    {$childComment->getText()}
                                                                                    <div class="blockquote-footer">{$childComment->getName()}, {$childComment->getDateCreated()->format('d.m.y H:i')}</div>
                                                                                </blockquote>
                                                                            </div>
                                                                        {/foreach}
                                                                    {/block}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    {/block}
                                                {/foreach}
                                            </div>
                                        {/block}

                                        {* Comments Footer *}
                                        {block name='blog-details-comments-footer'}
                                            <div class="row blog-comments-footer">
                                                <div class="col col-12">
                                                    {block name='blog-details-comments-footer-include-pagination'}
                                                        {include file='snippets/pagination.tpl' oPagination=$oPagiComments cThisUrl=$articleURL cParam_arr=$cParam_arr}
                                                    {/block}
                                                </div>
                                            </div>
                                        {/block}
                                    </div>
                                {/block}
                            {/if}
                        </div>
                    {/block}
                {/if}
            </article>

            {* Standard JTL News Slider *}
            {block name="et-blog-details-latest-news-container"}
                {if isset($oNews_arr) && count($oNews_arr) > 0}
                    <div class="container{if isset($Link) && $Link->getIsFluid() === true}-fluid{/if} blog-details blog-latest-news">
                        <div class="row">
                            <div class="col-12">
                                {block name='blog-details-form-comment-hr-bottom'}
                                    <hr class="blog-details-hr">
                                {/block}
                            </div>

                            {block name='blog-details-latest-news'}
                                {assign var="sliderId" value=$newsItem->getId()}
                                <div class="col-12">
                                    <div class="h2">{lang key='news' section='news'}</div>
                                </div>

                                <div class="col-12 p-sm-0">
                                    {block name='blog-details-latest-news-slider'}
                                        <div itemprop="about" itemscope itemtype="https://schema.org/Blog"
                                            id="et-news-slider-{$sliderId}"
                                            class="et-slider carousel slick-smooth-loading {if count($oNews_arr) < 3}slider-no-preview{/if}"
                                            data-slick='{strip}{block name='blog-details-latest-news-slider-config'}{
                                                "nextArrow": "#et-news-slider-next-{$sliderId}",
                                                "prevArrow": "#et-news-slider-prev-{$sliderId}",
                                                "lazyLoad":     "ondemand",
                                                "mobileFirst":    true,
                                                "slidesToShow": 1,
                                                "slidesToScroll": 1,
                                                "responsive": [
                                                    {
                                                        "breakpoint": 768,
                                                        "settings": {
                                                            "slidesToShow": 2,
                                                            "slidesToScroll": 2
                                                        }
                                                    },
                                                    {
                                                        "breakpoint": 1300,
                                                        "settings": {
                                                            "slidesToShow": 3,
                                                            "slidesToScroll": 3
                                                        }
                                                    }
                                                ]
                                            }{/block}{/strip}'
                                        >
                                            {include file='snippets/slider_items.tpl' items=$oNews_arr type='news' lazyLoadImages=$lazyLoadImages}
                                        </div>
                                    {/block}

                                    {* News Slider Navigation *}
                                    {block name="blog-details-latest-news-slider-navigation-arrows"}
                                        <div class="et-slider-nav" id="et-news-slider-nav-{$sliderId}">
                                            {block name="blog-details-latest-news-slider-navigation-arrows-prev"}
                                                <div class="et-slider-nav-prev enabled slick-arrow slick-hidden" id="et-news-slider-prev-{$sliderId}">
                                                    <i class="{et_getIcon key='sliderPrevious'}"></i>
                                                </div>
                                            {/block}

                                            {block name="blog-details-latest-news-slider-navigation-arrows-next"}
                                                <div class="et-slider-nav-next enabled slick-arrow slick-hidden" id="et-news-slider-next-{$sliderId}">
                                                    <i class="{et_getIcon key='sliderNext'}"></i>
                                                </div>
                                            {/block}
                                        </div>
                                    {/block}
                                </div>
                            {/block}
                        </div>
                    </div>
                {/if}
            {/block}
        {/block}
    {/if}
{/block}
