{% load i18n wagtailcore_tags %}

<a
  href="{% pageurl category %}"
  class="card card-sm lg:card-md xl:card-lg 2xl:card-xl bg-base-200 size-full shadow-sm hover:bg-base-300"
>
  <div class="card-body gap-4">
    <h2 class="card-title text-primary">{{ category.title }}</h2>

    <div class="card-actions justify-end">
      <div
        class="tooltip tooltip-left tooltip-info tooltip-open rtl:tooltip-right"
        data-tip="{% trans 'Jobs' %}"
      >
        <span
          class="badge badge-sm md:badge-md xl:badge-lg 2xl:badge-xl badge-info font-semibold"
        >
          {{ category.get_children_count }}
        </span>
      </div>
    </div>
  </div>
</a>