{% extends "index.html" %}

{% block main %}
  {%- if section.title %}
  <h1 class="mb-8">{{ section.title }}</h1>
  {%- endif %}
  
  {%- if section.content %}
  <section class="mb-12">{{ section.content | safe }}</section>
  {%- endif %}
  
  {%- if section.pages %}
  <div class="not-prose">
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      {%- for page in section.pages %}
      <article class="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-md transition-shadow">
        <h2 class="text-xl font-semibold mb-3">
          <a href="{{ page.permalink | safe }}" class="text-blue-600 dark:text-blue-400 hover:underline">
            {{ page.title }}
          </a>
        </h2>
        <time class="text-sm text-gray-500 dark:text-gray-400 mb-4 block">
          {{ page.date | date(format="%B %d, %Y") }}
        </time>
        <div class="text-gray-700 dark:text-gray-300 mb-4">
          {{ page.content | striptags | truncate(length=200) }}
        </div>
        <a href="{{ page.permalink | safe }}" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">
          Read more →
        </a>
      </article>
      {%- endfor %}
    </div>
  </div>
  {%- endif %}
{% endblock main %}