{% extends "base.html" %}
{% import "_icons.html" as icon %}

{% block title %}{{ blog.title }} - {{ site.name }}{% endblock %}
{% block description %}{{ blog.description }}{% endblock %}

{% block content %}
    <main class="container page-container--top">
        <section class="page-hero">
            <h1>{{ blog.title }}</h1>
            <p>{{ blog.description }}</p>
            <div class="button-group">
                <a href="{{ base }}feed.xml" class="btn btn-secondary">
                    {{ icon.rss(16) }}
                    RSS feed
                </a>
            </div>
        </section>

        <section class="section blog-list">
            {% if posts %}
            <div class="post-grid">
                {% for post in posts %}
                <a class="post-card" href="{{ base }}{{ post.url }}">
                    <div class="post-meta">
                        <time datetime="{{ post.date | iso_date }}">{{ post.date | long_date }}</time>
                        <span class="dot"></span>
                        <span>{{ post.author }}</span>
                    </div>
                    <h3>{{ post.title }}</h3>
                    <p>{{ post.summary }}</p>
                    <div class="post-meta">
                        {% for tag in post.tags %}
                        <span class="post-tag">{{ tag }}</span>
                        {% endfor %}
                    </div>
                    <span class="post-more">Read the post &rarr;</span>
                </a>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-center">No posts yet.</p>
            {% endif %}
        </section>
    </main>
{% endblock %}