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

<!---->
{% block content %}
<section class="container grid gap-12 mx-auto px-4 py-20">
  {% include 'blog/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>{{ index.title }}</h1>

    {{ index.content }}
  </div>

  <section class="grid gap-8">
    <h1 class="text-primary font-bold text-2xl lg:text-4xl">
      {% trans 'Latest articles' %}
    </h1>

    <ol class="grid grid-cols-12 gap-4">
      {% for article in articles %}
      <!---->
      {% include 'blog/components/article.html' %}
      <!---->
      {% empty %}
      <li
        role="article"
        class="card bg-base-300 card-sm shadow-sm md:card-md xl:card-lg 2xl:card-xl col-span-12 md:col-span-6 lg:col-span-4 2xl:col-span-3"
      >
        <div class="card-body">
          <h2 class="card-title text-primary">{% trans 'No articles' %}</h2>

          <p class="grow-0">{% trans 'Latest articles will appear here.' %}</p>
        </div>
      </li>
      {% endfor %}
    </ol>
  </section>

  <section class="grid gap-8">
    <h1 class="text-primary font-bold text-2xl lg:text-4xl">
      {% trans 'Categories' %}
    </h1>

    <ol class="grid grid-cols-12 gap-4">
      {% for page in index.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>
      {% empty %}
      <li
        role="article"
        class="card bg-base-300 card-sm shadow-sm md:card-md xl:card-lg 2xl:card-xl col-span-12 md:col-span-6 lg:col-span-4 2xl:col-span-3"
      >
        <div class="card-body">
          <h2 class="card-title text-primary">{% trans 'No categories' %}</h2>

          <p class="grow-0">
            {% trans 'Published categories will appear here.' %}
          </p>
        </div>
      </li>
      {% endfor %}
    </ol>
  </section>
</section>
{% endblock %}

<!---->
{% block drawer_content %}
<li>
  <a href="{% pageurl index.get_parent %}">
    <i data-lucide="arrow-left" class="size-4 md:size-6 rtl:rotate-180"></i>
    {{ index.get_parent.title }}
  </a>
</li>
{% for page in index.get_children %}
<li>
  <a href="{% pageurl page %}">{{ page.title }}</a>
</li>
{% endfor %}
<!---->
{% endblock %}