{% extends "ocyan_plugin_wagtail/page.html" %}
{% load wagtailcore_tags %}
{% load wagtailimages_tags %}

{% block styles %}
{{ block.super }}
<style type="text/css">
    .lead_blog_img {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    @media only screen and (max-width: 600px) {

        .lead_blog_img {
            width: 100%;
            margin: 0;
        }

    }
</style>
{% endblock %}

{% block title %}{{ page.title }}{% endblock %}

{% block body_class %}{{ block.super }} blog-overview{% endblock %}
{% block headertext %}{{ page.title }}{% endblock %}
{% block content %}

<div class="row">
{% for blog in blogs %}
    <div class="col-12 blogitem">
        {% image blog.lead_image fill-270x180 class="img-responsive lead_blog_img" %}
        <h1>{{ blog.title }}</h1>
        <div>{{ blog.post_date|date:"d b Y" }}</div>
            {{ blog.intro|richtext }}
        <a href="{{ blog.url }}">Lees meer ></a>
        <hr />
    </div>
{% endfor %}
</div>
{% include "partials/cms_pagination.html" %}
{% endblock %}