<div{{ attributes }}>
    <div class="p-4 flex flex-col md:flex-row gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
        {% if poster != null and poster != "https://image.tmdb.org/t/p/w500" %}
            <img class="w-full md:w-24 rounded-lg" src="{{ preload(poster) }}" />
        {% else %}
            <div class="w-full md:w-32 h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
                <twig:ux:icon width="16" name="hugeicons:loading-01" />
            </div>
        {% endif %}

        <div class="w-full flex flex-col">
            <h3 class="mb-4 text-xl font-medium leading-tight font-bold text-gray-50">
                {{ title }} ({{ year }})
            </h3>
            <p class="hidden md:block md:text-gray-50">
                {{ description }}
            </p>
        </div>
        <a class="h-9 rounded-md py-1 px-2 bg-green-600 text-gray-50 text-center"
           href="{{ path('app_search_result', {mediaType: mediaType, imdbId: imdbId}) }}"
           >choose</a>
    </div>
</div>
