{% extends "internal/base.html" %}
{% import "internal/post-card.html" as card %}

{% block content %}
<section class="hero container reveal">
    <p id="eyebrow">{{feed.name}}</p>

    <h1>{{feed.shortDescription}}</h1>

    <p class="hero-description">{{feed.longDescription}}</p>
</section>

<section class="featured container reveal">
    <a class="featured-card" href="/posts/{{latestPost.id}}">

        <div class="featured-image">
            {% if latestPost.image is not none %}
            {{latestPost.image.html(site)}}
            {%- endif -%}
        </div>

        <div class="featured-content">
            <div class="category">
                Latest
            </div>

            <h2>{{latestPost.name}}</h2>

            <p>{{latestPost.description}}</p>

            <div class="post-meta">
                <span>{{latestPost.date.strftime("%b %d") if latestPost.date.year == now.year else latestPost.date.strftime("%b %d, %Y")}}</span>
                <span style="opacity: 0.4;">•</span>
                <span>{{latestPost.readTime}} min read</span>
            </div>
        </div>

    </a>
</section>

<section class="container">

    <div class="section-heading reveal">
        <h2>Recent posts</h2>
        <a id="all-posts" href="/posts">View all posts →</a>
    </div>

    <div class="post-grid">
        <!-- todo: no posts msg (maybe look at min-height?) -->
        {% for post in posts[:6] %}
            {{ card.card(post, site, now) }}
        {% endfor %}
    </div>
</section>
{% endblock %}