{% extends "base.html" %}
{% block title %}{{ metadata.title | title }}{% endblock title %}
{% block content %}
<h1 class="text-center">Posts</h1>
<section>
  <div class="flex-container">
    {% set sorted_posts = posts | sort(attribute="created") | reverse %}
    {% for post in sorted_posts %}
    <div class="flex-box animated-card" style="animation-delay: {{ loop.index0 * 100 }}ms;"
      onclick="location.href='{{ post.permalink }}';">
      <h3>{{ post.title }}</h3>
      <div id="description">
        <description>
          <span>{{ post.description }}</span>
          <p>Tags:
            {% for category in post.categories %}
            <a href="/categories/{{ category }}">{{ category | capitalize }}</a>
            {% endfor %}
          </p>
          <p><span>Released: {{ post.created | date(format="%Y-%m-%d") }}</span></p>
        </description>
      </div>
    </div>
    {% endfor %}
  </div>
</section>
{% endblock content %}