{**
 * Project-Pro Blog — strona szczegółu wpisu
 *}
{extends file='layouts/layout-full-width.tpl'}

{block name='content'}
<section id="blog-wrap" class="container">
    <div class="row">

        {* ====================================================
           LEWA KOLUMNA — drzewo kategorii
           ==================================================== *}
        <aside id="blog-sidebar" class="col-md-3">
            <div class="blog-cats-widget">
                <h4>{l s='Kategorie' mod='projectproblog'}</h4>

                <a href="{$blog_url|escape:'html':'UTF-8'}"
                   class="blog-cat-link"
                   style="display:block;margin-bottom:.5rem;">
                    {l s='Wszystkie wpisy' mod='projectproblog'}
                </a>

                {include
                    file='module:projectproblog/views/templates/front/_category-tree.tpl'
                    tree=$blog_category_tree
                    current_cat=$blog_current_cat}
            </div>
        </aside>

        {* ====================================================
           PRAWA KOLUMNA — treść wpisu
           ==================================================== *}
        <div id="blog-content" class="col-md-9">

            <article class="blog-post" itemscope itemtype="https://schema.org/BlogPosting">

                {* ---- Nagłówek ---- *}
                <header class="blog-post-header">

                    <h1 class="blog-post-title" itemprop="headline">
                        {$blog_post->title|escape:'html':'UTF-8'}
                    </h1>

                    <div class="blog-post-meta">
                        <span>
                            <time datetime="{$blog_post->date_add|date_format:'%Y-%m-%d'}" itemprop="datePublished">
                                {$blog_post->date_add|date_format:'%d.%m.%Y'}
                            </time>
                        </span>

                        {if $blog_show_updated}
                            <span>
                                {l s='Aktualizacja:' mod='projectproblog'}
                                <time datetime="{$blog_post->date_upd|date_format:'%Y-%m-%d'}" itemprop="dateModified">
                                    {$blog_post->date_upd|date_format:'%d.%m.%Y'}
                                </time>
                            </span>
                        {/if}

                        {if $blog_post_cats}
                            <span class="blog-post-cats">
                                {foreach from=$blog_post_cats item=cat}
                                    <a href="{$cat.url|escape:'html':'UTF-8'}"
                                       class="cat-badge"
                                       itemprop="articleSection">
                                        {$cat.name|escape:'html':'UTF-8'}
                                    </a>
                                {/foreach}
                            </span>
                        {/if}
                    </div>

                </header>

                {* ---- Miniaturka ---- *}
                {if $blog_thumbnail}
                    <figure class="blog-post-thumb">
                        <img src="{$blog_thumbnail|escape:'html':'UTF-8'}"
                             alt="{$blog_post->title|escape:'html':'UTF-8'}"
                             itemprop="image">
                    </figure>
                {/if}

                {* ---- Wstęp ---- *}
                {if $blog_post->intro}
                    <div class="blog-post-intro" itemprop="description">
                        {$blog_post->intro nofilter}
                    </div>
                {/if}

                {* ---- Treść ---- *}
                {if $blog_post->content}
                    <div class="blog-post-content" itemprop="articleBody">
                        {$blog_post->content nofilter}
                    </div>
                {/if}

                {* ---- Powrót do listy / kategorii ---- *}
                <div class="blog-post-back">
                    {if $blog_primary_cat}
                        <a href="{$blog_primary_cat.url|escape:'html':'UTF-8'}">
                            &larr; {l s='Wróć do kategorii' mod='projectproblog'}:
                            {$blog_primary_cat.name|escape:'html':'UTF-8'}
                        </a>
                        &nbsp;&middot;&nbsp;
                    {/if}
                    <a href="{$blog_url|escape:'html':'UTF-8'}">
                        {l s='Wszystkie wpisy' mod='projectproblog'}
                    </a>
                </div>

            </article>

        </div>{* /blog-content *}
    </div>{* /row *}
</section>
{/block}

{block name='javascript_bottom' append}
<script>
(function () {
    'use strict';
    document.querySelectorAll('.blog-cat-toggle').forEach(function (toggle) {
        toggle.addEventListener('click', function () {
            var targetId = this.getAttribute('data-target');
            var sub = document.querySelector(targetId);
            if (!sub) { return; }
            var isOpen = sub.classList.toggle('open');
            this.innerHTML = isOpen ? '&#9660;' : '&#9658;';
        });
    });
}());
</script>
{/block}