{**
 * Project-Pro Blog — strona listy wpisów
 *}
{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{if !$blog_current_cat} active{/if}"
                   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 — lista wpisów + paginacja
           ==================================================== *}
        <div id="blog-content" class="col-md-9">

            <h1 class="blog-list-title">
                {if $blog_current_cat}
                    {$blog_current_cat->name|escape:'html':'UTF-8'}
                {else}
                    {l s='Blog' mod='projectproblog'}
                {/if}
            </h1>

            {if $blog_posts}

                <div class="blog-grid">
                    {foreach from=$blog_posts item=post}
                    <div class="blog-grid-item">
                        <article class="blog-card">

                            {if $post.thumbnail_url}
                                <a href="{$post.url|escape:'html':'UTF-8'}" class="blog-card__thumb">
                                    <img src="{$post.thumbnail_url|escape:'html':'UTF-8'}"
                                         alt="{$post.title|escape:'html':'UTF-8'}"
                                         loading="lazy">
                                </a>
                            {/if}

                            <div class="blog-card__body">
                                <h2 class="blog-card__title">
                                    <a href="{$post.url|escape:'html':'UTF-8'}">
                                        {$post.title|escape:'html':'UTF-8'}
                                    </a>
                                </h2>

                                {if $post.intro}
                                    <div class="blog-card__intro">
                                        {$post.intro|strip_tags|truncate:180:'…'}
                                    </div>
                                {/if}

                                <div class="blog-card__footer">
                                    <span class="blog-card__date">
                                        {$post.date_add|date_format:'%d.%m.%Y'}
                                    </span>
                                    <a href="{$post.url|escape:'html':'UTF-8'}" class="blog-card__more">
                                        {l s='Czytaj więcej' mod='projectproblog'} &rsaquo;
                                    </a>
                                </div>
                            </div>

                        </article>
                    </div>
                    {/foreach}
                </div>

                {* ---- Paginacja ---- *}
                {if $blog_pagination && $blog_pages_count > 1}
                <nav class="blog-pagination" aria-label="{l s='Strony' mod='projectproblog'}">

                    {if $blog_pagination.prev}
                        <a href="{$blog_pagination.prev|escape:'html':'UTF-8'}" aria-label="{l s='Poprzednia' mod='projectproblog'}">&laquo;</a>
                    {else}
                        <span class="disabled">&laquo;</span>
                    {/if}

                    {foreach from=$blog_pagination.pages item=pg}
                        {if $pg.current}
                            <span class="current">{$pg.page}</span>
                        {else}
                            <a href="{$pg.url|escape:'html':'UTF-8'}">{$pg.page}</a>
                        {/if}
                    {/foreach}

                    {if $blog_pagination.next}
                        <a href="{$blog_pagination.next|escape:'html':'UTF-8'}" aria-label="{l s='Następna' mod='projectproblog'}">&raquo;</a>
                    {else}
                        <span class="disabled">&raquo;</span>
                    {/if}

                </nav>
                {/if}

            {else}
                <p class="blog-empty">
                    {l s='Brak wpisów do wyświetlenia.' mod='projectproblog'}
                </p>
            {/if}

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

{block name='javascript_bottom' append}
<script>
(function () {
    'use strict';
    /* Rozwijanie/zwijanie podkategorii */
    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}
