{% load i18n wagtailcore_tags wagtailimages_tags %}

<li
  role="article"
  class="group col-span-12 row-span-12 md:col-span-6 md:row-span-3 first:md:col-span-6 first:md:row-span-6 lg:col-span-4 xl:col-span-3"
>
  <div
    class="card border border-base-300 overflow-hidden image-full relative bg-base-100 hover:bg-base-200 card-sm md:card-md xl:card-lg 2xl:card-xl size-full shadow group-first:flex-col lg:flex-col"
  >
    <a href="{% pageurl article %}" class="absolute z-10 inset-0">
      <span class="sr-only">{% trans 'Read' %}</span>
    </a>

    <figure class="skeleton overflow-clip">
      {% image article.image fill-1920x1080 %}
    </figure>

    <div
      class="card-body p-4 justify-between bg-gradient-to-t from-neutral-900 to-transparent"
    >
      <div class="card-actions px-2 items-center gap-1 z-20">
        <a
          href="{% pageurl article.get_parent %}"
          class="tooltip tooltip-bottom tooltip-primary z-20"
          data-tip="{% trans 'Category' %}"
        >
          <span class="badge badge-xs md:badge-sm badge-primary">
            {{ article.get_parent.title }}
          </span>
        </a>

        <div
          class="tooltip tooltip-bottom 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>
      </div>

      <div class="grid gap-4">
        <h2 class="card-title text-shadow-lg">{{ article.title }}</h2>

        <p class="grow-0 text-shadow-lg">{{ article.headline }}</p>
      </div>
    </div>
  </div>
</li>