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

<section class="home-details-panel w-full relative bg-brand-cream-viii">
    <div class="container-wrapper max-w-7xl mx-auto">
        <div class="padding-wrapper relative lg:px-10 {{ specs and ( ( specs.beds | length ) or ( specs.baths | length ) or ( specs.lotSize | length ) ) ? 'md:pt-20 lg:pb-12 lg:pt-24' : 'lg:pb-12' }}">
            <div class="grid-wrapper w-full flex-col justify-start items-start lg:grid lg:grid-cols-12 lg:gap-8 xl:gap-12 2xl:gap-16">
                <div class="content-wrapper w-full flex-col justify-start items-start lg:col-span-6">
                    <div class="padding-wrapper px-6 sm:px-8 lg:px-0 py-10 sm:py-12 lg:pb-0">
                        <div class="content-wrapper w-full flex flex-col justify-start items-start">
                            <h2 class="font-body text-brand-terracotta-aa font-bold text-2xl lg:text-3xl">
                                {{ panel.header }}
                            </h2>
                            {% if panel.paragraph %}
                                <div class="wysiwyg font-body prose lg:prose-lg max-w-none mt-6 lg:mt-8">
                                    {{ panel.paragraph }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% if specs and ( ( specs.beds | length ) or ( specs.baths | length ) or ( specs.lotSize | length ) ) %}
                    <div class="specifications-wrapper bg-white-primary border-b border-t border-solid border-mintyy-gray-iii w-full md:w-screen md:left-container-fix md:top-0 relative md:absolute flex-row justify-center items-center">
                        <div class="padding-wrapper w-full flex flex-col xs:flex-row justify-start xs:justify-center items-start xs:items-center px-6 sm:px-8 md:px-0 py-6 lg:py-8">
                            <div class="top-content w-full xs:w-auto flex flex-col justify-center items-center">
                                <span class="font-body text-base text-brand-gray-i">
                                    Specifications
                                </span>
                            </div>
                            <div class="bottom-content w-full xs:w-auto flex flex-col justify-center items-center mt-6 xs:mt-0 xs:ml-8">
                                <div class="specs-wrapper w-full flex flex-row justify-center items-center 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>
                            </div>
                        </div>
                    </div>
                {% endif %}
                <div class="form-wrapper bg-white-pure w-full flex-col justify-start items-start lg:col-span-6">
                    <div class="padding-wrapper px-6 sm:px-8 lg:px-10 py-8 sm:py-10 lg:py-12">
                        <div class="form-wrapper w-full flex flex-col justify-start items-start">
                            <h2 class="font-body text-brand-terracotta-aa font-bold text-2xl lg:text-3xl">
                                {{ panel.formHeader }}
                            </h2>
                            {{ panel.form.render({
                                attributes: {
                                    class: "generic-home-form relative w-full m-0 mt-6 sm:mt-8 lg:mt-10"
                                },
                                values: {
                                    homeTitle: entry.title
                                }
                            }) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>