{% extends "base.html" %}


{% block head %}
{{ super() }}

<style>
    /* The only class is for the post lists, if I didn't have the pesky images, I could have a simple list here too */
    .posts {
  display: flex;
  flex-wrap: wrap;
  width: 100%; 
}
.posts h2 {margin:0em;}
.posts img {
  display: inline; 
  float: left;
  padding-right: 25px;
}

</style>

{% endblock %}

{% block content %}
<div class="posts">
    {% block content_title %}
        <h2>All articles</h2>        
    {% endblock %}

    
    {% for article in articles_page.object_list %}
        <article>
            <header> <h3><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h3> </header>
            <section>
                {% if INCLUDE_IMAGE == True %}
            {% if article.photo_image %}
                <a href="{{ SITEURL }}/{{ article.url }}" class="image">
                    <img style="display: inline; float: left;" src="{{ SITEURL }}/{{ article.photo_image[2] }}"  />
                </a>
            {% endif %}
            {% endif %}
            {{ article.summary }}
        </section>
           <!-- <footer>
                <p>Published: <time datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
                <address>By
                    {% for author in article.authors %}
                        <a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
                    {% endfor %}
                </address></p>
            </footer>
        -->
        </article>
    {% endfor %}
    </div>

    {% if articles_page.has_other_pages() %}
        {% include 'include/pagination.html' %}
    {% endif %}

{% endblock content %}