{% extends "base.html" %}
{% load static %}

{% load wagtailcore_tags %}
{% load wagtailcore_tags wagtailimages_tags %}

{% block body_class %}template-blogpage{% endblock %}
{% block extra_js %}
    <script src="{% static 'js/prism.js' %}"></script>
{% endblock %}
{% block extra_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/prism.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/prism-okaidia.min.css' %}">
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
      {# Post Content Column  #}
      <div class="col-lg-8">
        {# Title #}
        <h1 class="mt-4">{{ page.title }}</h1>
        {# Date/Time #}
        {% with categories=page.categories.all %}
          <p>Posted on {{ page.date }}{% if categories %} in {{ categories|join:", " }}{% endif %}</p>
        {% endwith %}
        <hr>

        {# Preview Image  #}
        {% if page.main_image %}
          {% image page.main_image fill-900x300-c100 class="img-fluid rounded" %}
          <hr>
        {% endif %}

        {# Post Content  #}
        <p class="lead">{{ page.intro }}</p>

        {% include_block page.body %}
      </div>

      {# Sidebar Widgets Column  #}
      <div class="col-md-4">
        {% include "search.html" %}
        {# Tags Widget  #}
        <div class="card my-4">
          <h5 class="card-header">Tags</h5>
          <div class="card-body">
            <div class="row">
              <div class="col-lg-10">
                <ul class="list-unstyled mb-0">
                  {% if page.tags.all.count %}
                    {% for tag in page.tags.all %}
                      <span class="badge badge-light"><a href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a></span>
                    {% endfor %}
                  {% else %}
                    No tags for this post
                  {% endif %}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <p><br><a href="{{ request.META.HTTP_REFERER }}" class="btn btn-primary btn-sm">&larr; Return to previous page</a></p>

</div>
{% endblock %}