{% extends "base" %}

{% block extracss %}
<link href="/static/css/index.css" rel="stylesheet"/>
{% endblock extracss %}

{% block content %}
    {% for post in posts %}
    <a class="article" href="/post/{{ post.title | slugify }}-{{ post.id }}">
        <article>
            <span><strong>{ image: </strong></span>
          <figure>
            <img src="https://files.realpython.com/media/MProc.7cf3be371bbc.png">
          </figure>
          <p class="article-title"><strong>title: </strong>{{ post.title }}</p>
          <p class="article-body"><strong>Article: </strong>{{ post.content | split(pat=" ") | slice(end=100) | join(sep=" ") }}</p>
          <div class="article-info">
            <span><strong>Author: </strong>kirbylife <strong>Date: </strong>{{ post.created_at | date(format="%Y-%m-%d") }}<strong> }</strong></span>
          </div>
        </article>
    </a>
    {% endfor %}

    {# Pages #}
    <div class="pagination">
    <strong>Pages:</strong>
    [
    {% for n in range(start=1, end=total_pages+1) %}
            <a {% if actual_page != n %}href="?page={{ n }}"{% endif %}>página {{ n }}</a>{% if total_pages != n %}, {% endif %}
    {% endfor %}
    ]
    </div>
{% endblock content %}