{% extends "kioblog/base.html" %}
{% load i18n %}
{% load static %}

{% block content %}
    <div id="content">
        {% for post in posts %}
        <section class="mb4 kioblog-post">
            <h4 class="text-secondary mb0 regular">
                {{ post.category.title }}
            </h4>
            <h2 class="mt1 mb0">
                <a href="{% url 'kioblog-post' post.slug %}">
                    {{ post.title }}
                </a>
            </h2>
            <div class="mb1">
                <small>{{ post.user.get_full_name }} {{ post.created|date:'Y/m/d' }}</small>
            </div>
            {% if post.image %}
            <div class="clearfix"></div>
            <img src="{{ post.image.url }}" alt="{{ post.title }}">
            {% endif %}
            <article>
                {{ post.first_paragraph|safe }}
            </article>
            <div class="fit mt3 mb2">
                <a href="{% url 'kioblog-post' post.slug %}" class="btn-readmore">
                    {% trans 'Read More' %}
                </a>
            </div>
        </section>
        {% endfor %}
    </div>

    {% if posts.has_other_pages %}
        <div id="kioblogpaginator" class="center mb2">
            {% if posts.has_previous %}
                <a class="kioblogpaginator" href="{% url 'kioblog-page' posts.previous_page_number %}">&laquo;</a>
            {% else %}
                <span class="disabled">&laquo;</span>
            {% endif %}
            {% for i in page_range %}
                {% if posts.number == i %}
                    <span class="current paginator">{{ i }}</span>
                {% else %}
                    <a class="kioblogpaginator" href="{% url 'kioblog-page' i %}">{{ i }}</a>
                {% endif %}
            {% endfor %}
            {% if posts.has_next %}
                <a class="kioblogpaginator" href="{% url 'kioblog-page' posts.next_page_number %}">&raquo;</a>
            {% else %}
                <span class="disabled paginator">&raquo;</span>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}
