{% extends 'docs/base.html' %}{% load i18n wagtailcore_tags %}

<!---->
{% block content %}
<section class="container grid gap-12 mx-auto px-4 py-20">
  {% include 'docs/components/breadcrumbs.html' %}

  <div
    class="mx-auto prose prose-sm prose-video:rounded-box xl:prose-lg 2xl:prose-xl prose-headings:text-primary prose-img:rounded-box prose-img:w-full"
  >
    <h1>{{ section.title }}</h1>

    <p class="lead">{{ section.description }}</p>

    {{ section.content }}
  </div>

  <ol class="grid grid-cols-12 gap-4">
    {% for page in section.get_children.specific %}
    <li
      role="article"
      class="relative card bg-base-300 hover:bg-base-200 card-sm md:card-md xl:card-lg 2xl:card-xl col-span-12 size-full shadow-sm md:col-span-6 lg:col-span-4 2xl:col-span-3"
    >
      <a href="{% pageurl page %}" class="absolute inset-0">
        <span class="sr-only">{% trans 'Read' %}</span>
      </a>

      <div class="card-body">
        <h2 class="card-title text-primary">{{ page.title }}</h2>

        <p class="grow-0">{{ page.description }}</p>
      </div>
    </li>
    {% endfor %}
  </ol>

  {% include 'docs/components/prev_next.html' %}
</section>
{% endblock %}