<a href="{{ user.get_absolute_url }}"
   class="relative rounded-lg border border-neutral-300 dark:border-neutral-700 bg-base-100 px-6 py-5 shadow-xs flex items-center space-x-3 hover:border-neutral-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
  <div class="shrink-0 h-10 w-10 rounded-full inline-flex">
    {% component "avatar" user=user size="md" %}{% endcomponent %}
  </div>
  <div class="flex-1 min-w-0">
    <span href="#" class="focus:outline-none">
      <span class="absolute inset-0" aria-hidden="true"></span>
      <p class="text-sm font-medium text-neutral-900 dark:text-neutral-100">{{ title|default:"FireFighter" }}</p>
      <p class="text-sm text-neutral-500 truncate dark:text-neutral-300">{{ user.full_name }}</p>
    </span>
  </div>
</a>
