{% extends "base.html" %}
{% load dractags blog %}
{% block title %}Blog Posts{% endblock %}

{% block content %}
  <style>
  .thumbnail {
    margin-bottom: 15px;
  }
  .title {
    margin-bottom: 0;
  }
  </style>
  <div class="row">
    <div class="col-md-9">
      {% for post in posts %}
        <article class="row post" itemscope itemtype="http://schema.org/Article">
          <div class="col-md-4 thumbnail" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
            <picture>
              <source class="img-fluid" srcset="{{ post.image.mobilethumb.url }}" media="(max-width: 780px)" />
              <source class="img-fluid" srcset="{{ post.image.thumbnail.url }}" />
              <img class="img-fluid" src="{{ post.image.thumbnail.url }}" alt="{{ banner.title }}">
            </picture>
          </div>
          <div class="col-md-8">
            <a href="{{ post.get_absolute_url }}"><h3 itemprop="name" class="title">{{ post.title }}</h3></a>
            {% include "blog/post_date.html" %}
            {% if post.excerpt %}
              <span itemprop="articleBody">{{ post.excerpt|striptags|truncatewords:45 }}</span>
            {% else %}
              <span itemprop="articleBody">{{ post.description|safe_markdown|striptags|truncatewords:45 }}</span>
            {% endif %}
          </div>
        </article>
      {% endfor %}

      {% include "base/pagination.html" %}
    </div>
    {% sidebar %}
  </div>
{% endblock content %}