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

{% block content %}
<div class="row">
  <div class="col-sm-8">
    {% for post in posts %}
    <article itemscope itemtype="http://schema.org/Article">
    <a href="{{ post.get_absolute_url }}"><h1 itemprop="name">{{ post.title }}</h1></a>
    <div>
      Published: <span itemprop="datePublished" content="{{ post.published_date|date:"c" }}">{{ post.published_date }}</span>
      {% if post.updated_date != post.published_date %}
      Updated: <span itemprop="dateModified" content="{{ post.updated_date|date:"c" }}">{{ post.updated_date }}</span>
      {% endif %}
    </div>
    {% if post.image %}
    <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
      <img src="{{ post.image.url }}" class="img-fluid"/>
      <meta itemprop="url" content="{{ post.image.url }}">
      <meta itemprop="width" content="{{ post.image.width }}">
      <meta itemprop="height" content="{{ post.image.height }}">
    </div>
    {% endif %}
    <span itemprop="articleBody">{{ post.description|safe_markdown }}</span>
    </article>
    {% endfor %}

    {% if posts.num_pages > 1 %}
    <div class="pagination">
      <span class="step-links">
        {% if contacts.has_previous %}
          <a href="?page={{ posts.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
          Page {{ posts.number }} of {{ posts.paginator.num_pages }}.
        </span>

        {% if contacts.has_next %}
          <a href="?page={{ posts.next_page_number }}">next</a>
        {% endif %}
      </span>
    </div>
    {% endif %}
  </div>
  <div class="col-sm-3 offset-sm-1">
    <ul class="list-group">
      {% for category in categories %}
        <a href="{{ category.get_absolute_url }}" class="list-group-item list-group-item-action">{{ category.name }}</a>
      {% endfor %}
    </ul>
  </div>
</div>
{% endblock content %}