{% extends "base.html" %}

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

{% block page %}{% endblock page %}

{% block body_class %}template-contentitemindexpage{% endblock %}

{% block inner %}
    <h1>{{ page.title }}</h1>
    <p class="meta">{{ page.date }}</p>

    {% if page.hero_image %}
    <div style="float: left; margin: 10px">
        {% image page.hero_image fill-320x240 %}
        <p>{{ page.hero_image.caption }}</p>
    </div>
    {% endif %}

    {% with categories=page.categories.all %}
    {% if categories %}
        <h3>Posted in:</h3>
        <ul>
            {% for category in categories %}
                <li style="display: inline">
                    {% if category.icon %}
                        {% image category.icon fill-32x32 style="vertical-align: middle" %}
                    {% endif %}
                    {{ category.name }}
                </li>
            {% endfor %}
        </ul>
    {% endif %}
    {% endwith %}

    {% if page.tags.all.count %}
    <div class="tags">
        <h3>Tags</h3>
        {% for tag in page.tags.all %}
            <a href="{% slugurl 'tags' %}?tag={{ tag }}"><button type="button">{{ tag }}</button></a>
        {% endfor %}
    </div>
    {% endif %}

    <div class="intro">{{ page.intro }}</div>

    {{ page.body|richtext }}

    {% for item in page.gallery_images.all %}
        <div style="float: left; margin: 10px">
            {% image item.image fill-320x240 %}
            <p>{{ item.caption }}</p>
        </div>
    {% endfor %}

    <p><a href="{{ page.get_parent.url }}">Return to article list</a></p>
{% endblock inner %}
