{% load ocyan_thumbnail wagtailcore_tags styling_tags %}
<section class="blogs-wrapper {{self.coyote_bg}}" id="{{ self.coyote_anchor }}">
    <div class="container">
        {% if self.body %}
        <div class="row mb-5">
            <div class="col-lg-6 mx-auto">
                {{ self.body|richtext }}
            </div>
            {% if self.read_more_button %}
            <div class="col-lg-6 text-lg-end my-lg-auto mt-3">
                <a class="btn btn-primary" href="{{ self.blog_pages.url }}">{{ self.read_more_button }}</a>
            </div>
            {% endif %}
        </div>
        {% endif %}
        <div class="row css-slider">
            {% for blog in blog_items %}
            {% with blog=blog.specific %}
            <div class="col-lg-6 col-xl-4 blog-item">
                <a href="{{ blog.url }}" class="link-unstyled">
                    <div class="blog-image-wrapper">
                        {% lazy_responsive_image blog.lead_image.file classes="img-fluid blog-image" alt=blog.lead_image.title %}
                    </div>
                    <div class="blog-info">
                        <span class="blog-date">{{ blog.post_date|date:"d b Y" }}</span>
                        <h5>{{ blog.title }}</h5>
                        <div class="blog-body">
                            {{ blog.intro|safe|truncatechars_html:150 }}
                        </div>
                        <span class="mb-auto d-block read_more"><b>{{ self.read_more }}</b><i class="ms-2 fa fa-arrow-circle-right"></i></span>
                    </div>
                </a>
            </div>
            {% endwith %}
            {% endfor %}
        </div>
        {% if not self.body and self.read_more_button %}
        <div class="row mt-5 pt-5">
            <div class="col-lg-6 text-center mx-auto">
                <a class="btn btn-primary" href="{{ self.blog_pages.url }}">{{ self.read_more_button }}</a>
            </div>
        </div>
        {% endif %}
    </div>
</section>