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

{% block content %}
    <div id="content">
        {% if category %}<h1 class="mt0 mb3">{{ category.title }}</h1>{% endif %}
        {% if tag %}<h1 class="mt0 mb3">#{{ tag.title }}</h1>{% endif %}
        {% 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.published|date:'Y/m/d' }} &middot; {{ post.reading_time }} min read</small>
            </div>
            {% if post.image %}
            <div class="clearfix"></div>
            <img src="{{ post.image.url }}" alt="{{ post.title }}">
            {% endif %}
            <article>
                {{ post.display_excerpt }}
            </article>
            {% if post.tags.all %}
            <div class="kioblog-tags mt1">
                {% for post_tag in post.tags.all %}
                <a href="{% url 'kioblog-tag' post_tag.slug %}" class="kioblog-tag">#{{ post_tag.title }}</a>
                {% endfor %}
            </div>
            {% endif %}
            <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 %}
                {% if tag %}
                    <a class="kioblogpaginator" href="{% url 'kioblog-tag-page' tag.slug posts.previous_page_number %}">&laquo;</a>
                {% elif category %}
                    <a class="kioblogpaginator" href="{% url 'kioblog-category-page' category.slug posts.previous_page_number %}">&laquo;</a>
                {% else %}
                    <a class="kioblogpaginator" href="{% url 'kioblog-page' posts.previous_page_number %}">&laquo;</a>
                {% endif %}
            {% else %}
                <span class="disabled">&laquo;</span>
            {% endif %}
            {% for i in page_range %}
                {% if posts.number == i %}
                    <span class="current paginator">{{ i }}</span>
                {% elif tag %}
                    <a class="kioblogpaginator" href="{% url 'kioblog-tag-page' tag.slug i %}">{{ i }}</a>
                {% elif category %}
                    <a class="kioblogpaginator" href="{% url 'kioblog-category-page' category.slug i %}">{{ i }}</a>
                {% else %}
                    <a class="kioblogpaginator" href="{% url 'kioblog-page' i %}">{{ i }}</a>
                {% endif %}
            {% endfor %}
            {% if posts.has_next %}
                {% if tag %}
                    <a class="kioblogpaginator" href="{% url 'kioblog-tag-page' tag.slug posts.next_page_number %}">&raquo;</a>
                {% elif category %}
                    <a class="kioblogpaginator" href="{% url 'kioblog-category-page' category.slug posts.next_page_number %}">&raquo;</a>
                {% else %}
                    <a class="kioblogpaginator" href="{% url 'kioblog-page' posts.next_page_number %}">&raquo;</a>
                {% endif %}
            {% else %}
                <span class="disabled paginator">&raquo;</span>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}