{% 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 %}
<header class="hero">
  <h1>{{ site_title | default(value="Blog") }}</h1>
  {% if site_description %}
  <p class="subtitle">{{ site_description }}</p>
  {% endif %}
</header>

{% if posts %}
<ul class="post-grid">
  {% for post in posts %}
  <li class="post-item">
    <a class="post-card" href="{{ post.url }}">
      <h2 class="post-title">{{ post.title | default(value="Untitled") }}</h2>
      {% if post.excerpt %}
      <p class="post-excerpt">{{ post.excerpt | truncate(length=180) }}</p>
      {% endif %}
      <div class="post-meta">
        {% if post.date %}
        <time class="post-date" datetime="{{ post.date | date(format="%Y-%m-%d") }}">{{ post.date | date(format="%b %d, %Y") }}</time>
        {% endif %}
        {% if post.reading_time %}
        <span class="reading-time">{{ post.reading_time }} min</span>
        {% endif %}
      </div>
      {% if post.tags %}
      <div class="post-tags">
        {% for tag in post.tags %}
        <span class="tag"># {{ tag }}</span>
        {% endfor %}
      </div>
      {% endif %}
    </a>
  </li>
  {% endfor %}
{% else %}
  <li class="post-item empty">No posts yet.</li>
{% endif %}
</ul>
{% endblock main %}