{% load app_tags %}

<div class="shrink-0 bg-[#2a2f35] rounded-lg overflow-hidden shadow-lg group flex flex-col w-44 aspect-2/3">
  <a href="https://www.themoviedb.org/person/{{ cast.id }}"
     target="_blank"
     class="relative w-full flex-1">
    <img alt="{{ cast.name }}"
         class="lazyload absolute inset-0 w-full h-full bg-[#3e454d] transition-opacity duration-300 {% if cast.image != IMG_NONE %}object-cover{% endif %}"
         src="{{ IMG_NONE }}"
         data-src="{{ cast.image }}">
    <div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
      <div class="p-2.5 bg-indigo-600 text-white rounded-full hover:bg-indigo-500 hover:scale-110 transition-all duration-200"
           title="Open TMDB page for {{ cast.name }}">
        {% include "app/icons/external-link.svg" with classes="w-5 h-5" %}
      </div>
    </div>
  </a>

  <div class="px-3 py-2 flex flex-col justify-center">
    <div class="text-sm font-semibold text-white line-clamp-1"
         title="{{ cast.name }}">{{ cast.name }}</div>
    <div class="text-xs text-gray-400 line-clamp-1 mt-0.5"
         title="{{ cast.character }}">{{ cast.character }}</div>
  </div>
</div>