{% extends "base.html" %}
{% block content %}
<style>
    img {
        max-width: 100%;
    }
    h1 {
        margin: 0;
        padding: 0;
    }
    figure {
        margin: 0;
        padding: 0;
    }
    .content {
        max-width: 1000px;
        margin: auto;
    }
</style>
    {% for item in items %}
    <div class="item">
        <a href="{{ item.get_absolute_url }}">
        <h1>{{ item.title }}</h1>
        <figure>
            <img src={{ item.icon }}>
            <figcaption>
                {{ item.data.title }}
                {% if item.data.description %}
                <br>
                {{ item.data.description }}
                {% endif %}
            </figcaption>
        </figure>
        </a>
        <div class="description">
            {{ item.description | safe }}
        </div>
        <a href="{{ item.get_absolute_url }}">{{ item.public_comments.count }} comments</a>
    </div>
    {% endfor %}
    {% if archive %}
        <a href="/archive/">older items</a>
    {% endif %}
{% endblock %}