{% extends "base.html" %}

{% block content %}
<div class="w-full flex flex-row justify-center mt-2">
    <div class="w-full lg:w-1/2 px-8 flex flex-col items-start">
      <div class="flex flex-row items-center gap-x-3">
        <h1 class="text-3xl">Blog posts</h1>
  
        <a href="{{ get_url(path="feed.xml", trailing_slash=false) }}">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12.75 19.5v-.75a7.5 7.5 0 00-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
            </svg>
        </a>
      </div>
  
        <div class="divide-y divide-blue-200">
            {% for post in section.pages %}
            <!-- Post item -->
            <div class="flex flex-col pt-4">
                <a href="{{ post.permalink | safe }}">
                    <h1 class="text-indigo-400 prose prose-lg text-xl">{{ post.title }}</h1>
                </a>
                <span class="text-md mt-2">Posted by <i>{{ post.extra.author }}</i> on {{ post.date }}</span>
  
                <!-- Blurp -->
                <span class="prose mt-4">
                    {{ post.summary | safe }}
                </span>
            </div> 
            {% endfor %}
        </div>
    </div>
  </div>  
{% endblock %}