{% extends "base.html" %}

{% block title %}{{ site_title | default(value="Blog") }}{% endblock title %}
{% block description %}{{ site_description | default(value="") }}{% endblock description %}

{% block main_class %}index{% endblock main_class %}
{% block main %}
  <section class="hero">
    <h1>{{ site_title | default(value="Blog") }}</h1>
    {% if site_description %}
    <p class="lead">{{ site_description }}</p>
    {% endif %}
  </section>

  {% if posts and posts | length > 0 %}
    <section class="featured">
      {% for post in posts %}
        {% if loop.first %}
          <a href="{{ post.url }}" class="featured-post">
            <div class="featured-body">
              <span class="featured-badge" aria-label="Featured">Featured</span>
              <h2 class="featured-title">{{ post.title | default(value="Untitled") }}</h2>
              <div class="featured-meta">
                {% if post.date %}
                <time class="date" datetime="{{ post.date | date(format="%Y-%m-%d") }}">{{ post.date | date(format="%B %d, %Y") }}</time>
                {% endif %}
                {% if post.tags %}
                <span class="tags">
                  {% for tag in post.tags %}<span class="tag">{{ tag }}</span>{% endfor %}
                </span>
                {% endif %}
              </div>
            </div>
          </a>
        {% endif %}
      {% endfor %}
    </section>
  {% endif %}

  {% if posts and posts | length > 1 %}
    <section class="index-list">
      {% for post in posts %}
        {% if not loop.first %}
        <a class="index-item" href="{{ post.url }}">
          <div class="index-item__title">{{ post.title | default(value="Untitled") }}</div>
          <div class="index-item__meta">
            {% if post.date %}
              <time class="date" datetime="{{ post.date | date(format="%Y-%m-%d") }}">{{ post.date | date(format="%b %d, %Y") }}</time>
            {% endif %}
            {% if post.tags %}
              <span class="tags">
                {% for tag in post.tags %}<span class="tag">{{ tag }}</span>{% endfor %}
              </span>
            {% endif %}
          </div>
        </a>
        {% endif %}
      {% endfor %}
    </section>
  {% endif %}
{% endblock main %}