{% set availabilityTheme = '' %}
{% if result.homeAvailability | length %}
    {% if result.homeAvailability == 'available' %}
        {% set availabilityTheme = 'bg-brand-terracotta-aa text-white' %}
    {% elseif result.homeAvailability == 'nearlyGone' %}
        {% set availabilityTheme = 'bg-brand-terracotta-aaa text-white' %}
    {% else %}
        {% set availabilityTheme = 'bg-mintyy-gray-ii text-brand-black' %}
    {% endif %}
{% endif %}

{% set specs = result.homeSpecifications.one() %}

<div class="explore-homes-result-card w-full h-full flex flex-col justify-start items-start border-t sm:border-0 border-solid border-mintyy-gray-iii">
    <div class="padding-wrapper w-full h-full p-6 sm:p-0 flex flex-col justify-between items-start">
        <div class="top-wrapper w-full flex flex-col justify-start items-start">
            <div class="thumbnail-wrapper w-full relative flex flex-col justify-start items-start bg-mintyy-gray-ii rounded-lg overflow-hidden">
                <a href="{{ result.url }}" class="image-wrapper w-full flex flex-col justify-start items-start">
                    <span class="sr-only">Click to visit the {{ result.title }} home</span>
                    <div class="aspect-wrapper w-full aspect-w-4 aspect-h-3 lg:aspect-w-19 lg:aspect-h-10 pointer-events-none">
                        {% set imageClasses = 'w-full h-full object-cover object-center lazyload' %}
                        {% if result.seoFacebookThumbnail.one() | length %}
                            {% for image in result.seoFacebookThumbnail.all() %}
                                {% include themeDir ~ '/_includes/_modules/_optimized-image.twig' with
                                    {
                                        'alt': result.seoFacebookThumbnail.alt | length ? result.seoFacebookThumbnail.alt : '',
                                        'containerStyles': '!absolute',
                                        'imgStyles': '!w-full !h-full !object-cover !object-center'
                                    }
                                %}
                            {% endfor %}
                        {% else %}
                            <img src="" data-src="{{ staticImagesUrl }}webp/search-thumbnail-backup.jpg.webp" alt="A photo of a living room and kitchen, all accessible to a wheelchair user." class="{{ imageClasses }}" />
                        {% endif %}
                    </div>
                </a>
                {% if result.homeCategory.one() | length %}
                    <div class="result-type absolute px-6 pt-2 pb-[0.675rem] left-2 lg:left-4 top-2 lg:top-4 bg-white-primary rounded-full">
                        <span class="font-body text-sm lg:text-base">
                            {{ result.homeCategory.one().title }}
                        </span>
                    </div>
                {% endif %}
                {% if result.homeAvailability | length %}
                    {% if not ( result.homeAvailability == 'default' ) %}
                        <div class="availability-type absolute w-full flex justify-center items-center px-6 py-3 bottom-0 inset-x-0 {{ availabilityTheme }}">
                            <span class="font-body text-base lg:text-lg">
                                {{ result.homeAvailability.label }}
                            </span>
                        </div>
                    {% endif %}
                {% endif %}
            </div>
            <div class="content-wrapper w-full flex flex-col justify-start items-start mt-6 lg:mt-8">
                <div class="title-wrapper w-full flex flex-row justify-start items-start flex-wrap gap-x-6 gap-y-2{{ result.homeType | length ? ' mb-4 lg:mb-1' : '' }}">
                    <h2 class="font-body text-brand-terracotta-aa font-bold text-2xl{{ result.homeType | length ? ' mt-0.5' : '' }}">
                        {{ result.headerPanelMatrix.one().header | length ? result.headerPanelMatrix.one().header : result.title }}
                    </h2>
                    {% if result.homeType | length %}
                        <span class="font-body text-sm px-6 py-2 rounded-full bg-mintyy-gray-i text-mintyy-gray-xi">
                            {{ result.homeType }}
                        </span>
                    {% endif %}
                </div>
                {% if specs and ( ( specs.beds | length ) or ( specs.baths | length ) or ( specs.lotSize | length ) ) %}
                    <div class="specs-wrapper w-full flex flex-row justify-start items-center mt-2 lg:mt-4 gap-6">
                        {% if specs.homes | length %}
                            <div class="homes-wrapper flex flex-row justify-start items-center">
                                <span class="font-body text-base font-semibold text-brand-gray-i mb-1">
                                    {{ specs.homes }}
                                </span>
                                {{ svg(svgPath ~ '/core/home-icon.svg') | attr({ class: 'w-5 text-brand-gray-i ml-4' }) }}
                            </div>
                        {% endif %}
                        {% if specs.beds | length %}
                            <div class="beds-wrapper flex flex-row justify-start items-center">
                                <span class="font-body text-base font-semibold text-brand-gray-i mb-1">
                                    {{ specs.beds }}
                                </span>
                                {{ svg(svgPath ~ '/core/bed-icon.svg') | attr({ class: 'w-5 text-brand-gray-i ml-4' }) }}
                            </div>
                        {% endif %}
                        {% if specs.baths | length %}
                            <div class="baths-wrapper flex flex-row justify-start items-center">
                                <span class="font-body text-base font-semibold text-brand-gray-i mb-1">
                                    {{ specs.baths }}
                                </span>
                                {{ svg(svgPath ~ '/core/shower-icon.svg') | attr({ class: 'w-5 text-brand-gray-i ml-4' }) }}
                            </div>
                        {% endif %}
                        {% if specs.parking | length %}
                            <div class="parking-wrapper flex flex-row justify-start items-center">
                                <span class="font-body text-base font-semibold text-brand-gray-i mb-1">
                                    {{ specs.parking }}
                                </span>
                                {{ svg(svgPath ~ '/core/car-icon.svg') | attr({ class: 'w-5 text-brand-gray-i ml-4' }) }}
                            </div>
                        {% endif %}
                        {% if specs.lotSize | length %}
                            <div class="lot-size-wrapper flex flex-row justify-start items-center">
                                <span class="font-body text-base font-semibold text-brand-gray-i mb-1">
                                    {{ specs.lotSize }}m
                                </span>
                                {{ svg(svgPath ~ '/core/lot-size-icon.svg') | attr({ class: 'w-5 text-brand-gray-i ml-4' }) }}
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
                {% if result.description | length %}
                    <div class="description wysiwyg prose max-w-none mt-3 lg:mt-4">
                        {{ result.description }}
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="bottom-wrapper w-full flex flex-col justify-start items-start mt-4 sm:mt-6">
            {% include themeDir ~ '/_includes/_modules/_button' with {
                'buttonType': 'internal-link',
                'buttonText': 'Explore Home',
                'href': result.url,
                'title': 'Explore Home',
                'theme': 'primary',
                'addCustomClasses': 'mt-4'
            } %}
        </div>
    </div>
</div>