{% extends "base" %}
{% import "macros" as macros %}

{% block title %}
{{ instance.name }}
{% endblock title %}

{% block content %}
    <h1>{{ "Welcome on {{ instance_name | escape }}" | _(instance_name=instance.name) }}</h1>

    <h2>{{ "Latest articles" | _ }}</h2>
    <div class="cards">
        {% for article in recents %}
            {{ macros::post_card(article=article) }}
        {% endfor %}
    </div>
    {{ macros::paginate(page=page, total=n_pages) }}
    
    <section class="spaced">
        <div class="cards">
            <div class="presentation card">
                <h2>{{ "What is Plume?" | _ }}</h2>
                <main>
                    <p>{{ "Plume is a decentralized blogging engine." | _ }}</p>
                    <p>{{ "Authors can manage various blogs from an unique website." | _ }}</p>
                    <p>{{ "Articles are also visible on other Plume websites, and you can interact with them directly from other platforms like Mastodon." | _ }}</p>
                </main>
                <a href="/users/new">{{ "Create your account" | _ }}</a>
            </div>
            <div class="presentation card">
                <h2>{{ "About {{ instance_name }}" | _(instance_name=instance.name) }}</h2>
                <main>
                    {{ instance.short_description_html | safe }}
                    <section class="stats">
                        <div>
                            <p>{{ "Home to" | _ }}</p>
                            <em>{{ n_users }}</em>
                            <p>{{ "people" | _ }}</p>
                        </div>
                        <div>
                            <p>{{ "Who wrote" | _ }}</p>
                            <em>{{ n_articles }}</em>
                            <p>{{ "articles" | _ }}</p>
                        </div>
                    </section>
                </main>
                <a href="/about">{{ "Read the detailed rules" | _ }}</a>
            </div>
        </div>
    </section>
{% endblock content %}