Card: Default

{% set title = title %}
{% set description = description %}
{% set style = style %}
{% set overlay = overlay %}
{% set tagPosition = tagPosition|default('top') %}
{% set tags = tags %}
{% set caption = caption %}
{% set alignContent = alignContent %}
{% set link = link|default(false) %}
{% set linkHref = linkHref %}
{% set tagsTop = tagsTop|default(false) %}
{% set afterTitle = afterTitle %}

{% set styles = {
    'media-full': 'aspect-square',
    'media-normal': 'aspect-auto',
    'media-freehand': 'bg-gray-700 aspect-square flex flex-col justify-between',
    'default': 'bg-gray-600'
} %}

{% set overlays = {
    'overlay-gradient': 'bg-gradient-to-b from-transparent to-gray-700 opacity-50 f-full md:h-3/4',
    'overlay-default': 'bg-gray-600 opacity-50 h-full'
} %}

{% set alignContents = {
    'between': 'flex flex-col justify-between',
    'bottom': 'mt-auto'
} %}

{% set tag = link ? "a" : "div" %}

<{{ tag }} {% if linkHref %} href="{{ linkHref }}" {% endif %} class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 {{ style ? styles[style] : '' }} {{ link ? " transition-all hover:brightness-90 active:scale-95" : "" }}">
    {% if tags %}
        <div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
            {% for item in tags %}
                {% if tagPosition == 'top' %}
                    {% if style == 'media-full' %}
                        {% render '@tag' with {
                            title: item.title,
                            style: 'white'
                        } %}     
                    {% elseif style == 'media-freehand' %}
                        {% include '@tag' with {
                            title: item.title,
                            style: 'gray-600'
                        } %}    
                    {% else %}  
                        {% include '@tag' with {
                            title: item.title,
                            style: 'gray'
                        } %}                 
                    {% endif %}  
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}

    {% if (style == 'media-full') or (style == 'media-normal') %}
       <div class="absolute top-0 left-0 w-full h-full">
            {% include '@image' with {
                classes: 'w-full h-full object-cover',
            } %}
       </div>
    {% elseif style == 'media-freehand' %}
        <div class="relative h-[55%]">
            {% include '@image' with {
                src: '/image/product.png',
                classes: 'mx-auto h-full',
                height: "h-[80%]"
            } %}
        </div>
    {% endif %}
    
    <div class="relative z-10 {{ alignContent ? alignContents[alignContent] : '' }}">
        <div class="text-white font-bold text-xl mb-2 xl:mb-4">
            {{ title }}
            {% if afterTitle %}
                <span class="text-sm mx-1 my-2 opacity-50">
                    {{ afterTitle }}
                </span>
            {% endif %}
        </div>

        {% if description %}
            <div class="text-white font-normal text-base leading-customText mb-5 xl:mb-10">
                {{ description }}
            </div>
        {% endif %}

        {% if tags %}
            <div>
                {% for item in tags %}
                    {% if tagPosition == 'bottom' %}
                        {% if style == 'media-full' %}
                            {% render '@tag' with {
                                title: item.title,
                                style: 'white'
                            } %}     
                        {% elseif style == 'media-freehand' %}
                            {% render '@tag' with {
                                title: item.title,
                                style: 'white'
                            } %}    
                        {% else %}  
                            {% render '@tag' with {
                                title: item.title,
                                style: 'gray'
                            } %}                 
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}
    </div>

    {% if link or caption %}
        <div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
            {% if caption %}
                <div class="text-white text-xs mr-4">
                    {{ caption }}
                </div>
            {% endif %}


            {% if link %}
                <div class="p-4 bg-primary grid place-content-center ml-auto">
                    {% render '@icon' with {
                        name: 'arrow',
                        size: "md",
                        strokeColor: "[&_*]:!stroke-white"
                    } %}
                </div>
            {% endif %}
        </div>
    {% endif %}

    {% if overlay %}
        <div class="absolute bottom-0 left-0 w-full  pointer-events-none {{ overlay ? overlays[overlay] : '' }}"></div>
    {% endif %}
</{{ tag }}>