{% set current_path = template_path ~ '/modules/blog/components/featured-slider' %}

{% if featured %}
<div class="home-swp">
    <div class="home-swp__btn">
        <button class="home-swp__btn-prev">
            <img src="{{ current_path }}/assets/img/swp-prev.svg" alt="">
        </button>
        <button class="home-swp__btn-next">
            <img src="{{ current_path }}/assets/img/swp-next.svg" alt="">
        </button>
    </div>
    <div class="swiper">
        <div class="swiper-wrapper">

            {% for item in featured %}
            {% set _post = item.post %}
       
            <div class="swiper-slide">
                <div class="home-card" style="background-color: {{ item.color }}">
                    <a href="{{_post.link}}" class="home-card__img">
                         <img src="{{_post.thumbnail.src}}" alt="{{_post.thumbnail.alt}}">
                    </a>
                    
                    <div class="home-card__content">
                        <a href="{{_post.link}}" class="home-card__content-title">{{_post.name}}</a>
                        <p class="home-card__content-description">{{_post.excerpt}}</p>
                        <div class="home-card__content-body">
                            <ul class="home-card__content-body__alerts">
                                {% for category in _post.categories %}
                                <li>
                                    <a href="{{ category.link }}">{{ category.name }}</a>
                                </li>
                                {% endfor %}
                            </ul>
                            <div class="home-card__content-body__day">{{_post.date}}</div>
                            <div class="home-card__content-body__time">{{ function('pll_e', 'время чтения') }}: {{_post.reading_time}}</div>
                            
                            <a href="{{_post.link}}" class="home-card__content-body__link">{{ function('pll_e', 'читать статью') }}</a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

{% endif %}