{% extends "layouts/base" %}

{% block content %}
	<div class="bg-cultured">
		<div class="outer-container">
			<div class="inner-container pb-44">
				<main class="grid gap-x-24 gap-y-16 lg:grid-cols-2 lg:gap-y-24">
					<h1 class="heading-0 col-span-full mt-12 self-start md:mt-16 lg:mt-32">{{ entry.title }}.</h1>
					{% set featuredImage = entry.caseFeaturedImage.one() %}
					<img class="mb-12" src="{{ featuredImage.getUrl() }}" alt="{{ featuredImage.altText }}">
					<div>
						<h2 class="font-poppins font-semibold text-xl mb-7">{{ entry.subheading }}</h2>
						<div class="redactor mb-16 sm:mb-24">
							{{ entry.paragraph }}
						</div>

						<div class="grid gap-11 sm:grid-cols-2 lg:gap-x-7 lg:grid-cols-3">
							{% include "pages/case-studies/_caseDetail" with { name: "Bathroom", value: entry.bathrooms } %}
							{% include "pages/case-studies/_caseDetail" with { name: "Bedroom", value: entry.bedrooms } %}
							{% include "pages/case-studies/_caseDetail" with { name: "Living Room", value: entry.livingRooms } %}
							{% include "pages/case-studies/_caseDetail" with { name: "Garage", value: entry.garage } %}
							{% include "pages/case-studies/_caseDetail" with { name: "Dining", value: entry.dining } %}
							{% include "pages/case-studies/_caseDetail" with { name: "Size", value: entry.propertySize ~ "m<sup>2</sup>" } %}
						</div>
					</div>
				</main>

				<section class="flex justify-center my-52 md:my-72 xxl:my-96">
					<blockquote class="border-l-2 border-phillipine-grey heading-1 font-light text-phillipine-grey pl-11 lg:w-4/5">
						"{{ entry.customerQuote }}".
					</blockquote>
				</section>

				{# Layout for Image Gallery. Image 2 and 5 must be equal height as well as image 3 and 4 must be equal height. #}
				<section class="grid gap-x-11 gap-y-10 md:grid-cols-2 md:gap-y-16">
					{% for image in entry.imageGallery.all() %}
						{% set imageComponent = "<img src='#{image.getUrl()}' alt='#{image.altText }'>" %}
						{% switch loop.index %}

							{% case 1 %}
								{{ imageComponent|raw|attr({ class: "col-span-full w-full" }) }}
							{% case 3 %}
								{{ imageComponent|raw }}
							{% case 4 %}
								{{ imageComponent|raw|attr({ class: "self-end md:-translate-y-1/2 md:-mb-[50%]" }) }}
							{% case 5 %}
								{{ imageComponent|raw }}
							{% default %}
								{{ imageComponent|raw }}

						{% endswitch %}

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

	{% include "partials/pageSections/_caseStudies" %}

	{% include "partials/pageSections/_contactUsBanner" %}
{% endblock %}