{% load i18n blog wagtailimages_tags %}

<li
  role="article"
  class="relative card bg-base-300 hover:bg-base-200 card-side card-sm md:card-md xl:card-lg 2xl:card-xl nth-[2]:lg:col-span-6 nth-[3]:lg:col-span-6 nth-[2]:lg:row-span-3 nth-[3]:lg:row-span-3 group col-span-12 row-span-12 size-full shadow-sm first:flex-col md:col-span-6 md:row-span-6 first:md:col-span-12 lg:col-span-6 lg:row-span-6 first:lg:col-span-6 first:lg:row-span-6"
>
  <a href="{% page_url article LANGUAGE_CODE %}" class="absolute inset-0">
    <span class="sr-only">{% trans 'Read' %}</span>
  </a>

  <figure
    class="skeleton overflow-clip w-full min-w-1/2 max-w-1/2 group-first:max-w-full"
  >
    {% image article.image fill-1920x1080 %}
  </figure>

  <div class="card-body p-4 justify-end">
    <h2 class="card-title text-primary">{{ article.title }}</h2>

    <p class="hidden grow-0 group-first:block">{{ article.headline }}</p>

    <div class="card-actions items-center gap-1">
      <div
        class="tooltip tooltip-primary"
        data-tip="{% trans 'Date published' %}"
      >
        <span class="badge badge-soft badge-xs md:badge-sm badge-primary">
          {{ article.latest_revision_created_at|date:'Y/m/d' }}
        </span>
      </div>

      <a
        href="{% page_url article.get_parent LANGUAGE_CODE %}"
        class="tooltip tooltip-primary"
        data-tip="{% trans 'Category' %}"
      >
        <span class="badge badge-xs md:badge-sm badge-primary">
          {{ article.get_parent.title }}
        </span>
      </a>
    </div>
  </div>
</li>