{% extends "layouts/base" %}

{% block content %}
	<main class="bg-cultured">
		<section class="swiper mb-20 lg:mb-32">
			<div class="swiper-wrapper">

				{% set buildImagesCrop = {
					mode: "crop",
					height: 840,
					width: 1720,
					quality: 100,
				} %}

				{% for image in entry.buildImages.all() %}
					<img class="swiper-slide min-h-[40rem] object-cover" src="{{ image.getUrl(buildImagesCrop) }}" alt="{{ image.altText }}">
				{% endfor %}
			</div>
			<div class="swiper-button-prev swiper-button-white swiper-prev"></div>
			<div class="swiper-button-next swiper-button-white swiper-next"></div>
		</section>

		<div class="outer-container">
			<section class="inner-container grid gap-x-20 gap-y-16 mb-32 lg:grid-cols-2">
				<h1 class="heading-1 font-medium lg:justify-self-end">{{ entry.title }}</h1>

				{% set buildCategory = entry.buildCategory.one().title|default(0) %}
				{% set buildBedrooms = entry.buildBedrooms.one().title|default(0) %}
				{% set buildBathrooms = entry.buildBathrooms.one().title|default(0) %}
				{% set categoryDisplay = entry.categoryDisplay %}

				<div>
					<div class="space-y-2 mb-12">
						<p class="font-acumin text-xl text-[#686868]">
							<span class="text-black">Category:&nbsp&nbsp</span>
							{{ buildCategory }}
						</p>
						{% if entry.typology %}
							<p class="font-acumin text-xl text-[#686868]">
								<span class="text-black">Typology:&nbsp&nbsp</span>
								{{ entry.typology }}
							</p>
						{% endif %}
						{% if categoryDisplay.contains('showBedrooms') %}
							<p class="font-acumin text-xl text-[#686868]">
								<span class="text-black">Bedroom:&nbsp&nbsp</span>
								{{ buildBedrooms }}
							</p>
						{% endif %}
						{% if categoryDisplay.contains('showBathrooms') %}
							<p class="font-acumin text-xl text-[#686868]">
								<span class="text-black">Bathroom:&nbsp&nbsp</span>
								{{ buildBathrooms }}
							</p>
						{% endif %}
						{% if entry.totalArea %}
							<p class="font-acumin text-xl text-[#686868]">
								<span class="text-black">Total Size:&nbsp&nbsp</span>
								{{ entry.totalArea }}m<sup>2</sup>
							</p>
						{% endif %}
					</div>
					<div class="redactor">
						{{ entry.buildDescription }}
					</div>
				</div>
			</section>

			<section class="inner-container grid gap-x-20 gap-y-16 items-center mb-36 lg:grid-cols-2 xl:mb-52">
				{% set floorPlanImage = entry.floorPlanImage.one() %}
				<img src="{{ floorPlanImage.getUrl() }}" alt="{{ floorPlanImage.altText }}">

				<div>
					<h1 class="heading-1 mb-7 lg:mb-10">{{ entry.floorPlanTitle }}</h1>
					{% for block in entry.floorPlanDetails.all() %}
						{% switch block.type %}

							{% case "housingArea" %}
								<div class="grid grid-cols-1 gap-y-1 mb-20 xl:grid-cols-2 xxxl:flex xxxl:gap-14">
									{% if block.area %}
										<p class="copy font-normal text-base sm:text-xl">
											Area:&nbsp
											{{ block.area }}m<sup>2</sup>
										</p>
									{% endif %}
									{% if block.livingZone %}
										<p class="copy font-normal text-base sm:text-xl">
											Living Zone:&nbsp
											{{ block.livingZone }}m<sup>2</sup>
										</p>
									{% endif %}
									{% if block.verandah %}
										<p class="copy font-normal text-base sm:text-xl">
											Veranda:&nbsp
											{{ block.verandah }}m<sup>2</sup>
										</p>
									{% endif %}
								</div>
							{% case "basic" or "premium" or "flexible" %}

								{% set plusIcon = craft.assets()
									.volume('icons')
									.title('Plus Solid')
									.one()
								%}

								{% set minusIcon = craft.assets()
									.volume('icons')
									.title('Minus Solid')
									.one()
								%}

								<div class="last:border-b last:border-timber-wolf" data-accordion="collapse" data-active-classes="bg-cultured border-t-2 border-spicy-mix open">
									<div>
										<button type="button" class="accordion-button border-t border-timber-wolf flex group justify-between pt-10 text-left w-full" data-accordion-target="#accordion-collapse-body-{{ loop.index }}" aria-expanded="false" aria-controls="accordion-collapse-body-{{ loop.index }}">
											<h2 class="font-poppins text-xl text-spicy-mix mb-11">{{ block.type.name }}</h2>
											<span class="relative h-7 w-7">
												{{ svg(plusIcon)|attr({ class:"plus-icon absolute fill-spicy-mix-tint group-hover:fill-spicy-mix h-7" }) }}
												{{ svg(minusIcon)|attr({ class:"minus-icon absolute fill-spicy-mix-tint group-hover:fill-spicy-mix h-7" }) }}
											</span>
										</button>
										<div class="hidden mb-14 redactor" id="accordion-collapse-body-{{ loop.index }}">
											{{ block.body }}
										</div>
									</div>
								</div>
							{% default %}

						{% endswitch %}
					{% endfor %}
				</div>

				{% set chevronLeft = craft.assets()
					.volume('icons')
					.title('Chevron Left')
					.one()
				%}

				<button class="border-none bg-transparent py-3">
					<a class="font-acumin group text-xl flex gap-6 items-center" href="{{ url('/the-builds') }}">
						<span class="bg-spicy-mix group-hover:bg-spicy-mix-shade flex items-center justify-center p-2 rounded-full transition-all">
							{{ svg(chevronLeft)|attr({ class: "fill-white group-hover:fill-white h-6 w-6 transition-all" }) }}
						</span>
						Back to Our Builds
					</a>
				</button>
			</section>
		</div>

		{% include "partials/pageSections/_contactUsBanner" %}
	</main>

{% endblock %}