{% extends "blog/blog_list.html" %}
{% load wagtailcore_tags %}
{% load wagtailimages_tags %}
{% load ocyan_main %}
{% load ocyan_thumbnail %}

{% block title %}{{self.get_meta_title}}{% if page.get_site.site_name %} - {{ page.get_site.site_name }}{% endif %}{% endblock title %}
{% block body_class %}{{ block.super }} blog-overview{% endblock %}

{% block content %}
<div class="container">
<div class="row">
    <div class="col-12 pt-5">
        <h1 class="blog-header">{{ page.title }}</h1>
    </div>
    <div class="row mt-5" style="--bs-gutter-x:2rem;">
        {% for blog in blogs %}
        <div class="col-lg-6 col-xl-4 blogitem mb-lg-5">
            <a href="{{ blog.url }}" class="link-unstyled blog_item">
                <div class="image-wrapper">
                    {% 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 text-muted"> {{ blog.post_date }}</span>
                    <h4 class="mb-3 mt-2">{{ blog.title }}</h4>
                    <div class="text-muted">
                        {{ blog.intro|safe|truncatechars_html:300 }}
                    </div>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
</div>
</div>
{% include "oxyan/partials/cms_pagination.html" %}
{% endblock %}